<template>
    <div :id="props.ids" class="echartDiv"></div>
</template>

<script setup>
import * as echarts from 'echarts'
import { onMounted, toRefs, ref, reactive, defineProps, watch, defineEmits, } from 'vue'
import { chartAdaptation } from "@/utils/tools";
const emits = defineEmits(["clickOrgId"]);
const isShowwqd = ref(true)
const isShowqd = ref(true)
// 数据
const props = defineProps({
    barNum: {
        type: Array,
        default: []
    },
    barTitle: {
        type: Array,
        default: []
    },
    loadingshow: {
        type: Boolean,
        default: false
    },
    ids: {
        type: String,
        default: "bars"
    }
});
//挂载
onMounted(() => {
    getBin(props.barTitle, props.barNum);
})
watch(
    () => props.barNum,
    (val) => {
        if (val) {

            getBin(props.barTitle, props.barNum);
        }
    },
    { deep: true }
);
const getBin = (data, twodata) => {
    const chartDom = document.getElementById(props.ids);
    var myChart = echarts.init(chartDom);
    var option;
    // 指定图表的配置项和数据
    option = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow', // 默认为直线，可选为：'line' | 'shadow'
            },
            formatter: function (parms) {
                var str = parms[0].axisValue + '</br>' + '签订率：' + parms[0].value + '%'
                return str
            },
        },
        legend: {
            textStyle: {
                color: "#319177",
                fontWeight: 600,
                fontSize: 16
            },
            triggerEvent: false//取消点击事件
        },

        textStyle: {
            color: '#333',
        },
        color: ['#7BA87B', '#7badf4'],
        grid: {
            top: "10%",
            left: "3%",
            right: "4%",
            bottom: "13%",
            width: "95%", // 宽度
            height: "90%", // 高度
            containLabel: true
        },
        xAxis: {
            type: 'category',
            data: data,
            axisLine: {
                lineStyle: {
                    color: '#333',
                },
            },
            axisTick: {
                show: false,
            },
            axisLabel: {
                //坐标轴刻度标签的相关设置。
                formatter: function (params) {
                    var newParamsName = ""; // 最终拼接成的字符串
                    var paramsNameNumber = params.length; // 实际标签的个数
                    var provideNumber = 2; // 每行能显示的字的个数
                    var rowNumber = Math.ceil(paramsNameNumber / provideNumber); // 换行的话，需要显示几行，向上取整
                    /**
                     * 判断标签的个数是否大于规定的个数， 如果大于，则进行换行处理 如果不大于，即等于或小于，就返回原标签
                     */
                    // 条件等同于rowNumber>1
                    if (paramsNameNumber > provideNumber) {
                        /** 循环每一行,p表示行 */
                        for (var p = 0; p < rowNumber; p++) {
                            var tempStr = ""; // 表示每一次截取的字符串
                            var start = p * provideNumber; // 开始截取的位置
                            var end = start + provideNumber; // 结束截取的位置
                            // 此处特殊处理最后一行的索引值
                            if (p == rowNumber - 1) {
                                // 最后一次不换行
                                tempStr = params.substring(start, paramsNameNumber);
                            } else {
                                // 每一次拼接字符串并换行
                                tempStr = params.substring(start, end) + "\n";
                            }
                            newParamsName += tempStr; // 最终拼成的字符串
                        }
                    } else {
                        // 将旧标签的值赋给新标签
                        newParamsName = params;
                    }
                    //将最终的字符串返回
                    return newParamsName;
                }
            }
        },
        yAxis: {
            type: 'value',
            axisLine: {
                show: true,
                lineStyle: {
                    color: '#B5B5B5',
                },
            },
            splitLine: {
                lineStyle: {
                    // 使用深浅的间隔色
                    color: ['#B5B5B5'],
                    type: 'dashed',
                    opacity: 0.5,
                },
            },
            axisLabel: {},
        },
        series: [
            {
                name: twodata.name,
                data: twodata.data,
                symbolOffset: [50, '-50%'],
                type: "bar",
                stack: "Ad",
                barWidth: 35,
                // barMaxWidth: 'auto',
                emphasis: {
                    focus: "series"
                },
                label: {
                    normal: {
                        show: true,//开启显示
                        position: 'top',//柱形上方
                        textStyle: { //数值样式
                            color: twodata.color
                        },
                        formatter: '{c}%',//显示百分号
                    },

                },

                itemStyle: {
                    color: {
                        type: 'linear',
                        global: false,
                        colorStops: [
                            {
                                offset: 0,
                                color: '#5EA1FF',
                            },
                            {
                                offset: 1,
                                color: '#90BEFF',
                            },
                        ],
                    },

                },
            },
            {
                data: twodata.data1,
                type: 'pictorialBar', //pictorialBar(象形柱图)
                barMaxWidth: 35,
                symbol: 'diamond',//菱形
                symbolOffset: [-50, '50%'],//图形偏移[x轴，y轴]，不确定的话，可以微调，本实例x轴叠加了柱状之间的间距[-7+(间距7/2),y轴]
                symbolPosition: 'start', //椭圆位置，默认'start'，在最底下，end是最上面
                symbolSize: isShowwqd.value ? [40, 15] : [0.0],//椭圆的大小[宽，高]
                zlevel: 2,//图形的层级，控制图形的前后顺序，z值小的图形会被z值大的图形覆盖
            },
            {
                data: twodata.data,
                type: 'pictorialBar',
                barMaxWidth: 35,
                symbolPosition: 'end',
                display: false,
                symbol: 'diamond',
                symbolOffset: [0, '-50%'],
                symbolSize: isShowwqd.value ? [40, 15] : [0.0],
                zlevel: 2,
            },
        ]
    };
    //点击事件
    myChart.on("click", function (params) {
        emits("clickOrgId", params);
    });

    const legendSelected = {};
    //   myChart.getOption().legend.data.forEach(name => {
    //     legendSelected[name] = false; // 所有图例都设置为不可点击
    //   });
    //legend的点击事件
    myChart.on("legendselectchanged", function (e) {
        var option = this.getOption();
        option.legend[0].selected[e.name] = true;//相当于取消点击事件
        this.setOption(option)
    })
    // 使用刚指定的配置项和数据显示图表。
    option && myChart.setOption(option);
    //自适应
    chartAdaptation(myChart);
}
</script>

<style lang='scss' scoped>
.echartDiv {
    width: 100%;
    height: 100%;
}
</style>
