<route lang="json5" type="page">
{
  style: {
    navigationStyle: 'custom',
  },
}
</route>

<template>
  <view class="flex flex-col h-screen relative custom-bg">
    <Navbar
      safeAreaInsetTop
      :bordered="false"
      leftArrow
      @clickLeft="handleBack"
      bg-color="transparent"
    >
      <template #title>
        <text class="text-[#1F2329] text-[36rpx] font-medium text-[#fff]">性格测评报告</text>
      </template>
    </Navbar>

    <view class="flex-1 flex flex-col overflow-auto">
      <view class="overflow-auto relative mt-[40rpx] flex-1 pb-[20rpx]">
        <!-- 顶部卡片 -->
        <view class="flex flex-col pt-[32rpx] px-[84rpx] h-[244rpx] mb-[-116rpx] font-700">
          <image
            src="https://api.static.ycymedu.com/src/images/evaluate/bg.png"
            class="header-bg"
          />
          <text class="text-[#333] text-[28rpx] mb-[14rpx] z-2">您的性格类型为</text>
          <text class="text-[#117CFC] text-[36rpx] z-2">{{ studyRecord.title }}</text>
        </view>
        <!-- 雷达图占位 -->
        <CharacterChart :linChart="studyRecord.linChart" :description="studyRecord.description" />

        <DependenciesChart
          :mainDomain="studyRecord.reportItem.mainDomain"
          :major="studyRecord.reportItem.major"
          :occupation="studyRecord.reportItem.occupation"
        />
      </view>

      <!-- 底部AI智能顾问 -->
      <AiFooter :pageId="pageId" :pageType="pageType" />
    </view>
  </view>
</template>
<script setup lang="ts">
import Navbar from '@/pages-evaluation-sub/components/navbar/Navbar.vue'
import CharacterChart from '../components/interestChart/CharacterChart.vue'
import DependenciesChart from '../components/interestChart/DependenciesChart.vue'
import AiFooter from '../components/AiFooter.vue'
import { getMBTIDimension } from '@/service/index/api'
import { handleBack } from '../hooks/useEvaluateBack'

const pageType = ref(0)
const pageId = ref(0)

const studyRecord = ref({
  description: '',
  title: '',
  linChart: {},
  reportItem: { mainDomain: '', major: '', occupation: '' },
  hTag: '',
})

onLoad((options) => {
  pageType.value = +options.type
  pageId.value = options.id

  getMBTIDimension({ ScaleId: pageId.value }).then((resp) => {
    if (resp.code === 200) {
      studyRecord.value = resp.result as {
        description: string
        title: string
        linChart: any
        reportItem: { mainDomain: string; major: string; occupation: string }
        hTag: string
      }
    }
  })
})
</script>

<style scoped lang="scss">
.custom-bg {
  background: linear-gradient(184deg, #0d79fc 0%, #2186fc 100%);
}
:deep(.icon-class) {
  color: #fff !important;
}

.header-bg {
  width: calc(100% - 80rpx);
  height: 244rpx;
  position: absolute;
  top: 0;
  left: 40rpx;
  z-index: 1;
}

.type-tag {
  font-size: 24rpx;
  min-width: 40rpx;
  text-align: center;
}

.position-tag {
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
  font-size: 26rpx;
  text-align: center;
}

.table-row {
  align-items: center;
  font-size: 26rpx;
  color: #333;
}

.avatar-item image {
  border: 4rpx solid #fff;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.15);
}
</style>
