<template>
    <div class="_runnings">
        <HeadlineTag type="right" value="业务完成进度"></HeadlineTag>
        <div class="_runnings_mains" :style="{ '--heightSume': heightcon + 'px' }">
            <div ref="chartRef" style="width: 100%; height: 100%;"></div>
        </div>
    </div>
</template>

<script setup>
import { ref } from "vue";
import * as echarts from 'echarts';
import HeadlineTag from '@/components/HeadlineTag'
const props = defineProps({
    resultData: {
        type: Object,
        default: {}
    }
})

const chartRef = ref(null);
let chart = null;
const datas = [
    { name: "工学院", value: "32", value1: "258", value2: "82" },
    { name: "艺术学院", value: "37", value1: "265", value2: "98" },
    { name: "教育学院", value: "94", value1: "582", value2: "550" },
    { name: "法学院", value: "73", value1: "324", value2: "235" },
    { name: "文学院", value: "37", value1: "321", value2: "120" },
    { name: "统计学院", value: "74", value1: "350", value2: "260" },
    { name: "信息学院", value: "69", value1: "429", value2: "294" },
    { name: "经济学院", value: "65", value1: "545", value2: "354" }
];
const xData = datas.map(item => item.value1);
const yData = datas.map(item => item.name);
const zData = datas.map(item => item.value2);
const pData = datas.map(item => item.value);
//const max = Math.ceil(Math.max(...yData) * 1.2);
const max = 100;
const maxData = [max, max, max, max, max, max, max, max, max, max];
const handleResize = () => {
    if (chart) {
        chart.resize();
    }
};
onMounted(() => {
    if (chartRef.value) {
        chart = echarts.init(chartRef.value);
        const option = {
            grid: {
                left: "10%",
                right: "30%",
                bottom: "3%",
                top: "3%",
                containLabel: false
            },
            xAxis: [
                {
                    show: false,
                },
                {
                    show: false,
                    splitLine: {
                        show: false
                    }
                }
            ],
            yAxis: [
                {
                    show: true,
                    data: yData,
                    offset: 40,
                    position: "right",
                    axisLabel: {
                        lineHeight: 0,
                        verticalAlign: "bottom",
                        fontSize: 14,
                        color: "#ffffff",
                        formatter: "{value}"
                    },
                    axisLine: {
                        show: false
                    },
                    splitLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    }
                },
                {
                    show: true,
                    data: zData,
                    offset: 5,
                    position: "right",
                    axisLabel: {
                        lineHeight: 0,
                        verticalAlign: "bottom",
                        fontSize: 14,
                        color: "#8CEA00",
                        formatter: "{value}"
                    },
                    axisLine: {
                        show: false
                    },
                    splitLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    }
                }
            ],
            series: [{
                name: "进度",
                show: true,
                type: "bar",
                barGap: "-100%",
                xAxisIndex: 1,
                barWidth: 20,
                itemStyle: {
                    borderRadius: 4,
                    color: {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 1,
                        y2: 0,
                        colorStops: [
                            {
                                offset: 0,
                                color: '#148BCE', // 0% 处的颜色
                            },
                            {
                                offset: 1,
                                color: '#73E3FF', // 0% 处的颜色
                            },
                        ],
                        global: false, // 缺省为 false
                    }
                },
                label: {
                    show: true,
                    position: 'insideRight',
                    formatter: '{c}%',
                    offset: [-10, 2],
                    color: '#fff'
                },
                labelLine: {
                    show: false
                },
                z: 2,
                data: pData,
                animationDelay: 1000,
                animationDuration: 1000
            }, {
                name: "百分比",
                z: 1,
                show: true,
                type: "bar",
                xAxisIndex: 1,
                barGap: "-100%",
                barWidth: 20,
                itemStyle: {
                    borderRadius: 4,
                    color: "rgba(13, 55, 78, 1)"
                },
                label: {
                    show: true,
                    verticalAlign: "middle",
                    position: "left",
                    fontSize: 14,
                    color: "#fff",
                    formatter: function (data) {
                        return xData[data.dataIndex];
                    }
                },
                data: maxData
            }
            ]
        };
        chart.setOption(option);
    }
    window.addEventListener('resize', handleResize);
});

watch(() => props.resultData, (newVal) => {
    if (chart) {
        let dataArr = []
        let arr = Object.entries(newVal)
        arr.forEach(item => {
            dataArr.push(item[1])
        })
        // chart.setOption({
        //     series: [{
        //         name: '阅读量',
        //         data: dataArr,
        //     }],
        // })
    }
}, { deep: true, immediate: true } // 开启深度监听
)
onUnmounted(() => {
    window.removeEventListener('resize', handleResize);
    if (chart) {
        chart.dispose();
    }
});
</script>
<style lang="scss" scoped>
._runnings {
    display: flex;
    align-items: center;
    flex-direction: column;

    &_mains {
        flex: 1;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-around;

        &_left {
            flex-shrink: 0;
            width: 32%;
            height: var(--heightSume);
            position: relative;

            &_tuan {
                width: 100%;
                height: 100%;
                background-size: 80% 80%;
                background-position: center;
                background-repeat: no-repeat;
            }

            &_conter {
                position: absolute;
                left: 0;
                top: 0;
                flex-shrink: 0;
                width: 100%;
                height: 100%;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                color: #fff;

                &_num {
                    font-size: 18px;
                }

                &_text {
                    font-size: 12px;
                }
            }
        }

        &_right {
            margin-left: 10px;
            flex: 1;
            color: #fff;

            &_item {
                display: flex;
                align-items: center;
                gap: 40px;
                padding: 5px 0;

                &_tuan {
                    display: flex;
                    align-items: center;

                    &_flag {
                        display: block;
                        width: 7px;
                        height: 7px;
                        border-radius: 50%;
                        margin-right: 10px;
                    }
                }

                &__txt {
                    font-size: 24px;
                }
            }
        }


    }
}

@keyframes scanning {
    to {
        transform: rotate(1turn);
    }
}
</style>