<template>
  <div class="flex flex-col h-screen overflow-hidden bg-[#e5efe9]">
    <TopNavBar title="漂流攻略" background="#E5EFE9" />

    <div class="flex-1 min-h-0 overflow-y-auto scrollbar-none [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden">
      <div class="box-border">
        <div class="overflow-hidden">
          <div class="pt-4 px-[18px] pb-[14px] border-b border-[rgba(15,23,42,0.06)]">
            <div class="text-[#1e293b] text-[18px] font-black leading-[26px]">下水之前，先听小七唠两句</div>
            <div
              class="inline-flex w-fit min-h-6 mt-[10px] px-[10px] items-center border rounded-full text-[11px] font-black leading-[18px] text-[#d97706] bg-[#fffbeb] border-[#fde68a]">
              漂流攻略
            </div>
          </div>

          <div class="pt-[18px] px-[18px] pb-1">
            <div class="mb-[14px] text-[#475569] text-[13px] font-medium leading-6">
              卧龙潭的水，是那种一眼就让人想跳进去的绿。
              <text class="px-[5px] py-[1px] rounded bg-[#ecfdf5] text-[#065f46] font-black">皮筏艇漂流</text>
              全程约两公里，三段激流接连而下，水花会结结实实拍在脸上。这趟值得冲，但晕水的朋友得先掂量掂量。
            </div>

            <img class="block w-full h-[160px] my-1 mt-1 mb-4 rounded-[14px] bg-[#f1f5f9]"
              src="https://one-feel-config-images-bucket.oss-cn-chengdu.aliyuncs.com/comp1.jpg" />

            <div class="mt-[18px] mb-2 text-[#1e293b] text-[13px] font-black leading-5">下水前，这几样别落下</div>
            <div
              class="my-1 mt-1 mb-4 px-[14px] py-[10px] border-l-[3px] rounded-[12px] text-[#065f46] bg-[#f0fdf4] text-[12px] font-extrabold leading-[22px] border-l-[#34d399]">
              ① 换洗衣服塞进防水袋，手机一定要封好<br />
              ② 穿凉鞋或防滑鞋，拖鞋是真的不让下<br />
              ③ 贵重东西先存好寄存柜，别揣身上
            </div>

            <div class="mb-[14px] text-[#475569] text-[13px] font-medium leading-6">
              小七的私心建议：挑
              <span class="px-[5px] py-[1px] rounded bg-[#ecfdf5] text-[#065f46] font-black">上午九点到十一点</span>
              这一场。水量足、太阳还没毒，漂下来浑身舒坦，不会被晒得发昏。
            </div>

            <div class="mt-[18px] mb-2 text-[#1e293b] text-[13px] font-black leading-5">这些坑，提前绕开</div>
            <div
              class="my-1 mt-1 mb-4 px-[14px] py-[10px] border-l-[3px] rounded-[12px] text-[12px] font-extrabold leading-[22px] border-l-[#fbbf24] text-[#92400e] bg-[#fffbeb]">
              雨后水量猛涨可能临时停漂，出发前先问一句开放状态；现场拖鞋不补租，光脚更危险。
            </div>
          </div>

          <div class="mt-1 pb-5 border-t border-[rgba(15,23,42,0.06)]">
            <div class="pt-3 px-[18px] pb-2 text-[#94a3b8] text-[10px] font-black tracking-[0.6px] leading-4">
              相关票务
            </div>
            <div
              class="w-full overflow-x-auto whitespace-nowrap scrollbar-none [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden">
              <div class="flex gap-[10px] px-4 pb-[2px]">
                <div v-for="product in products" :key="product.name"
                  class="w-[220px] shrink-0 overflow-hidden border border-[#f1f5f9] rounded-[20px] bg-white shadow-[0_2px_12px_rgba(15,23,42,0.04)]">
                  <img class="w-full h-[110px] bg-[#f1f5f9]" :src="product.img" />
                  <div class="pt-[10px] px-3 pb-3">
                    <div v-if="product.saleTag"
                      class="inline-flex w-fit mb-1 px-[6px] py-[2px] rounded-[6px] text-[#f43f5e] bg-[#fef2f2] text-[9px] font-black">
                      {{ product.saleTag }}
                    </div>
                    <div
                      class="overflow-hidden text-ellipsis whitespace-nowrap text-[#1e293b] text-[13px] font-black leading-5">
                      {{ product.name }}
                    </div>
                    <div class="my-1 mt-1 mb-2 text-[#f43f5e] text-[20px] font-black leading-[26px]">
                      <span class="text-[12px]">¥</span>{{ product.price }}
                      <span v-if="product.original" class="ml-1 text-[#cbd5e1] text-[11px] font-bold line-through">
                        ¥{{ product.original }}
                      </span>
                    </div>
                    <button
                      class="w-full h-[34px] p-0 border-0 rounded-[12px] text-[#451a03] bg-[#fbbf24] text-[12px] font-black leading-[34px] [&::after]:border-0"
                      @click="goodsDetail(product)">
                      立即购买
                    </button>
                  </div>
                </div>
              </div>
            </div>

            <div class="pt-3 px-[18px] pb-2 text-[#94a3b8] text-[10px] font-black tracking-[0.6px] leading-4">
              继续追问
            </div>
            <div class="mx-4">
              <div v-for="question in faq" :key="question"
                class="inline-flex mr-[6px] mb-2 px-[13px] py-2 border border-[#e2e8f0] rounded-[20px] text-[#475569] bg-white text-[11.5px] font-extrabold leading-4"
                @click="sendReply(question)">
                {{ question }}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { emitter } from '@/utils/events'
import TopNavBar from "@/components/TopNavBar/index.vue";
import { SEND_MESSAGE_CONTENT_TEXT } from "@/constants/constant";

const products = [
  {
    name: "卧龙潭皮筏艇漂流",
    img: "https://one-feel-config-images-bucket.oss-cn-chengdu.aliyuncs.com/comp1.jpg",
    price: "50",
    commodityId: "1032119438058270721",
  },
  {
    name: "鸳鸯湖玻璃船",
    img: "https://one-feel-config-images-bucket.oss-cn-chengdu.aliyuncs.com/comp12.jpg",
    price: "50",
    saleTag: "漂完顺路",
    commodityId: "1032121733894451202",
  },
];

const faq = ["几岁的孩子能玩", "会不会全身湿透", "漂完去哪儿歇脚"];

const showToast = (title) => {
  showToast(title);
};

const goodsDetail = (item) => {
  uni.navigateTo({
    url: `/pages/goods/index?commodityId=${item.commodityId}`,
  });
};

const sendReply = (item) => {
  uni.navigateBack();
  emitter.emit(SEND_MESSAGE_CONTENT_TEXT, item);
};

</script>
