<template>
    <div>
        <div class="echarts" id="botdesignecharts"></div>
    </div>
</template>
<script>
import * as echarts from "echarts";
export default {
    props: {
        designData: {
            type: Object,
            default: () => ({})
        },
    },
    data() {
        return {
            timerId: null,
        };
    },
    watch: {
        designData(newVal) {
            if (newVal && newVal.projectProcess) {
                this.echarts();
            }
        },
    },
    mounted() {
        // this.echarts();
    },
    beforeUnmount() {
        clearInterval(this.timerId);
    },
    methods: {
        echarts() {
            const myChart = echarts.init(document.getElementById("botdesignecharts"));
            let chartData = [
                // { value: 20, label: { color: '#fff' } },
                // { value: 50, label: { color: '#fff' } },
            ];
            if (this.designData.projectProcess) {
                this.designData.projectProcess.map((value, index) => {
                    if (value.isExten == 1) {
                        chartData.push({ value: value.projectProcess, label: { color: '#f00', isExten: value.isExten } });
                    } else {
                        chartData.push({ value: value.projectProcess, label: { color: '#fff', isExten: value.isExten } });
                    }
                });
            }

            var option = {
                backgroundColor: 'rgba(0, 0, 0, 0)',
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '8%',
                    containLabel: true
                },
                xAxis: [{
                    type: 'category',
                    data: this.designData.projectName,
                    axisLine: {
                        show: true,
                        lineStyle: { color: "#D8D6D6", width: 1 }
                    },
                    axisTick: { show: false },
                    axisLabel: {
                        textStyle: { color: "#FFF" }, interval: 0, inside: false,
                        rotate: 10,
                    },
                }],
                yAxis: [{
                    type: 'value',
                    axisLabel: { formatter: '{value}%', color: "#FFF" },
                    axisLine: { show: false },
                    axisTick: { show: false },
                    splitLine: {
                        lineStyle: { type: 'dashed', color: 'rgba(216,214,214,0.5)' }
                    },
                    interval: 25,
                }],
                series: [{
                    type: 'bar',
                    data: chartData,
                    barWidth: 24,
                    label: {
                        show: true,
                        position: "top",
                        fontSize: 14,
                        // formatter: "{c}%",
                        formatter: function (params) {
                            const value = params.value;
                            if (params.data.label.isExten == 1) {
                                return `${value}%\n(已延期)`;
                            }
                            return `${value}%`;
                        },
                    },
                    itemStyle: {
                        normal: {
                            color: function (params) {
                                if (params.data.label.isExten == 1) {
                                    return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                        { offset: 0, color: '#FF6666' },
                                        { offset: 1, color: '#FF0000' }
                                    ]);
                                } else {
                                    return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                        { offset: 0, color: '#3CFFCD' },
                                        { offset: 1, color: '#25D1FF' }
                                    ]);
                                }
                            },
                            opacity: 1
                        }
                    }
                }]
            };

            myChart.setOption(option);
            window.addEventListener('resize', () => myChart.resize());
        }
    }
};
</script>
<style scoped lang="scss">
.echarts {
    width: 98%;
    height: 280px;
}
</style>