<template>
  <view style="overflow-x: hidden; font-size: 0">
    <view id="headerBox">
      <Header v-if="!!userFaceInfo" :userFaceInfo="userFaceInfo" />
      <view class="report">
        <view class="report-title"> 美学诊断报告 </view>
        <view class="report-title-en"> FD Aesthetic Diagnosis Report </view>
      </view>
    </view>
    <view :class="classFixed" style="width: 100%">
      <Tabs
        :tabs="tabsList"
        :activeTab="activeTab"
        @update:activeTab="onTabChange"
      >
      </Tabs>
    </view>
    <view
      class="content"
      :style="{
        paddingTop: (classFixed === '' ? 0 : 60) + 'px',
        overflowY: 'hidden',
      }"
    >
      <view v-if="activeTab === 0">
        <view class="style-type">
          <!--          基因风格-->
          <genetic-style
            :gender="styleType.gender"
            :pic-list="[
              styleType.eye_img_url ?? '',
              styleType.triangular_area_img_url ?? '',
              styleType.full_face_img_url ?? '',
            ]"
            :styleType="styleType.type"
          />
          <!--          肤色-->
          <SkinColor :skinColor="styleType?.complexion" />

          <FacialColorLatitude
            :hue="styleType?.hue ?? 0"
            :chroma="styleType?.chroma ?? 0"
            :luminance="styleType?.luminance ?? 0"
          />
          <!--          轮廓类型-->
          <template v-if="customFigure">
            <SensoryTypes
              :type="styleType.straight_total_score_t"
              :aiDesc="customFigure?.sensory?.desc"
            />
            <!--          量感类型-->
            <TypeOfMass
              :type="styleType.total_sense_of_quantity_t"
              :ai-desc="customFigure?.mass?.desc"
            />
            <!--          动静类型-->
            <Movementtype
              :type="styleType.dynamic_static_t"
              :ai-desc="customFigure?.movement?.desc"
            />
            <!--          体型-->

            <BodyType
              :body-type="styleType?.somatotype_t"
              :gender="styleType?.gender"
            />
          </template>

          <!-- 搭配趋势 -->
          <CustomSwiper :items="items" />

          <!--          个人分格描述报告-->
          <StyleDiagnosticReport :html="customerStyle" />
          <BottomPic
            :style-type="styleType?.type"
            :psychological-style="styleType?.psychological_style"
            :gender="styleType.gender"
          />
        </view>
      </view>
      <view v-else-if="activeTab === 1">
        <view class="style-type">
          <view class="title">四季色彩定位</view>
          <view class="swiper-container">
            <view class="avatar-box">
              <view class="left-btn btn" @click="chageSwiperBtn(-1)">
                <img :src="pngImgUrl + 'leftRe.png'" alt="" srcset="" />
              </view>
              <view class="right-btn btn" @click="chageSwiperBtn(1)">
                <img :src="pngImgUrl + 'rightRe.png'" alt="" srcset="" />
              </view>
            </view>
            <swiper class="swiper" @change="chageSwiper" :current="current">
              <swiper-item
                v-for="(item, index) in newColorTypeList"
                :key="index"
              >
                <view class="swiper-item">
                  <view class="img-box">
                    <view
                      style="
                        width: 235px;
                        height: 235px;
                        position: absolute;
                        z-index: 99;
                      "
                    >
                      <img
                        style="width: 235px; height: 235px"
                        :src="item.avatarFrameImgUrl"
                        alt=""
                        srcset=""
                      />
                    </view>
                    <view class="avatar">
                      <img
                        :src="userFaceInfo?.avatar_img_url"
                        alt=""
                        srcset=""
                      />
                    </view>
                  </view>
                </view>
              </swiper-item>
            </swiper>
          </view>
          <view class="swiper-instructions">
            <view class="swiper-type-name">{{ colorTypeInfo.typeName }}型</view>
            <view class="swiper-type-name-en">{{ colorTypeInfo.enName }}</view>
            <view class="swiper-type-text">
              {{
                colorTypeInfo.typeName + "型" === userFaceInfo.sj_color_type
                  ? "最佳颜色"
                  : "不匹配"
              }}
            </view>
          </view>
          <view class="content-box">
            <view class="padding-top20">
              <rich-text :nodes="colorTypeText.characteristic"></rich-text>
            </view>
            <view class="padding-top20">
              <img
                class="image"
                :src="colorTypeText.colourDiscImgUrl"
                alt=""
                srcset=""
                @click="previewImage(colorTypeText.colourDiscImgUrl)"
              />
            </view>
            <view class="padding-top20">
              <rich-text :nodes="colorTypeText.advise"></rich-text>
            </view>

            <view class="padding-top20">
              <img
                class="image"
                :src="colorTypeText.adviseImgUrl"
                alt=""
                srcset=""
                @click="previewImage(colorTypeText.adviseImgUrl)"
              />
            </view>
            <view class="padding-top20">
              <rich-text :nodes="fashionNeutrals"></rich-text>
            </view>
            <view class="padding-top20">
              <img
                class="image"
                :src="colorTypeText.fashionNeutralsImgUrl"
                alt=""
                srcset=""
                @click="previewImage(colorTypeText.fashionNeutralsImgUrl)"
              />
            </view>

            <!-- 搭配趋势 -->
            <CustomSwiper :items="items" />
            <view class="padding-top20"
              >{{ colorTypeInfo.typeName }}人穿衣搭配全方案</view
            >
            <view class="padding-top20">
              <rich-text :nodes="colorTypeText.scheme"></rich-text>
            </view>
            <view v-if="userFaceInfo?.gender === '女'" style="padding: 0 20px">
              <!-- <view class="reference-title">
                <img
                  src="https://llyz.oss-cn-beijing.aliyuncs.com/diagnostic-report-h5/reference.png"
                  alt=""
                  srcset=""
                />
              </view> -->
              <view class="reference-img-box">
                <img
                  class="reference-img1"
                  :src="colorTypeInfo.useReferenceImgUrl"
                  alt=""
                  srcset=""
                />
                <!-- <img
                  class="reference-img2"
                  src="https://llyz.oss-cn-beijing.aliyuncs.com/diagnostic-report-h5/test2.png"
                  alt=""
                  srcset=""
                /> -->
              </view>
            </view>
            <view style="padding-left: 20px">
              注：人工智能大模型在计算中可能存在0.5%的误差。
            </view>
            <view class="reference-complate">
              ------ 色彩类型报告完 ------
            </view>
          </view>
        </view>
      </view>
      <!-- 依此类推 -->
      <view v-else-if="activeTab === 2">
        <view class="style-type">
          <view class="avatar-warp">
            <view
              :class="index === 1 ? 'avatar-main' : 'avatar-side'"
              v-for="(item, index) in avatarList"
              :key="index"
            >
              <img
                :src="item.url"
                alt=""
                srcset=""
                @click="previewImage(item.url)"
              />
            </view>
          </view>
          <view class="rich-text-content">
            <rich-text :nodes="praiseTextList[0]"></rich-text>
            <view
              class="face-img-box"
              :style="{
                height: userFaceInfo?.gender === '男' ? '150px' : '328px',
              }"
            >
              <img
                style="object-fit: cover"
                :src="faceImgUrl"
                alt=""
                srcset=""
              />
            </view>
            <rich-text :nodes="praiseTextList[1]"></rich-text>
            <view class="more-hairstyle">
              <view
                class=""
                style="
                  display: flex;
                  justify-content: center;
                  margin-bottom: 16px;
                "
              >
                <view>更多发型一键试戴</view>
              </view>
              <view class="scroll-box">
                <view
                  class=""
                  @click="toHairstyleRoom(item)"
                  v-for="(item, index) in hairStyleList"
                  :key="index"
                  style="height: 103px; margin-right: 8px"
                >
                  <img
                    style="width: 76px; height: 100%"
                    :src="item.fileUrl"
                    alt=""
                    srcset=""
                  />
                </view>
              </view>
            </view>
            <rich-text :nodes="praiseTextList[2]"></rich-text>
            <view style="margin-top: 56px">
              注：人工智能大模型在计算中可能存在0.5%的误差。
            </view>
            <view
              class="reference-complate"
              style="margin-bottom: 0; margin-top: 10px"
            >
              ------ 发型报告完 ------
            </view>
          </view>
        </view>
      </view>
      <view v-else-if="activeTab === 3">
        <view class="style-type" style="overflow-y: hidden">
          <view class="lucky-color-box" style="overflow-y: hidden">
            <view class="shengxiao">
              <img
                :src="
                  `https://llyz.oss-cn-beijing.aliyuncs.com/diagnostic-report-h5/chineseZodiac/` +
                  shegnxiaoImgUrl
                "
                alt=""
                srcset=""
                @click="
                  previewImage(
                    `https://llyz.oss-cn-beijing.aliyuncs.com/diagnostic-report-h5/chineseZodiac/` +
                      shegnxiaoImgUrl
                  )
                "
              />
            </view>
            <rich-text :nodes="luckyTxtList[0]"></rich-text>
            <view class="five-attribute-box">
              <view
                class="numblock"
                style="
                  background-color: rgba(193, 156, 45, 1);
                  top: 286px;
                  left: 40px;
                "
                >{{ numToChinese(shengxiaoNumList[0]) }}</view
              >
              <view
                class="numblock"
                style="
                  background-color: rgba(62, 166, 123, 1);
                  top: 32px;
                  left: 119px;
                "
                >{{ numToChinese(shengxiaoNumList[1]) }}</view
              >
              <view
                class="numblock"
                style="background-color: rgba(61, 146, 168, 1); top: 136px"
                >{{ numToChinese(shengxiaoNumList[2]) }}</view
              >
              <view
                class="numblock"
                style="
                  background-color: rgba(195, 52, 55, 1);
                  top: 150px;
                  right: 10px;
                "
                >{{ numToChinese(shengxiaoNumList[3]) }}</view
              >
              <view
                class="numblock"
                style="
                  background-color: rgba(253, 231, 73, 1);
                  top: 293px;
                  right: 70px;
                "
                >{{ numToChinese(shengxiaoNumList[4]) }}</view
              >
              <view class="five-attribute">
                <view class="avatorLogo">
                  <img :src="userFaceInfo?.avatar_img_url" alt="" srcset="" />
                </view>
                <view>
                  <img
                    src="https://llshop.zglvling.com/shop/img/png/h5/baseMap.png"
                    alt=""
                    srcset=""
                  />
                </view>
              </view>
            </view>

            <rich-text :nodes="luckyTxtList[1]"></rich-text>
            <view style="margin-top: 56px">
              注：人工智能大模型在计算中可能存在0.5%的误差。
            </view>
            <view class="reference-complate" style="margin-bottom: 0">
              ------ 幸运色分析完 ------
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
  <!-- 图片预览遮罩层 -->
  <view v-if="showPreview" class="preview-mask" @click="closePreview">
    <view class="preview-container" @click.stop>
      <image
        :src="currentPreviewImage"
        class="preview-image"
        mode="widthFix"
        @click="closePreview"
      ></image>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from "vue";
import Header from "./component/Header/index.vue";
import Tabs from "./component/Tabs/index.vue";
import {
  fashionNeutrals,
  colorTypeList,
  faceList,
  shengxiaoImgList,
} from "./database";
import {
  uploadFormData,
  downloadFile,
  numToChinese,
  getMaxElement,
  reorderByValue,
} from "../../utils/index";
import GeneticStyle from "./component/FirstStyleType/geneticStyle.vue";
import SkinColor from "./component/FirstStyleType/SkinColor.vue";
import BottomPic from "./component/FirstStyleType/BottomPic.vue";
import StyleDiagnosticReport from "./component/FirstStyleType/StyleDiagnosticReport.vue";
import BodyType from "./component/FirstStyleType/BodyType.vue";
import FacialColorLatitude from "./component/FirstStyleType/FacialColorLatitude.vue";
import CustomSwiper from "./component/CustomSwiper/CustomSwiper";
import SensoryTypes from "./component/FirstStyleType/SensoryTypes.vue";
import TypeOfMass from "./component/FirstStyleType/TypeOfMass.vue";
import Movementtype from "./component/FirstStyleType/Movementtype.vue";
import ReportApi from "../../sheep/api/report";
const {
  praiseTextApi,
  getStyleApi,
  exchangeHairHistoryByTaskId,
  wardrobeListApi,
  hairStyleListApi,
  addHairApi,
  getHairApi,
} = ReportApi;
// if (
//   typeof window !== "undefined" &&
//   /MicroMessenger/i.test(navigator.userAgent)
// ) {
const pngImgUrl = ref("https://llshop.zglvling.com/shop/img/png/h5/");
const showPreview = ref(false);
const currentPreviewImage = ref("");
let hairStyleList = ref([]);
const previewImage = (imageUrl) => {
  currentPreviewImage.value = imageUrl;
  showPreview.value = true;
};

const closePreview = (e) => {
  // 阻止事件冒泡
  e.stopPropagation();
  showPreview.value = false;
  currentPreviewImage.value = "";
};

const gifAddress = "https://llshop.zglvling.com/shop/img/gif/";
const routes = new URLSearchParams(window.location.search);
const classFixed = ref("");
const openId = routes.get("openId");
const enterType = routes.get("enterType"); // 1: 个人诊断报告 2: 发型试戴
// const occupation = routes.get("occupation"); // 职业
// const forWhom = routes.get("forWhom");

let scrollHeight = ref(0);
const activeTab = ref(0);
const tabsList = ref([
  { name: "风格类型", icon: "icon-style" },
  { name: "色彩类型", icon: "icon-color" },
  { name: "发型发色", icon: "icon-body" },
  { name: "幸运色", icon: "icon-face" },
]);
const newColorTypeList = ref([]);
let shegnxiaoImgUrl = ref("wuxingLoading.png");
let colorTypeInfo = ref([]);
const colorTypeText = ref({});
let current = ref(0);
const praiseTextList = ref([]);
const userFaceInfo = ref({ avatar_img_url: "" });
const faceImgUrl = ref("");
const shengxiao = ref();
const chageSwiper = (e) => {
  current.value = e.detail.current;
  colorTypeInfo.value = newColorTypeList.value[current.value];
};
const clothesList = ref([]);
const styleType = ref({});
const chageSwiperBtn = (x) => {
  if (x === -1 && current.value !== 0) {
    current.value--;
    return;
  }
  if (x === 1 && current.value < newColorTypeList.value.length - 1) {
    current.value++;
  }
};
const hairIds = ref([]);
const avatarList = ref([
  {
    id: 1,
    url: "https://cdn.meidaojia.com/aidigitalfield/digital_cloth/static/1720084773937.png",
  },
  {
    id: 2,
    url: "https://cdn.meidaojia.com/aidigitalfield/digital_cloth/static/1720084773937.png",
  },
  {
    id: 3,
    url: "https://cdn.meidaojia.com/aidigitalfield/digital_cloth/static/1720084773937.png",
  },
]);
let luckyTxtList = ref([]);
const shengxiaoNumList = ref([1, 2, 3, 4, 5]);
const formatText = (text) => {
  text = text.replace(/[\u0000-\u001F]/g, (c) => {
    if (c === "\n") return "\\n";
    if (c === "\r") return "\\r";
    if (c === "\t") return "\\t";
    return "";
  });
  return text;
};
const formatPraiseText = (text) => {
  text = formatText(text);
  text = JSON.parse(text).choices[0].message.content;
  text = text.replace(/<\/?strong>/g, "");

  text = text.replace(/<h1>/g, "<div>").replace(/<\/h1>/g, "</div>");

  text = text.replace(/<h2>/g, "<div>").replace(/<\/h2>/g, "</div>");

  text = text.replace(/<h3>/g, "<div>").replace(/<\/h3>/g, "</div>");
  let list = [];
  const split1 = text.split("二、核心风格基因解析");
  list.push(split1[0]);
  split1[1] = "<p>二、核心风格基因解析</p>" + split1[1];
  const split2 = split1[1].split("五、关键细节设计：刘海与发色");
  split2[1] = "<p>五、关键细节设计：刘海与发色</p>" + split2[1];
  list = list.concat(split2);
  return list;
};
const formatShengXiao = (text) => {
  text = formatText(text);
  // text = JSON.parse(text).choices[0].message.content;
  text = text.replace(/<h1>/g, "<div>").replace(/<\/h1>/g, "</div>");

  text = text.replace(/<h2>/g, "<div>").replace(/<\/h2>/g, "</div>");

  text = text.replace(/<h3>/g, "<div>").replace(/<\/h3>/g, "</div>");
  let list = [];
  const split1 = text.split("二、五行命理与易学幸运色推导");
  list.push(split1[0]);
  split1[1] = "<p>二、五行命理与易学幸运色推导</p>" + split1[1];
  list.push(split1[1]);
  return list;
};

const customFigure = ref();

const customerStyle = ref("");

const getPraiseText = (callWord, type) => {
  let params = {
    // model: "doubao-seed-1-6-250615",
    model: "doubao-seed-1-6-flash-250715",
    openId: openId,
    text: "",
    type: enterType,
    tabType: "",
  };
  if (type === 1) {
    // params.model = "doubao-1-5-thinking-vision-pro-250428";
    // params.model = "doubao-seed-1-6-250615";
    // params.model = "doubao-seed-1-6-flash-250715";
    params.model = "doubao-1-5-thinking-pro-m-250428";
  }

  let customKey = `客户特征：
                性别：${styleType?.value?.gender}
                出生年月日：${styleType?.value?.checkTime}
                年龄：${styleType?.value?.age}
                身高：${styleType?.value?.stature}
                体重：${styleType?.value?.bodyWeight}
                量感类型：${styleType?.value?.total_sense_of_quantity_t}
                轮廓类型：${styleType?.value?.straight_total_score_t}
                动静类型：${styleType?.value?.dynamic_static_t}
                基因风格类型：${styleType?.value?.type}
                心理风格：${styleType?.value?.psychological_style}
                喜欢配色：${styleType?.value?.color}
                心理量感类型：${styleType?.value?.ling_of_quantity}
                心理曲直类型：${styleType?.value?.right_and_wrong}
                心理动静类型：${styleType?.value?.dynamic_and_static}
                体型分类：${styleType?.value?.somatotype}
                存在的问题：${styleType?.value?.question}
                修饰部位：${styleType?.value?.purpose}
                场合需求：${styleType?.value?.occasion_dressing}
                三庭五眼特征：${styleType?.value?.three_courts_five_eyes}
                亮度：${styleType?.value?.luminance}
                嘴型：${styleType?.value?.mouth_shape}
                对比度：${styleType?.value?.contrast}
                法令纹：${styleType?.value?.nasolabial_folds}
                直曲总分：${styleType?.value?.straight_total_score}
                眉形：${styleType?.value?.camber}
                眼型：${styleType?.value?.ocular_form}
                瞳色：${styleType?.value?.eye_color}
                瞳距：${styleType?.value?.interpupillary_distance}
                肤色：${styleType?.value?.complexion}
                脖长：${styleType?.value?.neck_length}
                脸型：${styleType?.value?.feature}
                色度：${styleType?.value?.chroma}
                色相：${styleType?.value?.hue}
                量感总分：${styleType?.value?.total_sense_of_quantity}
                面部年龄：${styleType?.value?.facial_age}
                面部立体度：${styleType?.value?.Facial_three_dimensionality}
                面部颜色对比度：${styleType?.value?.face_color_contrast}
                鼻型：${styleType?.value?.nose_type}
                鼻子立体度：${styleType?.value?.nose_stereo_degree}
                肤色：${styleType?.value?.complexion}
                亮度：${styleType?.value?.luminance}
                四季色彩季型：${styleType?.value?.sj_color_type}
                职业: ${styleType?.value?.work}
                最在意谁的意见：${styleType?.value?.attention}

              强调：
                1、客户的性别是${styleType?.value?.gender}，千万要以${styleType?.value?.gender}性的角度去产出数据，切记，这点十分重要
                2、客户为男性的时候，严禁出现裙装穿搭建议

  `;
  // if (
  //   openId === "oZRaI4ojHLTcwuQ6yix3QV5sSe0c" ||
  //   openId === "oZRaI4tfDP-HgQmyjN7GOqyv4gB0"
  // ) {
  // customKey += `职业: ${styleType?.value?.work}, 最在意谁的意见：${styleType?.value?.attention},`;
  // }
  // customKey += `强调：
  //               1、客户的性别是${styleType?.value?.gender}，千万要以${styleType?.value?.gender}性的角度去产出数据，切记，这点十分重要
  //               2、客户为男性的时候，严禁出现裙装穿搭建议`;
  if (callWord === "one") {
    params.tabType = "hair";
    params.text = `你是个人形象美学顾问，请输出详细的发型风格诊断报告 。

    ${customKey}

    特别注意： 1：你要根据客户特征给出详细的风格诊断报告 2：以v-html格式输出，只能以div、p、ul、li、ol、span等标签、 3：你要返回给我的结果只能是字符串格式，不能是其它格式 4：除了我要求的格式内容外，不要有额外多余的任何不相干的文字
    风格诊断报告格式如下：
    一、核心风格定位总览
    二、核心风格基因解析
    三、脸型与头型适配优化
    四、发型长度与轮廓推荐
    五、关键细节设计：刘海与发色
    六、发型与整体造型适配建议
    七、避雷指南：需避免的发型雷区
    八、护理与造型小贴士
    九、总结：核心发型逻辑与风格统一
    正确格式案例如下：
    {
        <div>
    <div>一、核心风格定位总览<p>结合您的面部特征（直线型为主，3:2 直曲比）、中大量感（4:3 大量感得分）、方形脸 + 中高立体度五官，以及 25-35
        岁的成熟活力需求，核心发型风格为「直线型力量感为主，融合结构化层次设计」，关键词：大气、利落、现代感、沉稳干练。发型需突出面部立体优势，强化纵向线条延伸感，通过轮廓设计平衡整体比例，同时利用顶部蓬松度与垂坠感提升视觉高度，适配冷冬型配色偏好。
      </p>
      <div>二、核心风格基因解析<div>1. 直曲属性（3:2 直＞曲）<ul>
            <li>适配线条：优先直线条剪裁（直发、几何层次短发、低弧度波浪），避免小卷、羊毛卷等强曲线元素，防止与方形脸、单眼皮的直线型特征冲突。</li>
            <li>细节处理：发尾做锐利直角或轻微外翘（直线型小弧度）增强力量感；长卷发控制直径≥5cm 大波浪，卷度集中发中下部，避免头皮膨胀感。</li>
          </ul>
          <div>2. 量感属性（中大量感，总分 1）<ul>
              <li>重量分布：整体「上厚下薄」，顶部增加 2-3cm 蓬松度（纵向拉高），发尾轻薄处理（减轻视觉重量），平衡中大量感大气特质，避免过轻（超短发）或过重（厚重齐刘海）。</li>
              <li>长度建议：中长发（肩下 15-20cm）或中短发（肩以上 5-10cm）最优，过短显头重脚轻，过长（腰际以下）压身高比例。</li>
            </ul>
            <div>3. 面部立体度（6 分，中高立体度）<ul>
                <li>轮廓设计：避免贴头皮「扁平感」，保留头顶至耳上 2-3cm 蓬松度，通过层次剪裁拉长脸型，弱化方形下颌；中高鼻梁优势用侧分刘海、露额发型强化。</li>
              </ul>
              <div>三、脸型与头型适配优化<div>1. 方形脸（硬朗轮廓，需柔化处理）<ul>
                    <li>避坑点：避免一刀切齐发尾（强化方形轮廓）、超短发（突出下颌角）、厚重齐刘海（缩短脸型显头大）。</li>
                    <li>加分项：侧分（4:6 分缝）、高层次剪裁（减轻面部宽度）、柔和发尾（外翘 / 内扣），柔化方下颌，配合适中脖长拉长脸型比例。</li>
                  </ul>
                  <div>2. 身材协调（显高需求适配）<ul>
                      <li>纵向线条强化：顶部蓬松度 2-3cm 打造「高颅顶」，纵向延伸视觉比例，适配 180cm 身高；避免贴头皮或扁平顶部设计。</li>
                      <li>视觉重心转移：扎发时（高马尾 / 丸子头），发顶蓬松度与头顶高度对齐，强化「上提」效果，转移小腿注意力。</li>
                    </ul>
                    <div>四、发型长度与轮廓推荐<div>1. 首选：中长发（肩下 15-20cm，结构化层次）<ul>
                          <li>核心设计：<ul>
                              <li>层次：顶部至耳上 2-3cm 高层次（增加蓬松），中部至发尾 1-2cm 低层次（保持垂坠），避免贴脸；</li>
                              <li>发尾：轻微外翘 / 不规则剪裁（打破硬朗感），拒绝死板齐尾；</li>
                              <li>轮廓：「倒三角」型（顶蓬尾收），纵向延伸比例。</li>
                            </ul>
                          </li>
                          <li>适配场景：通勤（低马尾 + 发尾外翘）、休闲（直发披散 + 侧分）、正式（中高盘发 + 顶部蓬松）。</li>
                        </ul>
                        <div>2. 次选：中短发（肩以上 5-10cm，几何剪裁）<ul>
                            <li>核心设计：<ul>
                                <li>长度：齐肩 / 肩以上 5-10cm，露颈部线条显高；</li>
                                <li>层次：两侧剪至下颌线以下（遮盖方下颌），「A」型轮廓修饰面部宽度；</li>
                                <li>扎发变体：半扎高马尾（顶蓬尾散），强化纵向线条转移注意力。</li>
                              </ul>
                            </li>
                          </ul>
                          <div>3. 慎选：超短发（下巴以上）/ 长直发（腰际以下）<ul>
                              <li>超短发暴露颈部，与中大量感不匹配显头重；长直发无层次显拖沓，增加下半身视觉重量，与显高需求冲突。</li>
                            </ul>
                            <div>五、关键细节设计：刘海与发色<div>1. 刘海：拒绝厚重，突出纵向线条<ul>
                                  <li>推荐刘海：<ul>
                                      <li>侧分长刘海（4:6 分缝）：长度至颧骨下方，直线剪裁露额头 2/3，拉长脸型，适配单眼皮显利落；</li>
                                      <li>法式刘海：窄宽度（眼尾内侧起），轻薄修饰发际线，不遮眉眼，符合冷冬清爽感。</li>
                                    </ul>
                                  </li>
                                  <li>避雷刘海：齐刘海（缩短脸型显方）、眉上短刘海（与方脸冲突显突兀）。</li>
                                </ul>
                                <div>2. 发色：冷冬型 + 黄二白适配，高对比显白<ul>
                                    <li>主色调推荐：<ul>
                                        <li>冷调深色系：雾感黑茶色、冷棕黑、蓝黑色（显白提气色，与深瞳对比适中，符合冷冬配色）；</li>
                                        <li>挑染点缀：发尾 1-2 缕冷灰色 / 雾蓝色（≤10% 面积），增加层次提升现代感。</li>
                                      </ul>
                                    </li>
                                    <li>避雷发色：暖调浅色系（金棕 / 橙红显黄）、全头漂浅（奶奶灰 / 银白伤发质，与中大量感气质不符显轻浮）。</li>
                                  </ul>
                                  <div>六、发型与整体造型适配建议<div>1. 穿搭风格呼应<ul>
                                        <li>通勤风（衬衫 / 西装）：高马尾（顶蓬尾齐，高度与眉峰平）或侧分直发，露耳后线条与利落穿搭统一；</li>
                                        <li>休闲风（T 恤 / 牛仔裤）：半扎高马尾 + 碎发（发尾外翘）或鲨鱼夹高盘发（留龙须发），增加随性；</li>
                                        <li>正式风（西装 / 礼服）：中高盘发（顶蓬固定）或低马尾（尾端层次），简约大气。</li>
                                      </ul>
                                      <div>2. 显高优化技巧<ul>
                                          <li>顶部蓬松度≥2cm，纵向延伸视觉高度；扎发马尾高度不低于耳垂；</li>
                                          <li>搭配及膝 / 过膝下装，配合纵向发型线条，整体拉长比例转移小腿注意力。</li>
                                        </ul>
                                        <div>七、避雷指南：需避免的发型雷区<ul>
                                            <li>贴头皮发型：顶蓬＜2cm 显脸大头扁，与 180cm 身高比例失衡；</li>
                                            <li>厚重齐发尾：强化方形下颌线条，显脸宽；</li>
                                            <li>小卷 / 羊毛卷：强曲线与直线型面部冲突，增加横向宽度显头大；</li>
                                            <li>过短刘海：眉上短刘海与单眼皮、方脸风格冲突，显突兀。</li>
                                          </ul>
                                          <div>八、护理与造型小贴士<ul>
                                              <li>日常护理：黄二白肤色易显发质枯黄，每周 1 次深层护发（发膜 + 热毛巾敷 5 分钟）；吹发用圆梳向内扣发尾，维持直线轮廓；</li>
                                              <li>快速造型：直板夹 160℃夹直刘海 / 发尾（3 分钟搞定），顶蓬用蓬松喷雾（距发根 10cm 喷洒）；</li>
                                              <li>季节适配：冬季用滋润洗发水 + 护发精油防干燥，夏季选控油洗发水避免塌软。</li>
                                            </ul>
                                            <div>九、总结：核心发型逻辑与风格统一<p>核心逻辑：以直线条力量感为基底，通过「顶部蓬松 + 结构化层次 +
                                                纵向延伸」三大设计点，平衡方形脸硬朗感与中大量感气质，同步实现显高需求。关键细节（侧分长刘海、冷调深色系）强化冷冬型风格统一，整体造型需保持「利落轮廓
                                                + 适度蓬松 + 垂坠质感」，与穿搭、场景协同最大化个人魅力。</p>
  </div>
    }
    `;
  }
  if (callWord === "three") {
    params.tabType = "shengxiao";
    // if (
    //   openId === "oZRaI4ojHLTcwuQ6yix3QV5sSe0c" ||
    //   openId === "oZRaI4tfDP-HgQmyjN7GOqyv4gB0"
    // ) {
    params.text = `用户生日是阳历${userFaceInfo?.value?.checkTime}，性别：${userFaceInfo?.value?.gender}，职业: ${styleType?.value?.work}, 最在意谁的意见：${styleType?.value?.attention},计算这个生日对应的年柱、月柱、日柱的五行属性个数，不计算时柱，不计算藏干。以v-html格式生成,只能以div、p、ul、li、ol、span标签,输出适合颜色报告，需要提到五行的个数。 报告结构严格按照以下内容：一.五行主属性分析（需要提到五行的个数） 二、五行命理与易学幸运色推导 三、场景化搭配建议 四、动态调整建议"，最后以字符串格式返回。返回一个名称为arr的数组，第一个参数“属相”，用用户年龄推算，参数有鼠、牛、虎、兔、龙、蛇、马、羊、猴、鸡、狗、猪），第2到第6个数为用“年柱”， “月柱”，“日柱”，“年柱属性”， “月柱属性”，“日柱属性”，等属性推算出的五行个数，最后以数组的形式返回[“属相”， ”金属性个数“，木属性个数“，”水属性个数”，“火属性个数”，”土属性个数“]的形式返回
      特别注意：
      生成一个如下结构的对象
      content:{
        text: 颜色报告内容,
        arr: 属相数组，以["属相",金的个数, 木的个数, 水的个数, 火的个数, 土的个数]的格式返回
      }
    `;
    // } else {
    //   params.text = `用户生日是阳历${userFaceInfo?.value?.checkTime}，性别：${userFaceInfo?.value?.gender}，计算这个生日对应的年柱、月柱、日柱的五行属性个数，不计算时柱，不计算藏干。以v-html格式生成,只能以div、p、ul、li、ol、span标签,输出适合颜色报告，需要提到五行的个数。 报告结构严格按照以下内容：一.五行主属性分析（需要提到五行的个数） 二、五行命理与易学幸运色推导 三、场景化搭配建议 四、动态调整建议"，最后以字符串格式返回。返回一个名称为arr的数组，第一个参数“属相”，用用户年龄推算，参数有鼠、牛、虎、兔、龙、蛇、马、羊、猴、鸡、狗、猪），第2到第6个数为用“年柱”， “月柱”，“日柱”，“年柱属性”， “月柱属性”，“日柱属性”，等属性推算出的五行个数，最后以数组的形式返回[“属相”， ”金属性个数“，木属性个数“，”水属性个数”，“火属性个数”，”土属性个数“]的形式返回
    //   特别注意：
    //   生成一个如下结构的对象
    //   content:{
    //     text: 颜色报告内容,
    //     arr: 属相数组，以["属相",金的个数, 木的个数, 水的个数, 火的个数, 土的个数]的格式返回
    //   }
    // `;
    // }

    params.system_prompt = `五行八卦中年柱、月柱、日柱的计算规则详解

在五行八卦的命理学体系中，年柱、月柱、日柱与每个人息息相关，它们共同构成了八字，被认为能够揭示一个人的命运轨迹和性格特点。下面，让我们一起来深入了解它们的计算规则。

一、年柱的计算规则

年柱代表出生年份的天干地支组合，它是八字的第一柱，确定了一个人出生年份的基本信息，在命理学中被视为根基，对人生运势有着深远影响。

	•	天干的确定：

	◦	尾数对应法：最为简便的方法是根据公历年的尾数来确定。具体对应关系如下：尾数为4，对应天干甲；尾数为5，对应天干乙；尾数为6，对应天干丙；尾数为7，对应天干丁；尾数为8，对应天干戊；尾数为9，对应天干己；尾数为0，对应天干庚；尾数为1，对应天干辛；尾数为2，对应天干壬；尾数为3，对应天干癸 。例如，2025年，尾数是5，所以年干为乙。

	◦	公式计算法：公式为（公历年数 - 3）÷10的余数（整除时按余数为0计），对应天干顺序。如2025年，（2025 - 3）÷10 = 202余2，对应天干乙。

	•	地支的确定：

	◦	生肖对应法：可依据生肖来确定地支。生肖与地支的对应关系为：子鼠、丑牛、寅虎、卯兔、辰龙、巳蛇、午马、未羊、申猴、酉鸡、戌狗、亥猪。比如，2025年是蛇年，对应的地支就是巳。

	◦	公式计算法：公式为（公历年数 - 3）÷12的余数（整除时按余数为0计），对应地支顺序。对于2025年，（2025 - 3）÷12 = 168余6，对应地支巳。
需要特别注意的是，年柱的分界是以每年的立春为界线，立春前出生的人，年柱按上一年计算；立春后出生的人，年柱按下一年计算 。

二、月柱的计算规则

月柱由月干和月支组成，代表出生月份的天干地支组合，它反映了一个人在成长过程中的阶段性运势和内在特质，在命理学中被视为成长和发展的重要标志。

	•	月支的确定：月支是固定不变的，以二十四节气为划分依据。从立春开始，正月为寅月（立春当天到惊蛰前一天）；二月为卯月（惊蛰当天到清明前一天）；三月为辰月（清明当天到立夏前一天）；四月为巳月（立夏当天到芒种前一天）；五月为午月（芒种当天到小暑前一天）；六月为未月（小暑当天到立秋前一天）；七月为申月（立秋当天到白露前一天）；八月为酉月（白露当天到寒露前一天）；九月为戌月（寒露当天到立冬前一天）；十月为亥月（立冬当天到大雪前一天）；十一月为子月（大雪当天到小寒前一天）；十二月为丑月（小寒当天到立春前一天）。

	•	月干的确定：需要根据年干来推算，可借助口诀“甲己之年丙作首，乙庚之年戊为头，丙辛之岁寻庚上，丁壬壬寅顺水流，若问戊癸何处起，甲寅之上好追求” 。意思是，当年干为甲或己时，正月月干为丙；年干为乙或庚时，正月月干为戊；年干为丙或辛时，正月月干为庚；年干为丁或壬时，正月月干为壬；年干为戊或癸时，正月月干为甲。其余月份天干依次顺推。例如，2025年是乙巳年，年干为乙，根据口诀“乙庚之年戊为头”，正月月干为戊，月支为寅，所以2025年正月月柱为戊寅，二月为己卯，三月为庚辰，依此类推。

三、日柱的计算规则

日柱代表出生日的天干地支组合，是八字的核心部分，被认为能体现一个人的核心性格和命运的关键走向，在命理学中占据着举足轻重的地位。日柱的计算方法较为复杂，以下介绍一种常用的公历计算法：

	•	计算步骤：

	◦	先计算（公历年数 - 1）×5 + （公历年数 - 1）÷4 + 当年日期在当年的天数序号，得到一个总和（这里的除法只取商数，余数忽略不计）。其中，当年日期在当年的天数序号，即从1月1日到出生日期的天数，例如，3月15日出生，当年是平年，1月31天，2月28天，3月15天，天数序号就是31 + 28 + 15 = 74 。

	◦	将总和除以60，得到一个余数。

	◦	这个余数就是出生日期的天干地支序数。其中，余数除以10的余数为天干序数（整除时按余数为0计，对应天干癸），余数除以12的余数为地支序数（整除时按余数为0计，对应地支亥）。

	•	举例说明：以2025年5月20日为例，计算过程如下：

	◦	（2025 - 1）×5 + （2025 - 1）÷4 + （31 + 28 + 31 + 30 + 20）
= 2024×5 + 2024÷4 + 140
= 10120 + 506 + 140
= 10766

	◦	10766÷60 = 179余26

	◦	26÷10 = 2余6，对应天干己；26÷12 = 2余2，对应地支丑 。所以2025年5月20日的日柱为己丑。

	•	注意闰年：需要注意的是，如果出生年份是闰年，2月有29天，在计算天数序号时要相应调整。闰年的判断方法是：能被4整除但不能被100整除的年份为闰年，此外能被400整除的年份也是闰年 。例如，2024年是闰年，计算当年天数序号时，2月按29天计算。

年柱、月柱和日柱的计算规则虽然复杂，但它们蕴含着古人对时间和命运的深刻理解，是五行八卦命理学的重要基础 。`;
  }

  if (callWord === "four") {
    params.tabType = "stature";
    params.text = `你是个人形象美学顾问，你擅长通过客户身材特征分析出用户的身材类型
                    具体的包裹：轮廓类型、量感类型、动静类型、体型类型

                    ${customKey}

                    要求：
                    1：你只能分析出的轮廓类型只能是：${styleType.value.straight_total_score_t}，别的类型一概不允许
                    2：你只能分析出的量感类型只能是：${styleType.value.total_sense_of_quantity_t}，别的类型一概不允许
                    3：你只能分析出的动静类型只能是：${styleType.value.dynamic_static_t}，别的类型一概不允许

                    特别注意：
                    你要根据客户特征给出详细的分析结果和分析结果详情，每一中类型的分析结果详情要在200字以内
                    你要返回给我的结果只能是json格式，不能是其它格式
                    除了我要求的格式内容外，不要有额外多余的任何不相干的文字

                    正确格式案例如下：
                        {
                          sensory:{
                            value: '曲线型',
                            desc: '面部五官线条（眉眼、嘴唇等）没有特别强烈的曲线感或直线硬朗感，面部轮廓、发型线条以及穿着的服装（V 领、简洁款式 ）也呈现出既非极端曲线柔和，也非极端直线利落的状态，是较为平衡的直曲适中风格 。'
                          },
                          mass: {
                            value: '中量感',
                            desc: '从面部看，五官分布、大小以及整体比例较为均衡，没有特别小巧精致（小量感）或夸张大气（大量感）的特征，身材穿着也呈现出适中的视觉分量，所以是中量感'
                          },
                          movement: {
                            value: '静态型',
                            desc: '面部神态平和，发型简洁规整，服装款式简约、颜色沉稳，整体传递出安静、内敛的气质，没有明显的活泼、动感元素，因此判定为静态型 。'
                          }
                        }
                      `;
  }

  if (callWord === "five") {
    params.tabType = "style";
    params.text = `你是个人形象美学顾问，你擅长通过客户身材特征分析出用户的风格诊断报告。
                  ${customKey}

                  特别注意：
                  1：你要根据客户特征给出详细的风格诊断报告
                  2：以v-html格式输出，只能以div、p、ul、li、ol、span、
                  3：你要返回给我的结果只能是json格式，不能是其它格式
                  4：除了我要求的格式内容外，不要有额外多余的任何不相干的文字

                  风格诊断报告格式如下：
                  一：个人风格合心诊断
                    1：个人风格密码解析
                    2：主导心理风格和基因风格关系
                  二、 身材分析与穿搭指南
                  三、 配饰规划
                  四、 总结与建议
                    1：最重要的强化优势
                    2：规避要点

                  正确格式案例如下：
                  {
                    html: '<div><p><span style="font-weight:bold">一、 个人风格核心诊断</span></p>
    <p><span style="font-weight:bold">1. 个人风格密码解析</span></p>
    <p>基于您的面部特征与量感直曲分析，个人风格密码为「中大量感+偏直风格+适中对比度」：</p>
    <ul>
        <li><span style="font-weight:bold">量感维度</span>：大量感得分6、小量感得分4，量感总分2，属于中大量感，面部立体度7（高立体度）、直鼻高立体度，整体呈现舒展大气的视觉张力，避免过度小巧精致的服饰元素
        </li>
        <li><span style="font-weight:bold">直曲维度</span>：直得分7、曲得分3，直曲总分4，偏直风格显著，平直眉、细长单眼皮、直鼻等线条利落，适合简约、几何、结构化的服饰剪裁，减少柔媚蕾丝、荷叶边等过度曲线元素
        </li>
        <li><span style="font-weight:bold">对比度</span>：适中对比度，黄一白肤色搭配深瞳色，色彩搭配可兼顾清爽和谐与适度层次，避免高饱和撞色或过于寡淡的同色系
        </li>
    </ul>
    <p><span style="font-weight:bold">2. 主导心理风格和基因风格关系</span></p>
    <p>
        您的基因风格（外在特征决定）为「利落直感型」，心理风格（偏好夏季季型配色）偏向「清新活力型」，二者可形成「清爽利落」的融合风格——以夏季季型的柔和色调（浅蓝、薄荷绿、粉紫、奶白等）为基础，结合偏直的简约剪裁，既符合基因风格的线条需求，又满足心理偏好的清爽氛围。</p>
    <p><span style="font-weight:bold">二、 身材分析与穿搭指南</span></p>
    <p><span style="font-weight:bold">身材特征</span>：A型身材（上窄下宽），身高160cm、体重53kg，腰部粗、腿粗，核心需求为「勾勒腰线+修饰下半身」
    </p>
    <p><span style="font-weight:bold">1. 上衣选择</span></p>
    <ul>
        <li><span style="font-weight:bold">版型</span>：选「上宽下收」设计，如微泡泡袖、荷叶边袖口（增加上半身量感平衡下半身），腰部做收腰剪裁（如系带、褶皱收腰），直接勾勒腰线
        </li>
        <li><span style="font-weight:bold">领型</span>：V领、方领、一字领，拉长颈部线条同时转移视觉焦点至锁骨/面部，分散腰部注意力
        </li>
        <li><span style="font-weight:bold">图案/色彩</span>：夏季季型配色优先，上半身可尝试小碎花、条纹等图案（增加上半身丰富度），色彩选浅蓝、粉紫等亮色（提亮上身，平衡下半身重量感）
        </li>
    </ul>
    <p><span style="font-weight:bold">2. 下装选择</span></p>
    <ul>
        <li><span style="font-weight:bold">裤装</span>：高腰阔腿裤（垂感面料，长度及脚踝）、直筒裤（避免紧身牛仔裤），裤型从腰部向下自然散开，修饰腿粗，腰部搭配细腰带强调腰线
        </li>
        <li><span style="font-weight:bold">裙装</span>：高腰A字裙（长度过膝5-10cm）、伞裙，裙摆自然展开遮挡臀部及大腿赘肉，腰部做掐褶或同色系腰带收腰
        </li>
        <li><span style="font-weight:bold">色彩</span>：选夏季季型中的低饱和深色（如灰蓝、豆沙紫）或同色系顺色（上下装同色调不同明度），视觉收缩下半身
        </li>
    </ul>
    <p><span style="font-weight:bold">3. 连衣裙推荐</span></p>
    <ul>
        <li>
            首选「收腰A字连衣裙」，腰部收紧+裙摆散开，直接解决腰线与腿粗问题，领口选V领/方领，面料选轻薄雪纺、棉麻（符合夏季清爽感）
        </li>
        <li>避免：紧身包臀裙、无腰线直筒裙（暴露腰部赘肉，显下半身臃肿）</li>
    </ul>
    <p><span style="font-weight:bold">三、 配饰规划</span></p>
    <p><span style="font-weight:bold">1. 腰带</span>：核心配饰！选细款金属腰带（银色/金色，呼应夏季清爽）或同色系皮质腰带，系于高腰位置（肚脐上2cm），明确分割腰线，材质避免过宽过厚（否则显腰粗）
    </p>
    <p><span style="font-weight:bold">2. 耳饰</span>：瓜子脸+细长单眼皮，适合「几何短款耳坠」（如方形、水滴形，长度3-5cm）或简约耳钉，修饰脸型同时不抢面部焦点；避免夸张大耳环（增加下半身视觉重量）
    </p>
    <p><span style="font-weight:bold">3. 项链</span>：人中偏短+薄唇，选「Y型项链」或「锁骨链」（长度40-45cm，吊坠小巧精致），延长面部纵向线条，避免短款choker（靠近唇部显局促）
    </p>
    <p><span style="font-weight:bold">4. 手链/手表</span>：简约细链条手链或方形表盘手表（金属表带），呼应偏直风格，数量控制1-2件，避免繁复堆砌
    </p>
    <p><span style="font-weight:bold">五、 总结与建议</span></p>
    <p><span style="font-weight:bold">1. 最重要的强化优势和规避</span></p>
    <ul>
        <li><span style="font-weight:bold">强化优势</span>：① 利用夏季季型配色（浅蓝、薄荷绿等）提亮黄一白肤色，凸显清爽气质；②
            突出高立体度面部（直鼻、瓜子脸），通过V领/方领服饰+简约耳饰转移视觉焦点；③ 用细腰带强制勾勒腰线，强化身材比例
        </li>
        <li><span style="font-weight:bold">规避要点</span>：① 避免下半身紧身/膨胀设计（如紧身裤、蓬蓬裙），选A字/阔腿版型修饰腿粗；②
            腰部避免无剪裁、松紧带设计，用收腰剪裁+腰带遮挡赘肉；③ 配饰忌过多过杂，保持「少而精」，符合偏直风格的利落感
        </li>
    </ul>
</div>'
                  }



    `;
  }

  praiseTextApi(params).then((res) => {
    // tabType
    if (callWord === "one") {
      // console.log("数据是什么1", res.data);
      praiseTextList.value = formatPraiseText(res.data);
    } else if (callWord === "two") {
      return;
      luckyTxtList.value = formatShengXiao(res.data);
    } else if (callWord === "three") {
      let obj = JSON.parse(res.data);
      // let obj = {
      //   choices: [
      //     {
      //       finish_reason: "stop",
      //       index: 0,
      //       logprobs: null,
      //       message: {
      //         content:
      //           '\n{\n    "content": {\n        "text": "\u003cdiv\u003e\u003cp\u003e1. 五行主属性和八字：此八字中五行水的个数为3个，金、木、火的个数均为1个，土的个数为0个，五行主属性为水，八字为癸亥年、乙酉月、癸巳日。\u003c/p\u003e\u003cp\u003e2. 五行命理和适合颜色：五行命理水旺，土较弱。适合颜色为黑色、深蓝色（水属性），金色、白色（金能生水），也可适当搭配黄色、棕色（补土）。\u003c/p\u003e\u003cp\u003e3. 场景化搭配建议：日常穿着可多选择黑色、深蓝色衣物，搭配金色或白色饰品；家居装饰中，客厅可选用蓝色系窗帘，摆放白色摆件，同时可放置一些黄色的绿植花盆来补土。\u003c/p\u003e\u003cp\u003e4. 动态调整建议：冬季可多使用黑色、深蓝色，增强水的能量；秋季可侧重金色、白色，借助金的力量生水；在土属性相关的场合，如参加户外活动时，可穿戴黄色衣物进行调整。\u003c/p\u003e\u003c/div\u003e",\n        "arr": ["猪", "1", "1", "3", "1", "0"]\n    }\n}',
      //         reasoning_content:
      //           '\n用户需要根据生日计算年柱、月柱、日柱的五行属性个数，不考虑时柱和藏干，然后生成颜色报告。首先，我需要确定用户的出生日期对应的八字。阳历1983年10月5日，转换成农历可能需要查万年历。1983年是癸亥年，10月5日对应的农历应该是九月初一左右，但具体的月柱需要根据节气来确定。因为八字中的月份是按节气划分的，不是农历月份。比如，1983年的寒露是10月9日，所以10月5日属于白露到寒露之间，应该是酉月，也就是乙酉月。日柱的话，10月5日查万年历应该是癸巳日。\n\n接下来，确定各柱的五行属性。年柱癸亥，癸属水，亥属水，所以年柱五行是水。月柱乙酉，乙属木，酉属金，所以月柱是木和金。日柱癸巳，癸属水，巳属火，所以日柱是水和火。现在计算五行个数：水出现的次数是年柱癸、亥，日柱癸，共3次；火是日柱巳，1次；木是月柱乙，1次；金是月柱酉，1次；土没有出现，所以土是0。\n\n然后，属相是根据年份来的，1983年是癸亥年，属猪，所以属相是猪。\n\n接下来生成颜色报告。五行主属性方面，水最多，所以主属性是水，八字中五行水3个，金1个，木1个，火1个，土0个。五行命理水旺，适合的颜色应该是水对应的黑色、深蓝色，以及金生水的金色、白色，因为土弱，可能需要补土，土的颜色是黄色、棕色。场景化搭配建议比如日常穿着、家居装饰用适合的颜色，动态调整建议根据季节变化，比如冬季多用水色，秋季用金色等。\n\n最后，构建数组arr，属相是猪，五行个数依次是金1，木1，水3，火1，土0，所以数组是["猪", "1", "1", "3", "1", "0"]。需要确保格式正确，使用指定的HTML标签，并且内容符合要求。\n',
      //         role: "assistant",
      //       },
      //     },
      //   ],
      //   created: 1753862444,
      //   id: "0217538624170875e9da5334f92484a34371d3058e6715876e3da",
      //   model: "doubao-1-5-thinking-pro-m-250428",
      //   service_tier: "default",
      //   object: "chat.completion",
      //   usage: {
      //     completion_tokens: 783,
      //     prompt_tokens: 435,
      //     total_tokens: 1218,
      //     prompt_tokens_details: { cached_tokens: 0 },
      //     completion_tokens_details: { reasoning_tokens: 506 },
      //   },
      // };
      // console.log(text, "text33333333333333333333");

      // if (text.startsWith('"') && text.endsWith('"')) {
      //   text = text.slice(1, -1);
      // }

      // let obj = JSON.parse(text);

      // let shengxiaoList = JSON.parse(obj.choices[0].message.content);
      let shengxiaoContent = JSON.parse(obj.choices[0].message.content).content;
      luckyTxtList.value = formatShengXiao(shengxiaoContent.text);
      // console.log(shengxiaoContent, "shengxiaoContent");
      let shengxiaoList = shengxiaoContent.arr;
      shengxiao.value = shengxiaoList[0];

      shengxiaoNumList.value = shengxiaoList.slice(1);

      let wuxing = getMaxElement(shengxiaoNumList.value);
      // console.log("wuxing: ", wuxing);

      for (let i = 0; i < shengxiaoImgList.length; i++) {
        if (
          shengxiaoImgList[i].shengxiao === shengxiao.value &&
          shengxiaoImgList[i].element === wuxing
        ) {
          shegnxiaoImgUrl.value = shengxiaoImgList[i].imgUrl;
        }
      }
    } else if (callWord === "four") {
      const obj = JSON.parse(res.data);
      // console.log("obj: ", obj);
      const content = obj.choices[0].message.content;
      customFigure.value = JSON.parse(content);
    } else if (callWord === "five") {
      const obj = JSON.parse(res.data);
      const content = obj.choices[0].message.content;

      customerStyle.value = JSON.parse(content).html;
    }
  });
};

const items = ref([]);

const wardrobeList = () => {
  // https://llshop.zglvling.com/soapi/wardrobe/clothes_list
  wardrobeListApi({
    open_id: openId,
    // categoryId: 10140,
    clothesIndex: 1,
    clothesKind: 0,
    clothesSize: 12,
  }).then((res) => {
    // console.log("衣服列表 -----------------", res.clothesList);

    const goods_images = res.clothesList
      .map((i) => i.goods_image)
      .filter((i) => i.length >= 5);

    items.value = goods_images;
    // clothesList.value = res.data.wardrobeList.slice(0, 3);
  });
};

wardrobeList();

const getHairstyleList = () => {
  hairStyleListApi({
    phone: "17600222111",
    isPerson: "yes",
  }).then((res) => {
    hairStyleList.value = res.result;
    // console.log(res, "发型列表 -----------------");
  });
};
getHairstyleList();
const pollExchangeHairHistory = (requestId, maxTries = 30, interval = 2000) => {
  let tries = 0;
  const poll = (resolve, reject) => {
    exchangeHairHistoryByTaskId({ taskId: requestId })
      .then((ress) => {
        // console.log("轮询结果", ress);
        if (
          ress.result[0].url !==
            "https://cdn.meidaojia.com/aidigitalfield/digital_cloth/static/1720084773937.png" &&
          ress.result[1].url !==
            "https://cdn.meidaojia.com/aidigitalfield/digital_cloth/static/1720084773937.png" &&
          ress.result[2].url !==
            "https://cdn.meidaojia.com/aidigitalfield/digital_cloth/static/1720084773937.png"
        ) {
          resolve(ress);
        } else if (tries >= maxTries) {
          reject(new Error("轮询超时"));
        } else {
          tries++;
          setTimeout(() => poll(resolve, reject), interval);
        }
      })
      .catch((err) => {
        reject(err);
      });
  };
  return new Promise(poll);
};

const getColorTypeText = (sj_color_type) => {
  const found = newColorTypeList.value.find(
    (item) => item.typeName + "型" === sj_color_type
  );
  if (found) {
    colorTypeText.value = found;
  }
};
const addHair = async (data) => {
  await addHairApi({
    openId: openId,
    data: data,
  });
};
const getHair = async (data) => {
  let res = await getHairApi({
    openId: openId,
  });
  return res.data;
};
const getUserFaceInfo = async () => {
  getStyleApi({ openId: openId }).then(async (res) => {
    newColorTypeList.value = reorderByValue(
      colorTypeList,
      res?.detail?.sj_color_type
    );

    colorTypeInfo.value = newColorTypeList.value[0];

    userFaceInfo.value = res.data || {};
    if (!userFaceInfo.value.avatar_img_url) {
      userFaceInfo.value.avatar_img_url =
        "https://llshop.zglvling.com/shop/img/jpg/avatar.jpg";
    }

    if (userFaceInfo?.value?.gender === "男") {
      faceImgUrl.value =
        "https://llyz.oss-cn-beijing.aliyuncs.com/diagnostic-report-h5/menhairstyles.png";
      let hairInfo = faceList.find((item) => item.id === 8);
      hairIds.value = hairInfo?.hairStyleIdList;
      // for(let i =0)
    } else {
      for (let i = 0; i < faceList.length; i++) {
        if (userFaceInfo?.value?.feature === faceList[i].name) {
          faceImgUrl.value = faceList[i].imgUrl;
          hairIds.value = faceList[i].hairStyleIdList;
        }
      }
    }
    getPraiseText("one");
    getPraiseText("three", 1);
    getPraiseText("four");
    getPraiseText("five");
    getColorTypeText(res?.detail?.sj_color_type || "");
    let blob = await downloadFile(userFaceInfo?.value?.avatar_img_url);
    let formData = new FormData();
    formData.append("phone", "17600222111");
    formData.append("isHr", "false");
    formData.append("sex", userFaceInfo?.value.gender);
    formData.append("hairIds", hairIds.value);
    // 如果有图片/文件需要上传
    if (blob) {
      formData.append("files", blob, "avatar.jpg");
    }

    let taskInfo = await uploadFormData(formData);
    let ress = null;
    if (enterType === "weixin") {
      ress = await getHair();
    } else {
      ress = await pollExchangeHairHistory(taskInfo.requestId);
      await addHair(ress);
    }
    avatarList.value = ress.result;
  });
};

const toHairstyleRoom = (item) => {
  wx.miniProgram.navigateTo({
    url: `/pages/hairstyleRoom/index?id=${item.fileId}`,
    success: function () {
      // alert('成功')
    },
    fail(error) {
      // alert('错误', error)
      console.log("navigateTo error: ", error);
    },
  });
};

function getScrollHeight() {
  const tabsEl = document.getElementById("headerBox");
  if (tabsEl) {
    const rect = tabsEl.getBoundingClientRect();
    console.log(rect.height, "rect.height");

    scrollHeight.value = rect.height;
  }
}

function onPageScroll(e) {
  let scrollTop = e && e.scrollTop !== undefined ? e.scrollTop : window.scrollY;
  if (scrollTop > scrollHeight.value) {
    //277是需要固定的地方到顶部的距离
    classFixed.value = "fixed";
  } else {
    classFixed.value = "";
  }
}
onMounted(() => {
  getScrollHeight();
  window.addEventListener("scroll", onPageScroll);
});
onUnmounted(() => {
  window.removeEventListener("scroll", onPageScroll);
});
getStyleApi({ openId })
  .then((res) => {
    styleType.value = res.data;
  })
  .then(() => {
    getUserFaceInfo();
  });

function onTabChange(tabIndex) {
  // H5端滚动到id=tabs的位置
  if (
    typeof window !== "undefined" &&
    activeTab.value !== tabIndex &&
    !!window.scrollY &&
    window.scrollY > scrollHeight.value
  ) {
    window.scrollTo({ top: scrollHeight.value, behavior: "smooth" });
  }
  activeTab.value = tabIndex;
}
</script>

<style>
.report {
  padding: 20px 20px 0;
}
.report-title {
  font-family: "PingFang SC", "Microsoft YaHei", "Arial", sans-serif !important;
  font-weight: 400;
  font-size: 18px;
  line-height: 28px !important;
  letter-spacing: 0px;
}
.report-title-en {
  font-family: "PingFang SC", "Microsoft YaHei", "Arial", sans-serif !important;
  font-weight: 400;
  font-size: 16px;
  line-height: 28px !important;
  letter-spacing: 0px;
  color: rgba(216, 216, 216, 1);
}
.padding-top20 {
  padding: 20px 20px 0;
}
.color-tab-content {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.color-img {
  width: 100%;
  max-width: 400px;
  border-radius: 8px;
  margin-bottom: 12px;
}
.color-desc {
  text-align: center;
  color: #666;
  font-size: 16px;
}
.title {
  padding: 0 20px;
}
.swiper-container {
  position: relative;
}
.avatar-box {
  display: flex;
  position: absolute;
  width: 100%;
  height: 235px;
}
.avatar {
  position: absolute;
  width: 235px;
  height: 235px;
  z-index: 9;
}
.avatar img {
  /* width: 235px; */
  height: 235px;
  transform: scale(1.2);
}
.swiper {
  width: 100%;
  height: 235px;
  margin-top: 20px;
}
.img-box {
  width: 235px;
  position: relative;
}
.btn {
  position: absolute;
  z-index: 999;
  width: 80px;
  height: 100%;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.btn img {
  width: 32px;
  height: 32px;
}
.left-btn {
  left: 0;
}
.right-btn {
  right: 0;
}

.swiper-item {
  /* display: block; */
  height: 235px;
  line-height: 28px !important;
  text-align: center;
  display: flex;
  justify-content: center;
  /* background-color: red; */
}
.swiper-instructions {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* justify-content: center; */
  padding-top: 10px;
}
.swiper-type-name {
  font-family: "PingFang SC", "Microsoft YaHei", "Arial", sans-serif !important;
  font-weight: 400;
  font-size: 14px;
  line-height: 28px !important;
  letter-spacing: 94%;
}
.swiper-type-name-en {
  font-family: "PingFang SC", "Microsoft YaHei", "Arial", sans-serif !important;
  font-weight: 400;
  font-size: 14px;
  line-height: 28px !important;
  letter-spacing: 0%;
  text-transform: uppercase;
  color: rgba(216, 216, 216, 1);
  margin-top: 5px;
}
.swiper-type-text {
  font-family: "PingFang SC", "Microsoft YaHei", "Arial", sans-serif !important;
  font-weight: 400;
  font-size: 12px;
  line-height: 28px !important;
  letter-spacing: 0%;
  margin-top: 5px;
}
.image {
  width: 100%;
}

.html-rich-text {
  font-family: "PingFang SC", "Microsoft YaHei", "Arial", sans-serif !important;
  font-weight: 400 !important;
  font-size: 14px !important;
  line-height: 28px !important;
  letter-spacing: 0% !important;
}
.reference-title {
  width: 100%;
  height: 17px;
}
.reference-title img {
  width: 100%;
  height: 17px;
}
.reference-img-box {
  height: 195.5px;
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
  margin-bottom: 30px;
}
.reference-img-box .reference-img1 {
  width: 100%;
  height: 195.5px;
}
.reference-img-box .reference-img2 {
  width: 45px;
  height: 165px;
}
.reference-complate {
  width: 100%;
  height: 21px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "PingFang SC", "Microsoft YaHei", "Arial", sans-serif !important;
  font-weight: 400;
  font-size: 12px;
  line-height: 28px !important;
  letter-spacing: 0%;
  text-align: center;
  color: rgba(216, 216, 216, 1);
  margin: 20px 0;
}
.avatar-warp {
  width: 100%;
  height: 192px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.avatar-main {
  width: 116px;
  height: 160px;
  margin: 0 10px;
  border-radius: 40px;
  overflow: hidden;
}
.avatar-main img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.avatar-side {
  width: 80px;
  height: 120px;
  /* background-color: yellow; */
  border-radius: 40px;
  overflow: hidden;
}
.avatar-side img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.rich-text-content {
  padding: 0 20px 20px;
}
.face-img-box {
  width: 336px;
  height: 338px;
}
.face-img-box img {
  width: 100%;
  height: 100%;
  /* border-radius: 8px; */
}
.more-hairstyle {
  width: 100%;
  /* height: 135px; */
  margin-top: 20px;
}
.more-hairstyle img {
  width: 100%;
  height: 100%;
}

.lucky-color-box {
  padding: 0 20px;
  min-height: 950px;
  /* overflow-y: hidden; */
}
.shengxiao {
  width: 100%;
  height: 283px;
}
.shengxiao img {
  width: 100%;
  height: 100%;
}
.five-attribute-box {
  position: relative;
  /* margin-bottom: 20px; */
}
.numblock {
  width: 50px;
  height: 50px;
  display: flex;
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  position: absolute;
  color: white;
  z-index: 999;
}
.five-attribute {
  width: 100%;
  /* height: 597px; */
  position: relative;
}
.five-attribute img {
  width: 100%;
  height: 100%;
}
.avatorLogo {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 25%;
  width: 66.5px;
  height: 66.5px;
  background-color: red;
  border-radius: 50%;
  overflow: hidden;
  border: 3.22px solid rgba(167, 178, 179, 1);
}
.avatorLogo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.style-type {
  line-height: 28px !important;
  font-family: "Microsoft YaHei", "Arial", sans-serif !important;
  color: #031c24;
  /* font-family: Molengo; */
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
}
.trends-title {
  font-family: "PingFang SC", "Microsoft YaHei", "Arial", sans-serif !important;
  margin-bottom: 16px;
  font-weight: 400;
  font-size: 14px;
  line-height: 28px !important;
  letter-spacing: 0px;
}
.trends-img-box {
  display: flex;
  width: 100%;
  height: 330px;
  justify-content: space-between;
}
.trends-img-box1 {
  width: 220px;
}
.trends-img-box1 img {
  width: 100%;
  height: 100%;
}

.trends-img-box2 {
  width: 102px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.trends-img {
  width: 102px;
  height: 134px;
}
.trends-img img {
  width: 100%;
  height: 100%;
}
.trends-one-try-btn {
  width: 102px;
  height: 24px;
  background-color: black;
  margin-top: 28px;
  font-family: "PingFang SC", "Microsoft YaHei", "Arial", sans-serif !important;
  font-weight: 400;
  font-style: Regular;
  font-size: 12px;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 28px !important;
  letter-spacing: 0px;
}
.scroll-box {
  width: 100%;
  overflow-x: auto;
  display: flex;
  white-space: nowrap;
  scrollbar-width: none; /* Firefox 隐藏滚动条 */
  -ms-overflow-style: none; /* IE/Edge 隐藏滚动条 */
}
.scroll-box::-webkit-scrollbar {
  display: none; /* Chrome/Safari/Opera 隐藏滚动条 */
}
.fixed {
  position: fixed;
  top: 0;
  z-index: 9999;
}
/* 预览遮罩层样式 */
.preview-mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.8);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 999;
}

.preview-container {
  width: 90%;
  height: 90%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.preview-image {
  max-width: 100%;
  max-height: 100%;
  border-radius: 4px;
}
</style>
