<template>
  <view class="relative pt-[40rpx]">
    <Dashboard class="absolute right-[38rpx] top-0" :score="score" :color="rules[level].color" />
    <view class="bg-[#fff] rounded-[24rpx] p-[22rpx]">
      <view class="mt-[30rpx]">
        <text class="text-[48rpx] text-[#000] font-600">{{ tagName }}</text>
        <!-- <view class="flex items-center text-[#999] text-[24rpx] mt-[20rpx]">
          <view class="i-carbon-warning w-[24rpx] h-[24rpx]"></view>
          <text class="text-[#999] ml-[10rpx]">状态很好哦，继续保持，轻松迎接高考吧！</text>
        </view> -->
        <view class="mt-[58rpx]">
          <ScoreCard :current-position="level" :rules="rules" />
        </view>

        <view class="relative mt-[68rpx] bg-[#F5FAFF]">
          <view class="absolute top-[-9rpx] left-[20rpx] w-[180rpx] h-[52rpx]">
            <image
              src="https://api.static.ycymedu.com/src/images/home/test-icon.png"
              mode="scaleToFill"
              class="w-[180rpx] h-[52rpx]"
            />
          </view>
          <view class="px-[20rpx] pb-[20rpx] pt-[58rpx] text-[#333] text-[26rpx]">
            {{ description }}
          </view>
        </view>
        <view class="text-[#999] text-[24rpx] mt-[10rpx]">
          {{ tip }}
        </view>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import Dashboard from '@/pages-evaluation-sub/evaluate/components/psychologicalReportItem/Dashboard.vue'
import ScoreCard from './psychologicalReportItem/ScoreCard.vue'

defineProps({
  score: {
    type: Number,
    default: 0,
  },
  rules: {
    type: Array<{ label: string; range: string; color: string }>,
    default: () => [],
  },
  tip: {
    type: String,
    default: '结果只做参考，不能准确判断是否有焦虑症。',
  },
  level: {
    type: Number,
    default: 0,
  },
  description: {
    type: String,
    default: '',
  },
  tagName: {
    type: String,
    default: '',
  },
})
</script>
