import * as echarts from "echarts";
import 'echarts-gl'
// import "echarts-liquidfill/src/liquidFill.js";// ecahrts的水球

export default class Common {
    $el = {};
    $e = {};
    chartOption = {};
    myChart = {};
    option = {};
    legendIcon = "path://M-65,40a8.009,8.009,0,0,1-8-8V6a8.008,8.008,0,0,1,8-8h26a8.009,8.009,0,0,1,8,8V32a8.01,8.01,0,0,1-8,8ZM-67,6V32a2,2,0,0,0,2,2h26a2,2,0,0,0,2-2V6a2,2,0,0,0-2-2H-65A2,2,0,0,0-67,6Zm5,25a2,2,0,0,1-2-2V9a2,2,0,0,1,2-2h20a2,2,0,0,1,2,2V29a2,2,0,0,1-2,2Z";

    colors = [
        "#FF942C",
        "#0C6CE0",
        "#00C9FF",
        "#A059CC",
        "#f7b500",
        "#999999",
        "#dbdbdb",
        "#65bdff",
    ];

    constructor(el, option) {
        // 设定容器定位，不然里面tips 瞎几把飘
        el.style.position = "relative";
        this.$el = el;
        this.$e = echarts;//将echrts的相关属性赋值给$e
        this.option = option;
        // console.log('999',this.$e);// 打印的是echarts的相关内容

    }

    /***
     * 16进制转rgba
     * @param colors
     * @param opacity
     * @returns {string}
     */
    colorRgb(colors, opacity) {
        // 16进制颜色值的正则
        const reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/;
        // 把颜色值变成小写
        const color = colors.toLowerCase();

        if (reg.test(color)) { // 正则匹配
            const colorChange = [];

            for (let i = 1; i < 7; i += 2) {
                colorChange.push(parseInt("0x" + color.slice(i, i + 2)));  // parseInt解析字符串，返回一个整数
            }
            return `rgba(${colorChange.join(",")},${opacity})`;
        } else {
            return color;
        }
    }

    /***
     * 图表的tips
     * @param params
     * @returns {string}
     */
    setFormatter(params) {
        return `<div style="width:300px;padding: 10px 20px;">
            <div style="opacity: 0.8;font-size: 12px;padding-bottom: 8px;color: #000000;">${params[0]?.name || ""}</div>
            ${params.map((item) => {
            return `
                        <div style="display:flex;justify-content:space-between;margin-top: 8px;font-size: 12px;">
                          <div style="font-size: 16px;color: ${typeof item.color === "string" ? item.color : item.color.colorStops[0].color};font-weight: bold;">${item.data.value}</div>
                          <div style="opacity: 0.4;font-size: 12px;color: #000000;">${item.seriesName}</div>
                        </div>
                        `;
        }).join("")}
          </div>`;
    }


    /***
     * 重载charts
     * @param option
     */
    reloadOption(option) {
        this.option = { ...this.option, ...option }; // 通过展开运算符，将两个对象合并为一个
        this.setCharts();
        this.myChart.setOption(this.chartOption, true);
        setTimeout(() => {
            this.myChart.resize();
        });
    }

    /***
     * 随机获取颜色
     */

    static getRandomColor() {
        return "#" + ("00000" + (Math.random() * 0x1000000 << 0).toString(16)).slice(-6);
    }

    destroy() {
        this.$el.innerHTML = "";
        this.$el.setAttribute("_echarts_instance_", "");
    }
}