<template>
  <div class="long-text-detail-page flex flex-col">
    <TopNavBar title="漂流攻略" background="#E5EFE9" />

    <div class="long-text-detail-scroll" scroll-y>
      <div class="long-text-detail-content">
        <div class="long-text-detail-card">
          <div class="long-text-detail-header">
            <div class="long-text-detail-title">下水之前，先听小七唠两句</div>
            <div class="long-text-detail-badge is-amber">漂流攻略</div>
          </div>

          <div class="long-text-detail-body">
            <div class="detail-paragraph">
              卧龙潭的水，是那种一眼就让人想跳进去的绿。
              <text class="detail-highlight">皮筏艇漂流</text>
              全程约两公里，三段激流接连而下，水花会结结实实拍在脸上。这趟值得冲，但晕水的朋友得先掂量掂量。
            </div>

            <img class="detail-main-image"
              src="https://one-feel-config-images-bucket.oss-cn-chengdu.aliyuncs.com/comp1.jpg" mode="aspectFill" />

            <div class="detail-section-title">下水前，这几样别落下</div>
            <div class="detail-tip-block">
              ① 换洗衣服塞进防水袋，手机一定要封好<br />
              ② 穿凉鞋或防滑鞋，拖鞋是真的不让下<br />
              ③ 贵重东西先存好寄存柜，别揣身上
            </div>

            <div class="detail-paragraph">
              小七的私心建议：挑
              <span class="detail-highlight">上午九点到十一点</span>
              这一场。水量足、太阳还没毒，漂下来浑身舒坦，不会被晒得发昏。
            </div>

            <div class="detail-section-title">这些坑，提前绕开</div>
            <div class="detail-tip-block is-warn">
              雨后水量猛涨可能临时停漂，出发前先问一句开放状态；现场拖鞋不补租，光脚更危险。
            </div>
          </div>

          <div class="detail-action-zone">
            <div class="detail-action-label">相关票务</div>
            <div class="detail-product-scroll">
              <div class="detail-product-row">
                <div v-for="product in products" :key="product.name" class="detail-product-card">
                  <img class="detail-product-image" :src="product.img" mode="aspectFill" />
                  <div class="detail-product-body">
                    <div v-if="product.saleTag" class="detail-product-tag">
                      {{ product.saleTag }}
                    </div>
                    <div class="detail-product-name">{{ product.name }}</div>
                    <div class="detail-product-price">
                      <span class="detail-product-currency">¥</span>{{ product.price }}
                      <span v-if="product.original" class="detail-product-original">
                        ¥{{ product.original }}
                      </span>
                    </div>
                    <button class="detail-buy-button" @click="goodsDetail(product)">
                      立即购买
                    </button>
                  </div>
                </div>
              </div>
            </div>

            <div class="detail-action-label">继续追问</div>
            <div class="detail-faq-wrap">
              <div v-for="question in faq" :key="question" class="detail-faq-chip" @click="sendReply(question)">
                {{ question }}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
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) => {
  uni.showToast({
    title,
    icon: "none",
  });
};

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

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

</script>

<style scoped lang="scss">
@import "./styles/detail.scss";
</style>
