<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 positionArrar = [[[30, 20]], [[58, 50]], [[40, 100]], [[10, 95]], [[10, 3]], [[20, 10]], [[0, 1]], [[50, 7]]];
const option = ref({});
let list = [];

const setOptions = () => {
    option.value = {
        grid: {
            right: '40%',
        },
        tooltip: {
            show: false,
        },
        xAxis: {
            show: false,
        },
        yAxis: {
            show: false,
        },
        legend: {
            show: true,
            orient: 'vertical',
            icon: 'circle',
            right: 20,
            top: 'center',
            itemGap: 20,
            textStyle: {
                color: 'rgb(85, 185, 216)',
            },
            data: list.map((item) => item.name),
        },
        series: [
            ...list.map((item) => {
                return {
                    name: item.name,
                    type: 'scatter',
                    data: item.position,
                    symbolSize: item.scaleValue,
                    itemStyle: {
                        color: keyColor(item.prop),
                    },
                    label: {
                        show: true,
                        formatter: item.value.toString(),
                        color: '#fff',
                        fontSize: 18,
                    },
                };
            }),
        ],
    };
};

const scaleObjectArrayTo100 = (arr) => {
    const max = Math.max(...arr.map((item) => item.value));
    const scaleArray = arr.map((item) => ({
        ...item,
        scaleValue: (item.value / max) * 100,
    }));
    return scaleArray.sort((a, b) => b.scaleValue - a.scaleValue);
};

const getResourceTypeData = () => {
    console.log('执行请求ResourceType');
    return new Promise((resolve) => {
        setTimeout(() => {
            resolve([
                {
                    name: '应用实例数',
                    value: 3,
                },
                {
                    name: '数据库数',
                    value: 5,
                },
                {
                    name: '主机数',
                    value: 12,
                },
                {
                    name: '子系统数',
                    value: 8,
                },
            ]);
        }, 1000);
    });
};

const initFN = () => {
    getResourceTypeData().then((result) => {
        result = scaleObjectArrayTo100(result);
        list = result.map((item, index) => {
            return {
                name: item.name,
                position: positionArrar[index],
                prop: colorArrar[index],
                value: item.value,
                scaleValue: item.scaleValue,
            };
        });
        setOptions();
    });
};

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