<script setup>
import { defineProps, onMounted, ref, watch } from 'vue'

const props = defineProps({
  data: {
    type: Object,
    required: true,
  },
})

const chartData = ref({})
const riskLevel = ref('')
const riskLevelText = ref('')
const riskLevelClass = ref('')
const riskInfoList = ref([
  { level: '低风险', description: '涉稳、寻衅滋事', class: 'text-lime-600' },
  { level: '中风险', description: '吸毒、涉毒、犯罪前科', class: 'text-orange-400' },
  { level: '高风险', description: '涉案人员、在逃、犯罪嫌疑人', class: 'text-red-500' },
  { level: '无风险', description: '无任何不良风险记录', class: 'text-green-600' },
])

// 图表配置项
const opts = ref({
  color: ['#1890FF', '#91CB74', '#FAC858', '#EE6666', '#73C0DE', '#3CA272', '#FC8452', '#9A60B4', '#ea7ccc'],
  padding: 0,
  title: {
    name: '',
    fontSize: 25,
    color: '',
    offsetY: -5,
  },
  subtitle: {
    name: '风险评估指数',
    fontSize: 12,
    color: '#666666',
    offsetY: 0,
  },
  extra: {
    gauge: {
      type: 'progress',
      width: 20,
      labelColor: '#666666',
      startAngle: 0.75,
      endAngle: 0.25,
      startNumber: 0,
      endNumber: 100,
      labelFormat: '',
      splitLine: {
        fixRadius: -10,
        splitNumber: 10,
        width: 15,
        color: '#FFFFFF',
        childNumber: 5,
        childWidth: 12,
      },
      pointer: {
        width: 24,
        color: 'auto',
      },
    },
  },
})

// 根据风险等级动态设置图表内容和样式
function setChartProperties(level) {
  switch (level) {
    case 'A':
      riskLevelText.value = '无风险'
      riskLevelClass.value = 'text-green-600'
      opts.value.title.name = '无风险'
      opts.value.title.color = '#10B981'
      chartData.value = {
        categories: [{ value: 0, color: '#10B981' }, { value: 1, color: '#10B981' }],
        series: [{ data: 0.1, color: '#10B981' }],
      }
      break
    case 'F':
      riskLevelText.value = '低风险'
      riskLevelClass.value = 'text-lime-600'
      opts.value.title.name = '低风险'
      opts.value.title.color = '#A3E635'
      chartData.value = {
        categories: [{ value: 0, color: '#A3E635' }, { value: 1, color: '#A3E635' }],
        series: [{ data: 0.3, color: '#A3E635' }],
      }
      break
    case 'C':
    case 'D':
      riskLevelText.value = '中风险'
      riskLevelClass.value = 'text-orange-400'
      opts.value.title.name = '中风险'
      opts.value.title.color = '#F97316'
      chartData.value = {
        categories: [{ value: 0, color: '#F97316' }, { value: 1, color: '#F97316' }],
        series: [{ data: 0.6, color: '#F97316' }],
      }
      break
    case 'B':
    case 'E':
      riskLevelText.value = '高风险'
      riskLevelClass.value = 'text-red-500'
      opts.value.title.name = '高风险'
      opts.value.title.color = '#EF4444'
      chartData.value = {
        categories: [{ value: 0, color: '#EF4444' }, { value: 1, color: '#EF4444' }],
        series: [{ data: 0.9, color: '#EF4444' }],
      }
      break
    default:
      riskLevelText.value = '未知风险'
      riskLevelClass.value = 'text-gray-500'
      opts.value.title.name = '未知风险'
      opts.value.title.color = '#9CA3AF'
      chartData.value = {
        categories: [{ value: 0, color: '#9CA3AF' }, { value: 1, color: '#9CA3AF' }],
        series: [{ data: 0 }],
      }
  }
}

// 初始化和监听 riskLevel 的变化
onMounted(() => {
  riskLevel.value = props.data.risk_level
  setChartProperties(riskLevel.value)
})

watch(riskLevel, (newLevel) => {
  setChartProperties(newLevel)
})
</script>

<template>
  <view class="card">
    <view class="text-2xl font-bold" :class="riskLevelClass">
      <qiun-data-charts
        type="gauge"
        :opts="opts"
        :chart-data="chartData"
      />
    </view>
    <view class="mt-6">
      <LTitle title="信息解读" type="blue-green" />
      <view class="mt-4 rounded-lg bg-green-100/50 px-4 py-2 space-y-4">
        <view v-for="(item, index) in riskInfoList" :key="index" class="flex items-center justify-between">
          <text class="font-bold" :class="[item.class]">
            {{ item.level }}
          </text>
          <text class="text-gray-700">
            {{ item.description }}
          </text>
        </view>
      </view>
    </view>
  </view>
</template>
