<template>
    <div class="person_box">
        <div ref="chartAccess" style="width: 100%;height: 100%;"></div>
    </div>
</template>

<script setup>
import * as echarts from 'echarts'
const props = defineProps({
    resultData: {
        type: Object,
        default: {}
    }
})
const chartAccess = ref(null);
let chartDom = null;
const initAccess = (dataVal) => {
    const demoData = dataVal
    if (!chartDom) {
        chartDom = echarts.init(chartAccess.value);
    }
    let option = {
        series: (function () {
            var result = [];
            demoData.forEach(function (item) {
                result.push(
                    {
                        type: 'pie',
                        name: '内部黑色圆底',
                        opacity: 1,
                        radius: ['0', '34%'],
                        center: ['50%', '50%'],
                        hoverAnimation: false,
                        itemStyle: {
                            shadowColor: '#ffffff',
                            shadowBlur: 20
                        },
                        z: 5,
                        data: [
                            {
                                value: demoData[0].value,
                                unit: demoData[0].unit,
                                itemStyle: {
                                    normal: {
                                        color: 'black',
                                        opacity: 1,
                                    },
                                },
                                label: {
                                    show: true,
                                    position: 'center',
                                    color: 'white',
                                    formatter: [`{a|${demoData[0].value}}`, `{b|${demoData[0].unit}}`].join('\n'),
                                    rich: {
                                        a: {
                                            fontSize: 28,
                                            color: '#ffffff'
                                        },
                                        b: {
                                            fontSize: 14
                                        }
                                    }

                                },
                            },
                        ],
                        labelLine: {
                            show: false,
                        },
                    },
                    {
                        type: 'gauge',
                        name: '核心仪表盘',
                        radius: '90%',
                        z: 1,
                        splitNumber: 9,
                        min: 0,
                        max: 450,
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: [[1, '#FFDFD4']],
                                width: 1,
                                shadowColor: 'rgba(103, 194, 58)',
                                shadowBlur: 10
                            },
                        },
                        axisLabel: {
                            distance: 3,
                            textStyle: {
                                color: '#fff',
                                fontSize: '12',
                                fontWeight: 20
                            }
                        },
                        splitLine: {
                            show: true,
                            length: 8,
                            lineStyle: {
                                color: "#FFDFD4",
                                width: 0.5
                            }
                        },
                        pointer: {
                            z: -1,
                            show: true,
                            width: 2,
                            length: '100%'
                        },
                        itemStyle: {
                            color: 'white'
                        },
                        progress: {
                            z: -1,
                            show: true,
                            width: 45,
                            itemStyle: {
                                color: new echarts.graphic.LinearGradient(
                                    0, 1, 1, 0, [{
                                        offset: 0,
                                        color: 'rgba(103, 194, 58,0)',
                                    }, {
                                        offset: 0.7,
                                        color: 'rgba(103, 194, 58,0.5)',
                                    },
                                    {
                                        offset: 1,
                                        color: 'rgba(103, 194, 58,0.9)',
                                    }
                                ]
                                )
                            }
                        },
                        detail: {
                            show: false
                        },
                        title: {//默认为name
                            show: true,
                            fontSize: 16,
                            color: 'white',
                            offsetCenter: [0, '70%']
                        },
                        data: demoData
                    },
                );
            });
            return result;
        })()
    };
    chartDom.setOption(option)
};
watch(() => props.resultData, (newVal) => {
    if (chartDom) {
        const demoData = [{
            name: '安全等级',
            value: newVal.SecurityLevel,
            unit: '分'
        }];
        initAccess(demoData)
    }
}, { deep: true, immediate: true } // 开启深度监听
)
// 生命周期
onMounted(() => {
    const demoData = [{
        name: '安全等级',
        value: 0,
        unit: '分'
    }];
    initAccess(demoData)
});
// 窗口自适应
window.addEventListener('resize', () => {
    chartDom?.resize();
});
</script>

<style scoped lang="scss">
.person_box {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
}
</style>