<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-[#7c3aed] bg-[#f5f3ff] border-[#ddd6fe]">
              路线指引
            </div>
          </div>

          <div class="pt-[18px] px-[18px] pb-1">
            <div class="mb-[14px] text-[#475569] text-[13px] font-medium leading-6">
              漂完卧龙潭，人多半是湿着、累着的。这时候去鸳鸯湖刚刚好。坐观光车顺路不绕，二十分钟左右就到。
            </div>

            <div class="mt-[18px] mb-2 text-[#1e293b] text-[13px] font-black leading-5">
              鸳鸯湖分上下湖，先选好玩哪个
            </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="flex gap-2 my-[6px] mb-4">
              <div class="flex-1 px-3 py-[11px] border border-[#e8edf2] rounded-[12px] bg-[#f8fafc]">
                <div
                  class="mb-2 pb-[7px] border-b border-dashed border-[#d8e0e8] text-[#1e293b] text-[12px] font-black leading-[18px]">
                  上湖 · 鸳湖
                </div>
                <div class="mb-[7px] text-[13px] font-black leading-[18px] text-[#2563eb]">玻璃船 ¥50</div>
                <div class="mb-[5px] text-[#64748b] text-[11px] font-semibold leading-[17px]">
                  透明船底，<span class="text-[#334155] font-black">适合拍照</span>
                </div>
                <div class="mb-[5px] text-[#64748b] text-[11px] font-semibold leading-[17px]">带老人孩子图轻松</div>
                <div class="mb-[5px] text-[#64748b] text-[11px] font-semibold leading-[17px]">
                  在 <span class="text-[#334155] font-black">鸳鸯湖上湖站</span> 下车
                </div>
              </div>

              <div class="flex-1 px-3 py-[11px] border border-[#e8edf2] rounded-[12px] bg-[#f8fafc]">
                <div
                  class="mb-2 pb-[7px] border-b border-dashed border-[#d8e0e8] text-[#1e293b] text-[12px] font-black leading-[18px]">
                  下湖 · 鸯湖
                </div>
                <div class="mb-[7px] text-[13px] font-black leading-[18px] text-[#059669]">铁皮船 ¥30</div>
                <div class="mb-[5px] text-[#64748b] text-[11px] font-semibold leading-[17px]">自己划，1-6 人一船</div>
                <div class="mb-[5px] text-[#64748b] text-[11px] font-semibold leading-[17px]">
                  <span class="text-[#334155] font-black">水上迷宫</span>穿林，更有乐趣
                </div>
                <div class="mb-[5px] text-[#64748b] text-[11px] font-semibold leading-[17px]">
                  在 <span class="text-[#334155] font-black">鸳鸯湖站</span> 下车，再走 4 分钟
                </div>
              </div>
            </div>

            <div class="mb-[14px] text-[#475569] text-[13px] font-medium leading-6">
              时间够的话两个湖都能玩，中间有观光车接驳。
            </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]">
              ① 旺季观光车要排队，上午人最多<br />
              ② 下湖枯水期水位低，水上迷宫游线可能关闭，购票前先问一句<br />
              ③ 雨天石板路偏滑，带孩子老人慢一点
            </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="mx-4 mb-3 px-4 py-[14px] border border-[rgba(15,23,42,0.07)] rounded-[16px] bg-white">
              <div class="mb-3 text-[#1e293b] text-[13px] font-black leading-5">卧龙潭 → 鸳鸯湖 · 看准上下湖</div>
              <div v-for="(step, index) in steps" :key="step.act" class="flex gap-[10px] mb-[10px] last:mb-0">
                <div
                  class="w-[18px] h-[18px] shrink-0 rounded-full bg-[#8b5cf6] text-white text-[10px] font-black leading-[18px] text-center">
                  {{ index + 1 }}
                </div>
                <div class="flex-1">
                  <div class="text-[#334155] text-[12px] font-extrabold leading-[18px]">{{ step.act }}</div>
                  <div class="mt-px text-[#94a3b8] text-[10.5px] font-bold leading-4">{{ step.meta }}</div>
                </div>
              </div>
            </div>

            <div class="mx-4 mb-3 px-4 py-[14px] border border-[rgba(15,23,42,0.07)] rounded-[16px] bg-white">
              <div class="mb-3 text-[#1e293b] text-[13px] font-black leading-5">沿途设施</div>
              <div v-for="facility in facilities" :key="facility.label"
                class="flex gap-2 py-[5px] text-[#475569] text-[11.5px] font-bold leading-[18px]">
                <div class="w-[52px] shrink-0 text-[#7c3aed] font-black">{{ facility.label }}</div>
                <div>{{ facility.text }}</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 TopNavBar from "@/components/TopNavBar/index.vue";
import { emitter } from '@/utils/events'
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) => {
  showToast(title);
};

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

</script>
