<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-[#2563eb] bg-[#eff6ff] border-[#bfdbfe]">
              拍照攻略
            </div>
          </div>

          <div class="pt-[18px] px-[18px] pb-1">
            <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-[#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">
              时间上，挑
              <text class="px-[5px] py-[1px] rounded bg-[#ecfdf5] text-[#065f46] font-black">上午十点到下午两点</text>
              的顺光时段。阳光直直照进水里，那种绿才透得出来，阴天和傍晚，水色会闷，差很多。
            </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-[#065f46] bg-[#f0fdf4] text-[12px] font-extrabold leading-[22px] border-l-[#34d399]">
              手机开 0.5x 广角，水面和船一起进画；隔着玻璃拍记得擦干净船底；逆光时手动点一下水面降曝光。
            </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="relative mx-4 mb-3 overflow-hidden rounded-[16px] bg-[#f8fafc]" @click="predivPhoto">
              <img class="w-full h-[200px] bg-[#f1f5f9]" :src="photo.thumb" />
              <div
                class="absolute inset-x-0 bottom-0 px-[14px] pt-7 pb-3 bg-[linear-gradient(to_top,rgba(15,23,42,0.58),rgba(15,23,42,0))]">
                <div class="text-white text-[13px] font-black leading-[18px]">{{ photo.title }}</div>
                <div class="mt-[2px] text-[rgba(255,255,255,0.78)] text-[11px] font-bold leading-4">{{ photo.sub }}
                </div>
              </div>
              <div
                class="absolute top-[10px] right-[10px] w-[30px] h-[30px] rounded-full text-white bg-[rgba(15,23,42,0.38)] text-[18px] font-extrabold leading-[30px] text-center">
                ↗
              </div>
            </div>

            <div class="pt-3 px-[18px] pb-2 text-[#94a3b8] text-[10px] font-black tracking-[0.6px] leading-4">
              AIGC 合影
            </div>
            <div class="mx-4 mb-3 overflow-hidden border border-[#f1f5f9] rounded-[16px] bg-white">
              <div class="relative">
                <img class="w-full h-[160px] bg-[#f1f5f9]" :src="aigc.img" />
                <div
                  class="absolute top-[10px] left-[10px] px-[10px] py-1 rounded-[10px] text-white bg-[linear-gradient(135deg,#8b5cf6,#6366f1)] shadow-[0_2px_8px_rgba(99,102,241,0.35)] text-[10px] font-black">
                  AI 生成
                </div>
              </div>
              <div class="pt-3 px-[14px] pb-[14px]">
                <div class="text-[#1e293b] text-[15px] font-black leading-[22px]">{{ aigc.name }}</div>
                <div class="mt-[5px] mb-3 text-[#64748b] text-[11.5px] font-bold leading-[18px]">{{ aigc.desc }}</div>
                <button
                  class="w-full h-[42px] p-0 border-0 rounded-[14px] text-white bg-[linear-gradient(135deg,#8b5cf6,#6366f1)] text-[13px] font-black leading-[42px] [&::after]:border-0"
                  @click="jumpAigcClick">
                  生成我的合影
                </button>
              </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";
import { getAccessToken } from "@/constants/token";
// import { navigateTo } from "@/router";

const photo = {
  thumb: "https://one-feel-config-images-bucket.oss-cn-chengdu.aliyuncs.com/comp4.jpg",
  full: "https://one-feel-config-images-bucket.oss-cn-chengdu.aliyuncs.com/comp4.jpg",
  title: "玻璃船底机位",
  sub: "蹲低贴船底 · 上午顺光",
};

const aigc = {
  name: "鸳鸯湖玻璃船 AIGC 合影",
  img: "https://one-feel-config-images-bucket.oss-cn-chengdu.aliyuncs.com/20260526101238_396_809.png",
  desc: "上船拍一张，小七帮你一键生成专属合影，不用求人也不用自拍杆。",
};

const faq = ["几点光线最好", "船上能站起来拍吗", "穿什么颜色上镜"];

const predivPhoto = () => {
  uni.predivImage({
    current: photo.full,
    urls: [photo.full],
  });
};

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

const jumpAigcClick = () => {
  const token = getAccessToken();

  location.href = 'https://onefeel.brother7.cn/aigc/#/home?token=' + token;
};

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

</script>
