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

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

const colorArrar = Object.keys(colorEnum);
const timeList = ref([
    '00:00',
    '01:00',
    '02:00',
    '03:00',
    '04:00',
    '05:00',
    '06:00',
    '07:00',
    '08:00',
    '09:00',
    '10:00',
    '11:00',
    '12:00',
    '13:00',
    '14:00',
    '15:00',
    '16:00',
    '17:00',
    '18:00',
    '19:00',
    '20:00',
    '21:00',
    '22:00',
    '23:00',
]);
const option = ref({});
let list = [];

const setOptions = () => {
    option.value = {
        xAxis: {
            type: 'category',
            data: timeList.value,
            boundaryGap: false,
            splitLine: {
                show: true,
                lineStyle: {
                    color: 'rgba(31, 99, 163, 0.2)',
                },
            },
            axisLine: {
                show: true,
                lineStyle: {
                    color: 'rgba(31, 99, 163, 0.1)',
                },
            },
            axisLabel: {
                color: '#7eb7fd',
                fontWeight: 'bold',
            },
        },
        yAxis: {
            type: 'value',
            splitLine: {
                show: true,
                lineStyle: {
                    color: 'rgba(31, 99, 163, 0.2)',
                },
            },
            axisLine: {
                show: true,
                lineStyle: {
                    color: 'rgba(31, 99, 163, 0.1)',
                },
            },
            axisLabel: {
                color: '#7eb7fd',
                fontWeight: 'bold',
            },
        },
        tooltip: {
            trigger: 'axis',
            backgroundColor: 'rgba(0, 0, 0, 0.6)',
            borderColor: 'rgba(147, 235, 248, 0.8)',
            textStyle: {
                color: '#fff',
            },
        },
        grid: {
            show: true,
            left: '20px',
            right: '20px',
            bottom: '25px',
            top: '35px',
            containLabel: true,
            borderColor: '#1f63a3',
        },
        legend: {
            show: true,
            icon: 'circle',
            right: 'center',
            top: 5,
            left: 'center',
            itemWidth: 12,
            textStyle: {
                color: 'rgb(85, 185, 216)',
            },
            data: list.map((item) => item.name),
        },
        series: list.map((item) => {
            return {
                name: item.name,
                type: 'line',
                data: item.value,
                symbol: 'none',
                smooth: true,
                color: keyColor(item.prop, 0.7),
            };
        }),
    };
};

const getAlarmTrendData = () => {
    console.log('执行请求AlarmTrend');
    return new Promise((resolve) => {
        setTimeout(() => {
            resolve([
                {
                    name: '子系统数',
                    value: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24],
                },
                {
                    name: '数据库',
                    value: [39, 2, 25, 8, 44, 19, 31, 12, 16, 43, 7, 26, 1, 37, 20, 5, 33, 48, 10, 36, 17, 50, 30, 15],
                },
                {
                    name: '主机',
                    value: [8, 22, 35, 1, 39, 16, 44, 10, 24, 4, 18, 32, 26, 47, 6, 3, 40, 21, 14, 33, 13, 49, 28, 42],
                },
                {
                    name: '存储',
                    value: [12, 5, 23, 41, 34, 7, 19, 29, 48, 2, 36, 15, 27, 3, 45, 20, 38, 11, 30, 46, 9, 25, 14, 50],
                },
            ]);
        }, 1000);
    });
};

const initFN = () => {
    getAlarmTrendData().then((result) => {
        list = result.map((item, index) => {
            return {
                ...item,
                prop: colorArrar[index],
            };
        });
        setOptions();
    });
};

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