<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 overflow-auto relative mt-[40rpx] flex flex-col">
      <view class="flex flex-col flex-1 overflow-auto pb-[20rpx]">
        <!-- 顶部卡片 -->
        <view
          class="flex flex-col pt-[32rpx] mx-[24rpx] bg-[#fff] px-[30rpx] pt-[30rpx] border-class"
        >
          <text class="text-[#333] text-[28rpx] mb-[14rpx] z-2 font-700">你的弱势能力为</text>
          <text class="text-[#117CFC] text-[36rpx] z-2">
            {{ studyRecord.title.replace('你的弱势能力：', '') }}
          </text>
        </view>
        <!-- 雷达图占位 -->
        <LineReport :echart-data="studyRecord.linChart" :description="studyRecord.description" />
        <AbilityDimension :report-items="studyRecord.reportItems" />
      </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 LineReport from '../components/interestChart/LineReport.vue'
import AbilityDimension from '../components/AbilityDimension.vue'
import AiFooter from '../components/AiFooter.vue'
import { handleBack } from '../hooks/useEvaluateBack'

import { getAbilityDimension } from '@/service/index/api'

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

const studyRecord = ref({
  description: '',
  title: '',
  linChart: [],
  reportItems: [],
  hTag: '',
})

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

  getAbilityDimension({ ScaleId: pageId.value }).then((resp) => {
    if (resp.code === 200) {
      studyRecord.value = resp.result as {
        description: string
        title: string
        linChart: any[]
        reportItems: any[]
        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);
}

.border-class {
  border-radius: 20rpx 20rpx 0 0;
  padding-bottom: 42rpx;
  margin-bottom: -14rpx;
}
</style>
