<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-blue">拍照攻略</div>
          </div>

          <div class="long-text-detail-body">
            <div class="detail-paragraph">
              鸳鸯湖的玻璃船，船底是透明的，水下世界看得清清楚楚。拍照的关键就一句话：
              <span class="detail-highlight">别只顾着拍人，把水下那抹通透的绿一起收进来。</span>
            </div>

            <div class="detail-section-title">三个不会错的机位</div>
            <div class="detail-tip-block">
              ① 蹲低，贴着透明船底拍，水草和光斑会铺满整个画面<br />
              ② 船头回拍人物，背景是大片湖光，人物站三分之一处<br />
              ③ 把手伸进光里，拍水面波纹和指尖，是很灵的细节
            </div>

            <div class="detail-paragraph">
              时间上，挑
              <text class="detail-highlight">上午十点到下午两点</text>
              的顺光时段。阳光直直照进水里，那种绿才透得出来，阴天和傍晚，水色会闷，差很多。
            </div>

            <div class="detail-section-title">手机党看这里</div>
            <div class="detail-tip-block">
              手机开 0.5x 广角，水面和船一起进画；隔着玻璃拍记得擦干净船底；逆光时手动点一下水面降曝光。
            </div>
          </div>

          <div class="detail-action-zone">
            <div class="detail-action-label">查看机位图</div>
            <div class="photo-card" @click="predivPhoto">
              <img class="photo-card-image" :src="photo.thumb" mode="aspectFill" />
              <div class="photo-card-caption">
                <div class="photo-card-title">{{ photo.title }}</div>
                <div class="photo-card-subtitle">{{ photo.sub }}</div>
              </div>
              <div class="photo-card-expand">↗</div>
            </div>

            <div class="detail-action-label">AIGC 合影</div>
            <div class="detail-action-card">
              <div class="aigc-cover">
                <img class="aigc-image" :src="aigc.img" mode="aspectFill" />
                <div class="aigc-badge">AI 生成</div>
              </div>
              <div class="aigc-body">
                <div class="aigc-title">{{ aigc.name }}</div>
                <div class="aigc-desc">{{ aigc.desc }}</div>
                <button class="detail-solid-button aigc-button" @click="jumpAigcClick">
                  生成我的合影
                </button>
              </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";
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) => {
  uni.showToast({
    title,
    icon: "none",
  });
};

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

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

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

</script>

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