<template>
    <div>
        <div :style="height" style="width: 100%" ref="chartRef"></div>
    </div>
</template>
<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import echarts from '@/components/echarts/echarts'
import { useDictData } from '@/stores/dictData'
import { color } from '@/components/echarts/color'
import { mainHeight } from '@/utils/layout'
import { useConfig } from '@/stores/config'
const config = useConfig()
const height = mainHeight(330, 3)
const chartRef = ref<HTMLDivElement>()
const info = (item: any) => {
    let chart = echarts.init(chartRef.value as HTMLDivElement)
    let everyDepartment = {
        stages: [
            { name: '在线率', max: 100 },
            { name: '合格率', max: 100 },
            { name: '完整率', max: 100 }
        ],
        scores: [item.onLineRate, item.passRate, item.integrityRate]
    }
   
    function contains(arr, obj) {
        var i = arr.length
        while (i--) {
            if (arr[i].name === obj) {
                return i
            }
        }
        return false
    }

    let option = {
        backgroundColor: '',
        color: ['#fff'],
        radar: {
            center: ['50%', '65%'],
            radius: '80%',
            triggerEvent: true,
            name: {
                rich: {
                    a: {
                        color: '#000',
                        fontSize: 14,
                        lineHeight: 20
                    },
                    b: {
                        color: config.layout.elementUiPrimary[0],
                        fontSize: 16,
                        align: 'center'
                    },
                    triggerEvent: true
                },
                formatter: (a, index) => {
                    let values = a.length > 6 ? a.slice(0, 6) + '...' : a
                    let i = contains(everyDepartment.stages, a) // 处理对应要显示的样式
                    return `{a| ${values}}{b| ${(everyDepartment.scores[i])}%}`
                }
            },
            indicator: everyDepartment.stages,
            startAngle: 90,
            splitNumber: 5,
            splitArea: {
                areaStyle: {
                    color: ['#FFFFFF', '#F5F9FF'].reverse()
                }
            },
            axisLabel: {
                show: false
            },
            axisLine: {
                show: true,
                lineStyle: {
                    color: '#D2E4F8'
                }
            },
            splitLine: {
                show: true,
                lineStyle: {
                    color: '#D2E4F8'
                }
            }
        },

        series: [
            {
                type: 'radar',
                // 外线框
                symbol: 'none',
                areaStyle: {
                    normal: {
                        color: `${config.layout.elementUiPrimary[0]}69`
                    }
                },
                itemStyle: {
                    color: config.layout.elementUiPrimary[0]
                },

                data: [
                    {
                        value: everyDepartment.scores
                    }
                ]
            }
        ]
    }

    chart.setOption(option)
    window.addEventListener('resize', () => {
        chart.resize() // 调用 resize 方法
    })
}
defineExpose({
    info
})
</script>
<style lang="scss" scoped></style>
