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

<template>
  <view :scroll-y="true" 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]">
      <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-[40rpx] z-2">{{ studyRecord.tag }}</text>
        </view>
        <OpinionChart :pic-charts="studyRecord.picCharts" />
        <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 OpinionChart from '../components/interestChart/OpinionChart.vue'
import AbilityDimension from '../components/AbilityDimension.vue'
import AiFooter from '../components/AiFooter.vue'
import { handleBack } from '../hooks/useEvaluateBack'

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

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

const studyRecord = ref({
  description: '',
  title: '',
  picCharts: { indicator: [], radars: [] },
  reportItems: [],
  tag: '',
})

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

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