<script>
/**
 * vs-Bar-brighten 2022-10-08
 *
 * width 图表宽度 330
 * height 图表高度 280
 * data 数据 []
 * top3Color 前三label颜色，按顺序对应1，2，3  ["#f36c6c", "#e6cf4e", "#20d180"]
 * normalColor 非前三label统一颜色  #0093ff
 * barWidth 柱子宽度 8 //建议在[5~15]区间选择
 * labelWdith 左侧label宽度 80 //该参数是帮助label文字较多时进行样式优化 多余部分省略号代替
 * 
 * @chartClick 图表点击触发回调 返回params参数
 * 
 *  setEchartsRefresh echarts刷新 事件
 */
export default {
    name: "vs-bar-brighten",
};
</script>
<script setup>
import {
    ref,
    reactive,
    inject,
    onMounted
} from "vue";
const echarts = inject("$echarts");

const props = defineProps({
    width: {
        type: Number,
        default: 330,
    },
    height: {
        type: Number,
        default: 280,
    },
    data: {
        type: Array,
        default: () => [
            { name: "事项二", value: 678 },
            { name: "事项一", value: 500 },
            { name: "事项四", value: 476 },
            { name: "事项三", value: 388 },
        ]
    },
    top3Color: {
        type: Array,
        default: () => ["#f36c6c", "#e6cf4e", "#20d180"]
    },
    normalColor: {
        type: String,
        default: '#0093ff'
    },
    labelWdith: {
        type: Number,
        default: 80,
    },
    barWidth: {
        type: Number,
        default: 8,
    }
});


const style = reactive({
    width: props.width + 'px',
    height: props.height + 'px',
})

const emit = defineEmits(["chartClick"]);

function getArrByKey(data, k) {
    let key = k || "value";
    let res = [];
    if (data) {
        data.forEach(function (t) {
            res.push(t[key]);
        });
    }
    return res;
}

function getSymbolData(data) {
    let arr = [];
    for (var i = 0; i < data.length; i++) {
        arr.push({
            value: data[i].value,
            symbolPosition: "end",
        });
    }
    return arr;
}

const echartRef = ref(null)

let _echarts = null;
const init = function () {
    if (_echarts !== null) {
        _echarts.dispose();
        _echarts = null
    }
    _echarts = echarts.init(echartRef.value);
    let option = {
        grid: {
            top: "2%",
            right: "17%",
            left: props.labelWdith + 20,
            bottom: "8%",
        },
        tooltip: {
            trigger: "item",
        },
        xAxis: {
            show: false,
        },
        yAxis: [
            {
                triggerEvent: true,
                show: true,
                inverse: true,
                data: getArrByKey(props.data, "name"),
                axisLine: {
                    show: false,
                },
                splitLine: {
                    show: false,
                },
                axisTick: {
                    show: false,
                },
                axisLabel: {
                    width: props.labelWdith,
                    overflow: 'truncate',
                    margin: props.labelWdith,
                    fontSize: 12,
                    align: "left",
                    color: "#fff",
                    lineHeight: 10,
                    rich: {
                        a1: {
                            color: "#fff",
                            backgroundColor: props.top3Color[0],
                            borderRadius: 2,
                            padding: [2, 4]
                        },
                        a2: {
                            color: "#fff",
                            backgroundColor: props.top3Color[1],
                            padding: [2, 4],
                            borderRadius: 2,
                        },
                        a3: {
                            color: "#fff",
                            backgroundColor: props.top3Color[2],
                            padding: [2, 4],
                            borderRadius: 2,
                        },
                        b: {
                            color: "#fff",
                            backgroundColor: props.normalColor,
                            padding: [2, 4],
                            borderRadius: 2,
                        },
                        c: {
                            align: "left",
                        },
                    },
                    formatter: function (params) {
                        var index = props.data.map((item) => item.name).indexOf(params);
                        index = index + 1;
                        if (index - 1 < 3) {
                            return [
                                "{a" + index + "|" + index + "}" + "  " + params,
                            ].join("\n");
                        } else {
                            return ["{b|" + index + "}" + "  " + params].join("\n");
                        }
                    },
                },
            },
            {
                triggerEvent: true,
                show: true,
                inverse: true,
                data: getArrByKey(props.data, "name"),
                axisLine: {
                    show: false,
                },
                splitLine: {
                    show: false,
                },
                axisTick: {
                    show: false,
                },
                axisLabel: {
                    interval: 0,
                    shadowOffsetX: "-20px",
                    color: ["#fff"],
                    align: "left",
                    verticalAlign: "center",
                    lineHeight: 40,
                    fontSize: 13,
                    fontWeight: 'bold',
                    formatter: function (value, index) {
                        return props.data[index].value;
                    },
                },
            },
        ],
        series: [
            {
                type: "pictorialBar",
                symbol:
                    "image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADoAAAA6CAMAAADWZboaAAAAZlBMVEUAAABe3uVe3+Vf3uVf3+Zf3uVg3+Zg3+Zf3+Vi4OZh4OZg3+Z86/Bh3+Zi4Odj4Odi4OZ86/B76/B86/Bj4ed56+9x5+xn4umB7/N87PB36e+A7/N+7fF/7vJ/7vJ+7fGA7/OB7/PReX+lAAAAIXRSTlMABQkVDREmIhk3MR10LEFFPHh7cUprXE35h2XnqMLAp+mHAG9cAAAB5ElEQVRIx83WjU7CMBQFYIoiKMqU/XUboHv/l/Tce7t2XamDNSacETEmX86tlK2rx4py150o+MstMBLwWRfHKo6JCVxLnvmFGBjFQ58oF1//sUZhGy/ClSTWObgnL4O+bkeN4nY2okfNMbkRt9/vtxz8InoTsWplJSCzFxPmO8+GpSIByX3YQAuGDWtRKhKjCnxDXhF6Z4yxnZ20Wgko7BMRDmxtSGVaI4kdTIgb+zTYoJQlIMlDlmUFgrcDWWC201qSayqlTkiCddWWeV62VU0YlnpRi9VOKaSUsiyq/N0krwq2Ugt7lVpZl5BfHNiytjagMi+XYp0kCR45hMlivVQrE/uU5pXSrCB5bM6d1t2lOZItMqmliT3q5uVxqxzyW/ccfYLNKx7ZTeykMvNyac2yt2Fbc61MHLSC0rwoxbiNdlQ3GBm1NLHQsHUrtEXppR/ljNpW6DbSCoqlFiVoN6YdaFlgsSFVPs1BdT8OaB5QyQzVcaqWDows/zepxR8ObLglTrdtCRVuRNj4Rrxh+//0ke2f8KVL+Kon3GCSbmsJN9OUW3j6g0Ns+LgCij2u0h+Sghc8mlMPBMgdx5DFh59VmOVHrvmDnoNxCz3J7MFWsMuaLyR089xz/xhlfijvwutR8gv3zk6BLUUeCgAAAABJRU5ErkJggg==",
                symbolSize: [37 + props.barWidth, 37 + props.barWidth],
                symbolOffset: [22, 0],
                z: 12,
                itemStyle: {
                    normal: {
                        color: "#fff",
                    },
                },
                data: getSymbolData(props.data),
            },
            {
                type: "bar",
                yAxisIndex: 0,
                data: props.data,
                barWidth: props.barWidth,
                itemStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(1, 0, 0, 1, [
                            {
                                offset: 0,
                                color: "rgba(0, 216, 255, 1)",
                            },

                            {
                                offset: 1,
                                color: "rgba(0, 138, 255, 0)",
                            },
                        ]),
                        barBorderRadius: 10,
                    },
                },
                showBackground: true,
                backgroundStyle: {
                    borderRadius: 10,
                },
            },
        ],
    };

    _echarts.setOption(option);

    _echarts.on('click', (params) => {
        emit("chartClick", params);
    })
}

onMounted(() => {
    init()
})

//图表刷新
const setEchartsRefresh = function () {
    init()
};

defineExpose({
    setEchartsRefresh
});
</script>

<template>
    <div :style="style" class="vsBarBrighten" ref="echartRef"></div>
</template>

<style  lang="scss" scope>
$main: var(--main);
$auxiliary: var(--auxiliary);
$light: var(--light);

.vsBarBrighten {}
</style>
