import * as echarts from "echarts";
import store from '../../store/index'

export function realTimeLine(id, data,pageId) {
    var chartDom = document.getElementById(id);
    var myChart = echarts.init(chartDom);
    chartDom.removeAttribute('_echarts_instance_')//解决切换页面echarts不显示的问题
    var Xdata = []
    var colorList1 = ['rgba(0, 187, 136, 1)', 'rgba(252, 125, 106, 1)', 'rgba(252, 223, 39, 1)', 'rgba(68, 214, 232, 1)',
        'rgba(69, 224, 155, 1)', 'rgba(82, 188, 255, 1)', 'rgba(214, 162, 255, 1)', 'rgba(255, 192, 111, 1)', 'rgba(255, 156, 154, 1)', 'rgba(255, 156, 154, 1)']
    var colorList = [new echarts.graphic.LinearGradient(
        0,
        0,
        0,
        1,
        [
            {
                offset: 0,
                color: "rgba(0, 187, 136, 0.50)",
            },
            {
                offset: 0.8,
                color: "rgba(0, 187, 136, 0)",
            },
        ],
        false
    ),
    new echarts.graphic.LinearGradient(
        0,
        0,
        0,
        1,
        [
            {
                offset: 0,
                color: "rgba(252, 125, 106, 0.50)",
            },
            {
                offset: 0.8,
                color: "rgba(252, 125, 106, 0)",
            },
        ],
        false
    ), new echarts.graphic.LinearGradient(
        0,
        0,
        0,
        1,
        [
            {
                offset: 0,
                color: "rgba(252, 223, 39, 0.50)",
            },
            {
                offset: 0.8,
                color: "rgba(252, 223, 39, 0)",
            },
        ],
        false
    ), new echarts.graphic.LinearGradient(
        0,
        0,
        0,
        1,
        [
            {
                offset: 0,
                color: "rgba(68, 214, 232, 0.50)",
            },
            {
                offset: 0.8,
                color: "rgba(68, 214, 232, 0)",
            },
        ],
        false
    ), new echarts.graphic.LinearGradient(
        0,
        0,
        0,
        1,
        [
            {
                offset: 0,
                color: "rgba(69, 224, 155, 0.50)",
            },
            {
                offset: 0.8,
                color: "rgba(69, 224, 155, 0)",
            },
        ],
        false
    ), new echarts.graphic.LinearGradient(
        0,
        0,
        0,
        1,
        [
            {
                offset: 0,
                color: "rgba(82, 188, 255, 0.50)",
            },
            {
                offset: 0.8,
                color: "rgba(82, 188, 255, 0)",
            },
        ],
        false
    ), new echarts.graphic.LinearGradient(
        0,
        0,
        0,
        1,
        [
            {
                offset: 0,
                color: "rgba(214, 162, 255, 0.50)",
            },
            {
                offset: 0.8,
                color: "rgba(214, 162, 255, 0)",
            },
        ],
        false
    ), new echarts.graphic.LinearGradient(
        0,
        0,
        0,
        1,
        [
            {
                offset: 0,
                color: "rgba(255, 192, 111, 0.50)",
            },
            {
                offset: 0.8,
                color: "rgba(255, 192, 111, 0)",
            },
        ],
        false
    ), new echarts.graphic.LinearGradient(
        0,
        0,
        0,
        1,
        [
            {
                offset: 0,
                color: "rgba(255, 156, 154, 0.50)",
            },
            {
                offset: 0.8,
                color: "rgba(255, 156, 154, 0)",
            },
        ],
        false
    ), new echarts.graphic.LinearGradient(
        0,
        0,
        0,
        1,
        [
            {
                offset: 0,
                color: "rgba(255, 156, 154, 0.50)",
            },
            {
                offset: 0.8,
                color: "rgba(255, 156, 154, 0)",
            },
        ],
        false
    ),

    ]
    // var equipmentList=store.state.equipmentSelList
    var equipmentList=JSON.parse(localStorage.getItem('equipmentSelList'))

    var list = []
    var selList={}
    var selTure=false
    var dataList = []
    equipmentList.forEach(obj => {
        if (obj.deviceId == pageId) {
          // 在找到的对象中添加参数
          if(obj.selList){
            selList = obj.selList;
            selTure=true
          }else{
            selList ={}
            selTure=false
          }
          
        }
      });
    data.forEach((el, index) => {
        Xdata.push(el.time)

        el.value.forEach((el1, index1) => {
            var containsIndex = dataList.findIndex(function (item) {
                return item.name === el1.name;
            });
            if (containsIndex == -1) {
                dataList.push({ name: el1.name, value: [] })
            } else {
                dataList[containsIndex].value.push(el1.value)
            }
        })


    })
    if(!selTure){
        dataList.forEach((el, index) => {
            selList[el.name]=(index==0?true:false)
        })
    }
   
    dataList.forEach((el, index) => {
        list.push({
            name: el.name,
            data: el.value,
            type: "line",
            symbol: "circle",
            smooth: true,
            symbolSize: 5,
            showSymbol: false,
            lineStyle: {
                normal: {
                    width: 2,
                },
            },
            areaStyle: {
                normal: {
                    color: colorList[index],
                },
            },
            itemStyle: {
                normal: {
                    color: colorList1[index],
                    borderColor: colorList1[index],
                    borderWidth: 1,
                },
            },
        })
    })
    var option = {
        tooltip: {
            trigger: "axis",
            axisPointer: {
                lineStyle: {
                    color: "#57617B",
                },
            },
            extraCssText: 'z-index: 9999;', // 设置 z-index
        },
        legend: {
            icon: "circle",
            itemWidth: 10,
            itemHeight: 10,
            type: 'scroll', // 启用翻页
            data: list,
            selected: selList,
            right: "center",
            top:10,
            itemGap: 10,
            width:'90%',
            height:20,
            textStyle: {
                fontSize: 12,
                color: "#fff",
                lineHeight: 30,
            },
            pageTextStyle: {
                color: '#fff', // 设置翻页文字颜色
              },
              pageIconColor: '#fff', // 设置翻页按钮颜色
        },
        dataZoom: [
            {
                show: true,
                realtime: true,
                start:0,
                end: 100,
                xAxisIndex: [0, 1],
                textStyle: {
                    color: '#fff'
                }
            },
            {
                type: 'inside',
                realtime: true,
                start: 0,
                height:20,
                end:100,
                xAxisIndex: [0, 1],
                backgroundColor: 'rgba(11, 28, 42, 0.4)',
                fillerColor: 'rgba(2, 148, 226, 1)',
                textStyle: {
                    color: '#fff'
                }
            }
        ],
        grid: {
            left: "3%",
            right: "10%",
            bottom: "13%",
            containLabel: true,
        },
        xAxis: [
            {
                type: "category",
                boundaryGap: false,
                axisTick: {
                    show: false,
                },
                axisLine: {

                    lineStyle: {
                        color: "#fff",
                        type: 'dashed'
                    },
                },
                data: Xdata,
            },

        ],
        yAxis: [
            {
                type: "value",
                name: "",
                axisTick: {
                    show: false,
                },
                axisLine: {
                    lineStyle: {
                        color: "#fff",
                        type: 'dashed'
                    },
                },
                axisLabel: {
                    margin: 10,
                    textStyle: {
                        fontSize: 14,
                    },
                },
                splitLine: {
                    lineStyle: {
                        color: "rgba(104, 168, 205, 1)",
                        type: 'dashed'
                    },
                },
            },
        ],
        series: list,
    };
    option && myChart.setOption(option);
    myChart.resize();

    myChart.on('legendselectchanged', function (params) {
        equipmentList.forEach((obj,index) => {
            if (obj.deviceId== pageId) {
              // 在找到的对象中添加参数
              obj.selList=params.selected
          
            }
          });
          localStorage.setItem('equipmentSelList', JSON.stringify(equipmentList))
      });
    window.addEventListener("resize", function () {
        myChart.resize();
    });
}
export function statusCharts(id, data) {
    var chartDom = document.getElementById(id);
    var myChart = echarts.init(chartDom);
    var option;

    const pointerData = data; // 仪表指针数据
    option = {
        series: [
            {
                type: "gauge",
                radius:75,
                z: 1,
                center:['50%','87%'],
                startAngle: 180,
                endAngle: 0,
                splitNumber: 50,
                splitLine: {
                    show: false,
                    length: 15,
                    distance: -10,
                    lineStyle: {
                        color: "#fff",
                        width: 1,
                    },
                },
                detail: {
                    show: false,
                    offsetCenter: ['50%', '50%'],
                    fontSize: 22,
                    formatter: (val) => [`{a|${val}}`, `{b|%}`].join(""),
                    rich: {
                        a: {
                            fontSize: 20,
                            color: "rgba(84, 108, 198, 0.65)",
                        },
                        b: {
                            fontSize: 24,
                            color: "rgba(84, 108, 198, 0.65)",
                        },
                    },
                },
                // 仪表盘的线，颜色值为一个数组
                axisLine: {
                    show: true,
                    // 两端是否设置为圆角；在5.0之后的版本有效
                    roundCap: false,
                    lineStyle: {
                        width: 15,
                        shadowColor: "#0093ee", //默认透明
                        shadowOffsetX: 0,
                        shadowOffsetY: 0,
                        shadowBlur: 20,
                        opacity: 1,
                        color: [
                            [
                                pointerData / 100,
                                {
                                    x: 0,
                                    y: 0,
                                    x1: 1,
                                    y1: 0,
                                    colorStops: [
                                        {
                                            offset: 0,
                                            color: "rgba(110, 224, 255, 1)",
                                        },
                                        {
                                            offset: 1,
                                            color: "rgba(0, 200, 255, 1)",
                                        },
                                    ],
                                },
                            ],
                            [1, "rgba(0,0,0,0.15)"],
                        ],
                    },
                },
                // 仪表盘刻度标签
                axisLabel: {
                    show: true,
                    color: "#fff",
                    fontSize: 14,
                    distance: -35,
                    formatter: (val) => {
                        const num = Math.floor(val);
                        return num % 20 === 0 ? num : "";
                    },
                },
                pointer:{
                    width :5,
                    itemStyle:{
                        color:'rgba(10, 243, 167, 1)'
                    }
                },
                // 刻度
                axisTick: {
                    show: false,
                },
                // 指针，此设置仅对5.0以上的版本生效
              
                data: [pointerData],
            },
           
        ],
    };


    option && myChart.setOption(option);
    window.addEventListener("resize", function () {
        myChart.resize();
    });
}