<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-violet">路线指引</div>
          </div>

          <div class="long-text-detail-body">
            <div class="detail-paragraph">
              漂完卧龙潭，人多半是湿着、累着的。这时候去鸳鸯湖刚刚好。坐观光车顺路不绕，二十分钟左右就到。
            </div>

            <div class="detail-section-title">鸳鸯湖分上下湖，先选好玩哪个</div>
            <div class="detail-paragraph">
              鸳鸯湖不是一个码头，它分成上下两个湖，玩的船不一样，
              <span class="detail-highlight">下车站点也不同</span>
              ，上车前先选好。
            </div>

            <div class="route-vs-wrap">
              <div class="route-vs-col">
                <div class="route-vs-head">上湖 · 鸳湖</div>
                <div class="route-vs-boat" style="color: #2563eb">玻璃船 ¥50</div>
                <div class="route-vs-row">
                  透明船底，<span class="route-vs-bold">适合拍照</span>
                </div>
                <div class="route-vs-row">带老人孩子图轻松</div>
                <div class="route-vs-row">
                  在 <span class="route-vs-bold">鸳鸯湖上湖站</span> 下车
                </div>
              </div>

              <div class="route-vs-col">
                <div class="route-vs-head">下湖 · 鸯湖</div>
                <div class="route-vs-boat" style="color: #059669">铁皮船 ¥30</div>
                <div class="route-vs-row">自己划，1-6 人一船</div>
                <div class="route-vs-row">
                  <span class="route-vs-bold">水上迷宫</span>穿林，更有乐趣
                </div>
                <div class="route-vs-row">
                  在 <span class="route-vs-bold">鸳鸯湖站</span> 下车，再走 4 分钟
                </div>
              </div>
            </div>

            <div class="detail-paragraph">时间够的话两个湖都能玩，中间有观光车接驳。</div>

            <div class="detail-section-title">路上留个心</div>
            <div class="detail-tip-block is-warn">
              ① 旺季观光车要排队，上午人最多<br />
              ② 下湖枯水期水位低，水上迷宫游线可能关闭，购票前先问一句<br />
              ③ 雨天石板路偏滑，带孩子老人慢一点
            </div>
          </div>

          <div class="detail-action-zone">
            <div class="detail-action-label">完整路线</div>
            <div class="route-step-card">
              <div class="route-step-title">卧龙潭 → 鸳鸯湖 · 看准上下湖</div>
              <div v-for="(step, index) in steps" :key="step.act" class="route-step">
                <div class="route-step-index">{{ index + 1 }}</div>
                <div class="route-step-main">
                  <div class="route-step-act">{{ step.act }}</div>
                  <div class="route-step-meta">{{ step.meta }}</div>
                </div>
              </div>
            </div>

            <div class="route-step-card">
              <div class="route-step-title">沿途设施</div>
              <div v-for="facility in facilities" :key="facility.label" class="facility-row">
                <div class="facility-label">{{ facility.label }}</div>
                <div>{{ facility.text }}</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 steps = [
  {
    act: "卧龙潭码头 → 卧龙潭站",
    meta: "步行约 5 分钟 · 认准观光车乘车点",
  },
  {
    act: "上车前先认准方向：去上湖 or 下湖",
    meta: "两个湖站点不同，排队通道也不同，别走错",
  },
  {
    act: "A·去上湖玩玻璃船 → 鸳鸯湖上湖站下车",
    meta: "车程约 6 分钟 · 玻璃船 ¥50/人",
  },
  {
    act: "B·去下湖玩铁皮船 → 鸳鸯湖站下车",
    meta: "车程约 12 分钟 · 下车再步行 4 分钟 · 铁皮船 ¥30/人",
  },
];

const facilities = [
  { label: "换洗", text: "卧龙潭站 · 洗手间 + 换洗寄存点" },
  { label: "休息", text: "鸳鸯湖上湖 · 美食驿站 + 休息亭" },
  { label: "补给", text: "鸳鸯湖站 · 美食驿站 + 充电宝租赁" },
  { label: "卫生间", text: "下湖卫生间在景点处，上湖卫生间在售票处前 150m" },
];

const faq = ["上湖下湖哪个好玩", "玻璃船和铁皮船怎么选", "两个湖都玩来得及吗"];

const showToast = (title) => {
  uni.showToast({
    title,
    icon: "none",
  });
};

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

</script>

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