<template>
  <div class="step4-shell">
    <Transition :name="transitionName">
      <!-- 报告页（原 step4） -->
      <div v-if="view === 'report'" key="report" class="step4 step4--report">
        <div class="top">
          <div class="l"></div>
          <div class="title">
            我的检测报告
          </div>
          <div class="r" @click="router.replace('/')"><img src="@/assets/close.png" alt=""></div>
        </div>
        <div class="time"> 检测时间：<span>{{ creatTime }}</span></div>
        <div class="main">
          <div class="ip">
            <div class="ip-top" @click="toStep5()">
              <div class="top-l">
                <div class="value">{{ data?.metrics?.skin_status?.skin_age?.value }}<span>岁</span></div>
                <div class="label">皮肤年龄</div>
              </div>
              <div class="line"></div>
              <div class="top-r">
                <div class="value">{{ data?.metrics?.mental_health?.mental_score?.value }}<span>分</span></div>
                <div class="label">心理健康指数</div>
              </div>
            </div>
            <div class="l" @click="toStep5()">
              <ReportMetricCard v-for="(item, index) in list1" :key="index" v-bind="item" />
            </div>
            <div class="r" @click="toStep5()">
              <ReportMetricCard v-for="(item, index) in list2" :key="index" v-bind="item" />
            </div>
            <img src="@/assets/step1/ip.png" alt="">
          </div>
        </div>
        <div class="bottom" @click="toStep5()">
          <ReportMetricCard v-for="(item, index) in list3" :key="index" v-bind="item" />
        </div>
      </div>

      <!-- 详情页（原 step5） -->
      <div v-else key="detail" class="step5 step4--detail">
        <div class="top">
          <div class="l" @click="backToReport()"> <img src="@/assets/back.png" alt=""></div>
          <div class="title">
            心理压力指数MSI指标
          </div>
          <div class="r" @click="router.replace('/')"><img src="@/assets/close.png" alt=""></div>
        </div>
        <div v-html="summaryText" class="summary-text"> </div>
        <!-- <div class="main">
          <img class="tips" src="@/assets/step5/tips.png" alt="">
          <img class="ip" src="@/assets/step1/ip.png" alt="">

        </div> -->
        <!-- <div class="info">
          <div class="title">以下是你的心理压力指数MSI指标</div>
          <div class="msi-card">
            <div class="msi-score">
              <span class="value">{{ msiScore.toFixed(1) }}</span>
              <span class="total">/{{ msiMax.toFixed(1) }}</span>
            </div>

            <div class="msi-gauge">
              <div class="track" />
              <div class="pointer" :style="{ left: msiPointerLeft }" />
            </div>

            <div class="msi-labels">
              <span>1-2</span>
              <span>2-3</span>
              <span>3-4</span>
              <span>4-5</span>
              <span>5-6</span>
            </div>
          </div>
          <div class="text">
            <p> 结合总分与各维度得分，测评对象当前压力状态呈现以下核心特征：</p>
            <p> <span>1. 情绪与行为层面问题突出：</span>情绪易怒性、回避行为两个维度得分偏高，是当前压力的主要表现形式，易导致工作效率下降、人际沟通不畅等问题。</p>
            <p> <span>2. 身心基础能力偏弱：</span>幸福感与适应能力得分偏低，反映出个体身心能量不足，对工作环境变化的适应力较弱，难以快速缓冲压力带来的负面影响。</p>
            <p>
              <span>3.社会支持存在提升空间：</span>社会支持维度处于中等水平，外部支持未被充分利用，主动求助、联结支持系统的行为不足，进一步加剧了压力应对的难度。基于测评结果，结合职场场景与个体需求，制定以下分层干预建议，可根据实际情况逐步落实：
              每日开展 10-15 分钟情绪调节练习，如正念呼吸、渐进式肌肉放松或轻量冥想，每日固定时段完成，逐步提升情绪自控力。
              建立 “情绪记录清单”，当出现烦躁、焦虑情绪时，及时记录情绪触发点与自身感受，分析情绪来源，针对性调整思维方式，减少冲动反应。
            </p>
            <p> 适度参与户外活动（如散步、慢跑、瑜伽），每周 2-3 次，每次 30 分钟以上，通过运动释放负面情绪，提升身心愉悦感。</p>
          </div>
        </div> -->
      </div>
    </Transition>
  </div>
</template>

<script setup lang="ts">

//@ts-nocheck
import ReportMetricCard from '@/components/ReportMetricCard/index.vue';
import { computed, ref } from 'vue';
import { useRouter } from 'vue-router';
import { format } from 'silly-datetime';



const router = useRouter();
const view = ref<'report' | 'detail'>('report');
const direction = ref<'forward' | 'back'>('forward');
const transitionName = ref('step4-slide-up');
const summaryText = ref('');
const creatTime = ref<Date>(new Date());
const data = ref<any>({});
// MSI 指数（详情页进度条）
const msiScore = ref(3.1);
const msiMax = ref(6.0);
const msiPointerLeft = computed(() => {
  const ratio = Math.min(Math.max(msiScore.value / msiMax.value, 0), 1);
  return `${ratio * 100}%`;
});
const toStep5 = () => {
  direction.value = 'forward';
  transitionName.value = 'step4-slide-up';
  view.value = 'detail';
}
const backToReport = () => {
  direction.value = 'back';
  transitionName.value = 'step4-slide-down';
  view.value = 'report';
};
const list1 = ref<any[]>([]);

const list2 = ref<any[]>([]);
const list3 = ref<any[]>([]);
/** 底部四个指标：`type` 决定布局，`iconType` 对应 icons/1~11.png */


//真实数据
const arkResult = sessionStorage.getItem('step2_ark_result');
if (arkResult) {
  const result = JSON.parse(arkResult);

  console.log(result);
  
  // summaryText.value = result?.output[0]?.summary[0]?.text;
  // console.log(summaryText.value); //文本
  data.value = JSON.parse(result?.output[1]?.content[0]?.text);
  creatTime.value = format(new Date(result.created_at ? result.created_at * 1000 : new Date()), 'YYYY-MM-DD HH:mm:ss')
  summaryText.value = data.value?.brief_report?.summary_text;
  list1.value = [
    {
      type: 4 as const,
      iconType: 1 as const,
      title: '心率',
      mainValue: data.value?.metrics?.vital_signs?.heart_rate?.value,
      unit: 'bpm（次/分钟）',
    }, {
      type: 4 as const,
      iconType: 2 as const,
      title: '呼吸频率',
      mainValue: data.value?.metrics?.vital_signs?.respiratory_rate?.value,
      unit: '12-20次/分',
    },
    {
      type: 4 as const,
      iconType: 3 as const,
      title: '舒张压',
      mainValue: data.value?.metrics?.vital_signs?.diastolic_bp?.value,
      unit: '85~89 mmHg',
    },
    {
      type: 4 as const,
      iconType: 4 as const,
      title: '收缩压',
      mainValue: data.value?.metrics?.vital_signs?.systolic_bp?.value,
      unit: '120–139 mmHg',
    },
  ];


  list2.value = [
    {
      type: 4 as const,
      iconType: 5 as const,
      title: '血糖',
      mainValue: data.value?.metrics?.blood_health?.glucose?.value,
      unit: '≥7.0 mmol/L',
    }, {
      type: 4 as const,
      iconType: 6 as const,
      title: '血红蛋白',
      mainValue: data.value?.metrics?.blood_health?.hemoglobin?.value,
      unit: 'bmp（次/分钟）',
    },
    {
      type: 4 as const,
      iconType: 7 as const,
      title: '甘油三酯',
      mainValue: data.value?.metrics?.blood_health?.triglycerides?.value,
      unit: '12-15 mmol/L',
    },
  ];

   list3.value = [
  // {
  //   type: 1 as const,
  //   title: '心理检测指数',
  //   score: 3.1,
  //   max: 6,
  // },
  {
    type: 8 as const,
    iconType: 1 as const,
    title: '心理检测指数',
    mainValue: data.value?.metrics?.mental_health?.mental_score?.value,
  },
  // {
  //   type: 3 as const,
  //   iconType: 8 as const,
  //   title: '当前情绪',
  //   highlightText: '快乐',
  //   highlightColor: '#fb7185',
  // },
  {
    type: 2 as const,
    iconType: 9 as const,
    title: '压力指数',
    mainValue: data.value?.metrics?.mental_health?.stress?.value,
  },
  {
    type: 2 as const,
    iconType: 10 as const,
    title: '抑郁指数',
    mainValue: data.value?.metrics?.mental_health?.depression?.value,
  },
  {
    type: 2 as const,
    iconType: 11 as const,
    title: '焦虑指数',
    mainValue: data.value?.metrics?.mental_health?.anxiety?.value,
  },
];
}


// data.value ={"visual_quality_check": {"lighting": "good", "face_clarity": "high", "signal_reliability": "valid"}, "metrics": {"vital_signs": {"heart_rate": {"value": 76, "unit": "bpm", "status": "normal", "desc": "心率"}, "respiratory_rate": {"value": 15, "unit": "rpm", "status": "normal", "desc": "呼吸频率"}, "systolic_bp": {"value": 122, "unit": "mmHg", "status": "normal", "desc": "收缩压"}, "diastolic_bp": {"value": 80, "unit": "mmHg", "status": "normal", "desc": "舒张压"}}, "blood_health": {"glucose": {"value": 5.2, "unit": "mmol/L", "status": "normal", "desc": "血糖"}, "hemoglobin": {"value": 132, "unit": "g/L", "status": "normal", "desc": "血红蛋白"}, "triglycerides": {"value": 1.1, "unit": "mmol/L", "status": "normal", "desc": "甘油三酯"}}, "skin_status": {"skin_age": {"value": 28, "unit": "years", "status": "normal", "desc": "皮肤年龄"}}, "mental_health": {"mental_score": {"value": 82, "unit": "score", "status": "normal", "desc": "心理健康指数"}, "stress": {"value": 3, "unit": "score", "status": "normal", "desc": "压力指数"}, "depression": {"value": 2, "unit": "score", "status": "normal", "desc": "抑郁指数"}, "anxiety": {"value": 2, "unit": "score", "status": "normal", "desc": "焦虑指数"}}}, "brief_report": {"personality": "沉稳内敛", "emotion": "平和", "overall_status": "良好", "abnormal_items": [], "summary_text": "检测显示您的生理机能处于正常状态，皮肤状况符合年龄特征，心理压力较低，整体状态良好。"}}




</script>
<style scoped lang="scss">
.step4-shell {
  position: relative;
  height: 100vh;
  overflow: hidden;
  /* 过渡时底层兜底背景，避免透明时露出白屏 */
  // background: url('@/assets/step1/bg.png') no-repeat center center/cover;
  background: #F3F3F3;
}

.step4,
.step5 {
  min-height: 100vh;
  // background: url('@/assets/step1/bg.png') no-repeat center center/cover  ;
  background: #F3F3F3;
}

.step4 {
  padding-bottom: 166px;
  position: relative;
  padding-top: 52px;
  display: flex;
  flex-direction: column;
  // justify-content: space-between;
  min-height: 100vh;

  .top {
    padding: 0 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 50px;

    .l {
      width: 60px;
      height: 60px;
    }

    .r {
      width: 60px;
      height: 60px;

      img {
        width: 100%;
      }
    }

    .title {
      flex: 1;
      text-align: center;
    }
  }

  .time {
    line-height: 33px;
    margin-top: 3px;
    text-align: center;
    font-size: 24px;
    color: #000;

    span {
      color: #797979;
    }
  }

  .main {
    flex: 1;
    position: relative;

    .ip {
      position: absolute;
      top: 258px;
      left: 50%;
      transform: translate(-50%, 0);
      width: 485.04px;
      height: 1309px;

      img {
        width: 100%;
        height: 100%;
      }

      .ip-top {
        border-radius: 24px;
        position: absolute;
        top: -187px;
        left: 50%;
        transform: translateX(-50%);
        width: 335px;
        height: 105px;
        background: #fff;
        display: flex;

        justify-content: space-between;
        align-items: center;

        .top-l,
        .top-r {
          flex: 1;
          text-align: center;

          .value {
            font-size: 50px;

            span {
              font-size: 18px;
            }
          }

          .label {
            font-size: 18px;
          }
        }

        .line {
          width: 2px;
          background: #D8D8D8;
          height: 60%;
        }
      }

      .l {
        position: absolute;
        width: 168px;
        top: 125px;
        left: -222px;
        display: flex;
        flex-wrap: wrap;
        gap: 17px;

      }

      .r {
        position: absolute;
        width: 168px;
        top: 125px;
        right: -222px;
        display: flex;
        flex-wrap: wrap;
        gap: 17px;

      }
    }

  }

  .bottom {
    z-index: 2;
    position: absolute;
    bottom: 500px;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 17px;
    padding: 0 24px;
    box-sizing: border-box;
  }
}

/* 详情页（原 step5）的样式直接复用 */
.step5 {
  padding-top: 52px;
  display: flex;
  flex-direction: column;
  // justify-content: space-between;

  .top {
    position: relative;
    z-index: 2;
    padding: 0 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .l {
      width: 60px;
      height: 60px;
    }

    .r {
      width: 60px;
      height: 60px;

      img {
        width: 100%;
      }
    }

    .title {
      height: 60px;
      margin: 0 auto;
      font-size: 50px;
    }
  }

  .main {
    transform: translateY(-200px);
    flex: 1;
    flex-direction: column;
    display: flex;
    justify-content: center;
    align-items: center;

    .ip {
      margin-top: 61px;
      width: 485.04px;
      height: 1309px;

      img {
        width: 100%;
      }
    }

    .tips {
      display: block;
      width: 404px;
      height: 33px;
      margin: 100px auto 0;
    }
  }

  .info {
    left: 50%;
    transform: translateX(-50%);
    border-radius: 20px;
    position: absolute;
    bottom: 43px;
    width: 956px;
    height: 888px;
    background: rgba(255, 255, 255, 0.95);
    padding: 24px 26px;
    overflow-y: scroll;

    &::-webkit-scrollbar {
      display: none;
    }

    .title {
      font-size: 30px;
      font-weight: 650;
    }

    .msi-card {
      margin-top: 22px;
      width: 452px;
      height: 202px;
      background: #fff;
      border-radius: 24px;
      padding: 34px 34px 28px;
      box-sizing: border-box;
    }

    .msi-score {
      display: flex;
      align-items: baseline;
      justify-content: center;
      gap: 10px;

      .value {
        font-size: 63px;
        font-weight: 800;
        color: #111827;
        line-height: 1;
      }

      .total {
        font-size: 43px;
        font-weight: 600;
        color: rgba(17, 24, 39, 0.45);
        line-height: 1;
      }
    }

    .msi-gauge {
      position: relative;
      margin-top: 26px;
      padding-top: 18px;
    }

    .track {
      height: 18px;
      border-radius: 999px;
      background: linear-gradient(90deg,
          #22c55e 0%,
          #eab308 50%,
          #ff7a00 78%,
          #ff3b30 100%);
    }

    .pointer {
      position: absolute;
      top: 0;
      width: 40px;
      height: 28px;
      transform: translateX(-50%);
      background: url('@/components/ReportMetricCard/icons/dot.png') no-repeat center center / contain;
      filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.18));
    }

    .msi-labels {
      margin-top: 18px;
      display: flex;
      justify-content: space-between;
      font-size: 32px;
      line-height: 1;
      font-weight: 500;

      span:nth-child(1),
      span:nth-child(2) {
        color: #22c55e;
      }

      span:nth-child(3) {
        color: #eab308;
      }

      span:nth-child(4) {
        color: #ff7a00;
      }

      span:nth-child(5) {
        color: #ff3b30;
      }
    }

    .text {
      margin-top: 25px;
      font-size: 30px;
      color: #000;
      line-height: 48px;

      p {
        span {
          font-weight: 700;
        }
      }
    }
  }
  .summary-text{
    padding: 50px;
  }
}

/* 内部切换动画：上下滑 + 淡入淡出（支持正/反向） */
.step4-slide-up-enter-active,
.step4-slide-down-enter-active {
  transition: opacity 1100ms cubic-bezier(0.2, 0.9, 0.2, 1),
    transform 1100ms cubic-bezier(0.2, 0.9, 0.2, 1);
  will-change: opacity, transform;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  // background: url('@/assets/step1/bg.png') no-repeat center center/cover;
  background: #F3F3F3;
}

.step4-slide-up-leave-active,
.step4-slide-down-leave-active {
  transition: opacity 1100ms cubic-bezier(0.2, 0.9, 0.2, 1),
    transform 1100ms cubic-bezier(0.2, 0.9, 0.2, 1);
  will-change: opacity, transform;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
  /* 叠层时也保持背景，避免透明叠加时出现白边/白屏 */
  // background: url('@/assets/step1/bg.png') no-repeat center center/cover;
  background: #F3F3F3;
}

.step4-slide-up-enter-to,
.step4-slide-up-leave-from,
.step4-slide-down-enter-to,
.step4-slide-down-leave-from {
  opacity: 1;
}

/* forward：detail 从下往上进，report 往上出 */
.step4-slide-up-enter-from {
  opacity: 0.01;
  transform: translateY(100vh);
}

.step4-slide-up-leave-to {
  opacity: 0.01;
  transform: translateY(-100vh);
}

/* back：report 从上往下进，detail 往下出（反向） */
.step4-slide-down-enter-from {
  opacity: 0.01;
  transform: translateY(-100vh);
}

.step4-slide-down-leave-to {
  opacity: 0.01;
  transform: translateY(100vh);
}
</style>
