<template>
    <v-chart
        v-if="JSON.stringify(option) != '{}'"
        :option="option"
    />
</template>

<script setup>
import { ref } from 'vue';
import { keyColor } from '../config';

const option = ref({});
let list = [];
let totalNum = 0;

const setOptions = () => {
    option.value = {
        title: {
            top: 'center',
            left: '31.5%',
            text: ['{name|总数}', `{value|${totalNum}}`].join('\n'),
            textStyle: {
                textAlign: 'center',
                rich: {
                    name: {
                        fontSize: 14,
                        color: 'rgba(255,255,255,0.6)',
                    },
                    value: {
                        fontSize: 24,
                        fontWeight: 'bold',
                        color: '#fff',
                        lineHeight: 20,
                        padding: [12, 0, 0, 0],
                    },
                },
            },
        },
        tooltip: {
            trigger: 'item',
            backgroundColor: 'rgba(0,0,0,0.6)',
            borderColor: 'rgba(147,235,248,0.8)',
            textStyle: {
                color: '#fff',
            },
        },
        legend: {
            show: true,
            orient: 'vertical',
            icon: 'circle',
            right: 20,
            top: 'center',
            itemGap: 20,
            textStyle: {
                color: 'rgb(85,185,216)',
            },
            formatter: (b) => `${b}:${list.find((item) => item.name === b).value}`,
        },
        series: [
            {
                name: '告警统计',
                type: 'pie',
                radius: ['40%', '80%'],
                center: ['35%', '50%'],
                label: {
                    show: false,
                },
                itemStyle: {
                    borderColor: '#fff',
                    borderWidth: 2,
                    borderRadius: 6,
                },
                labelLine: {
                    show: false,
                },
                tooltip: {
                    show: true,
                },
                data: [
                    ...list.map((item) => ({
                        name: item.name,
                        value: item.value,
                        itemStyle: {
                            color: keyColor[item.prop],
                        },
                    })),
                ],
            },
        ],
    };
};

const getAlarmStatisticsData = () => {
    console.log('执行请求AlarmStatistics');
    return new Promise((resolve) => {
        setTimeout(() => {
            resolve({
                critical: 17,
                major: 12,
                warning: 3,
                info: 2,
            });
        }, 1000);
    });
};

const initFN = () => {
    getAlarmStatisticsData().then((result) => {
        let dataList = [];
        for (const key in result) {
            dataList.push({
                name: key,
                value: result[key],
                prop: key,
            });
            totalNum += result[key];
        }
        list = dataList;
        setOptions();
    });
};

defineExpose({
    name: 'AlarmStatistics',
    init: initFN,
});
</script>
