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

<template>
  <scroll-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 pb-[30rpx] relative">
      <!-- 顶部卡片 -->
      <view class="flex flex-col pt-[32rpx] px-[84rpx] h-[244rpx] mb-[-148rpx]">
        <image src="/static/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.tag }}</text>
      </view>
      <OpinionChart :pic-charts="studyRecord.picCharts" />
      <AbilityDimension :report-items="studyRecord.reportItems" />
      <!-- 底部AI智能顾问 -->
      <!-- <view class="ai-assistant mt-[20rpx] mb-[10rpx] flex items-center justify-center">
                <image src="" class="w-[32rpx] h-[32rpx] mr-[10rpx]"></image>
                <text class="text-[#117CFC] text-[26rpx]">智能AI顾问</text>
              </view> -->
    </view>
  </scroll-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 { getOpinionAbout } from '@/service/index/api'

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

const handleBack = () => {
  uni.navigateBack()
}

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>
