<template>
    <ul class="system-health-ul">
        <li
            v-for="item in list"
            :key="item.name"
        >
            <v-chart
                v-if="JSON.stringify(item.option) != '{}'"
                :option="item.option"
            />
        </li>
    </ul>
</template>

<script setup>
import { ref, inject } from 'vue';
import { cptColor } from '../config';

const currentOrg = inject('currentOrg');
const list = ref();

const setOptions = () => {
    list.value.forEach((item) => {
        item.option = {
            series: [
                /*仪表盘图，做中间刻度线*/
                {
                    type: 'gauge',
                    radius: '100%',
                    startAngle: '0',
                    endAngle: '-359.99',
                    splitNumber: '60',
                    pointer: {
                        show: false,
                    },
                    title: {
                        show: false,
                    },
                    detail: {
                        show: false,
                    },
                    axisLine: {
                        lineStyle: {
                            width: 15,
                            opacity: 0,
                        },
                    },
                    axisTick: {
                        show: false,
                    },
                    splitLine: {
                        show: true,
                        length: 10,
                        lineStyle: {
                            color: cptColor(item.value, 0.5),
                            width: 2,
                            type: 'solid',
                        },
                    },
                    axisLabel: {
                        show: false,
                    },
                },
                /*内心原型图，展示整体数据概览*/
                {
                    name: item.name,
                    type: 'pie',
                    clockwise: true,
                    startAngle: 90,
                    radius: ['55%', '65%'],
                    emphasis: {
                        scale: false,
                    },
                    center: ['50%', '50%'],
                    data: [
                        {
                            value: item.value,
                            label: {
                                formatter: (params) => {
                                    return `{title|${params.seriesName}}\n{value|${params.value}%}`;
                                },
                                position: 'center',
                                show: true,
                                rich: {
                                    title: {
                                        fontSize: 18,
                                        fontWeight: 'normal',
                                        color: 'rgba(255,255,255,.6)',
                                        fontFamily: 'xxx字体',
                                    },
                                    value: {
                                        color: '#fff',
                                        fontSize: 36,
                                        fontWeight: 'bold',
                                        fontFamily: 'xxx字体',
                                        padding: [8, 0, 0, 0],
                                    },
                                },
                            },
                            itemStyle: {
                                color: cptColor(item.value),
                            },
                        },
                        {
                            value: 100 - item.value,
                            itemStyle: {
                                color: 'rgba(42,42,42,1)', // 未完成的圆环的颜色
                                label: {
                                    show: false,
                                },
                                labelLine: {
                                    show: false,
                                },
                            },
                            emphasis: {
                                color: 'rgba(42,42,42,1)', // 未完成的圆环的颜色
                            },
                        },
                    ],
                    labelLine: { show: false },
                    label: { show: false },
                },
            ],
        };
    });
};

const getMajorSystemHealthStatusData = () => {
    console.log('执行请求MajorSystemHealthStatus');
    return new Promise((resolve) => {
        setTimeout(() => {
            if (currentOrg.value.id === 'all') {
                resolve([
                    {
                        name: '重要系统',
                        value: 55,
                    },
                    {
                        name: '核心平台',
                        value: 75,
                    },
                    {
                        name: '关键网络',
                        value: 85,
                    },
                    {
                        name: '基础设置',
                        value: 95,
                    },
                ]);
            } else {
                resolve([
                    {
                        name: '重要系统',
                        value: 55,
                    },
                    {
                        name: '核心平台',
                        value: 75,
                    },
                    {
                        name: '关键网络',
                        value: 85,
                    },
                ]);
            }
        }, 1000);
    });
};

const initFN = () => {
    getMajorSystemHealthStatusData().then((res) => {
        list.value = res;
        setOptions();
    });
};

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

<style lang="scss" scoped>
.system-health-ul {
    display: flex;
    flex-wrap: wrap;
    height: calc(100% - 20px);

    li {
        width: 50%;
        height: 50%;
    }
}
</style>
