<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">
      <view class="flex flex-col flex-1 overflow-auto pb-[20rpx]">
        <!-- 顶部卡片 -->
        <view class="mt-[60rpx] mx-[24rpx]">
          <StatusCard
            :score="score"
            :rules="anxietyRules"
            tip="测评结果只做参考。"
            :level="level"
            :description="studyRecord.description"
            :tagName="studyRecord.tagName"
          />
        </view>
        <view class="mx-[24rpx]">
          <LearnSkillSuggestion
            v-for="(item, index) in suggestions"
            :key="index"
            :items="item.items"
            :title="item.title"
          ></LearnSkillSuggestion>
        </view>
      </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 StatusCard from '../components/StatusCard.vue'
import LearnSkillSuggestion from '../components/LearnSkillSuggestion.vue'
import AiFooter from '../components/AiFooter.vue'
import { getCustomScaleExplains } from '@/service/index/api'
import { handleBack } from '../hooks/useEvaluateBack'

const pageType = ref(0)
const pageId = ref(0)
const anxietyRules = [
  {
    label: '很差',
    range: '≤80分',
    color: '#F5663E',
  },
  {
    label: '较差',
    range: '81-104分',
    color: '#F8B801',
  },
  {
    label: '一般',
    range: '105-136分',
    color: '#F3A953',
  },
  {
    label: '较好',
    range: '137-160分',
    color: '#55E5C5',
  },
  {
    label: '优秀',
    range: '≥161分',
    color: '#00B281',
  },
]

const score = ref(0)
const level = ref(0)

const studyRecord = ref({
  description: '',
  title: '',
  result: '',
  tagName: '',
  suggestions: '',
})

const calcLevel = (val: string) => {
  let _s = JSON.parse(val)
  if (_s[0].Total >= 161) {
    return 4
  } else if (_s[0].Total >= 137) {
    return 3
  } else if (_s[0].Total >= 105) {
    return 2
  } else if (_s[0].Total >= 81) {
    return 1
  } else {
    return 0
  }
}

const suggestions = ref<any[]>([])

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

  getCustomScaleExplains({ CustomScaleId: pageId.value }).then((resp) => {
    if (resp.code === 200) {
      studyRecord.value = resp.result as {
        description: string
        title: string
        result: string
        tagName: string
        suggestions: string
      }
      level.value = calcLevel(studyRecord.value.result)
      score.value = JSON.parse(studyRecord.value.result)[0].Total
      suggestions.value = JSON.parse(studyRecord.value.suggestions).succestions
    }
  })
})
</script>

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

.custom-border {
  width: 162rpx;
  height: 162rpx;
  border-radius: 50%;
  border: 6rpx dashed;
  border-color: #05d69c transparent transparent transparent;
}
</style>
