<template>
    <div>
        <div style="height:30px;height:20px;position:absolute;right:10px">
      <el-tag  style="background:#CC0000;width:30px;height:15px;border:1px solid #CC0000;float:left;margin-top:2px"></el-tag>
        <span style="color:#CC0000;font-weight:400;;float:left">&nbsp&nbsp重度污染&nbsp&nbsp</span>
      <el-tag size="mini" style="background:#ff9900;width:30px;height:15px;border:1px solid #ff9900;float:left;margin-top:2px"></el-tag>
        <span style="color:#ff9900;font-weight:400;float:left" >&nbsp&nbsp中度污染&nbsp&nbsp</span>
      <el-tag style="background:#FFCC33;width:30px;height:15px;border:1px solid #FFCC33;float:left;margin-top:2px"></el-tag>
        <span style="color:#FFCC33;font-weight:400;float:left" >&nbsp&nbsp轻度污染&nbsp&nbsp</span>
        <el-tag style="background:#3399ff;width:30px;height:15px;border:1px solid #3399ff;float:left;margin-top:2px"></el-tag>
        <span style="color:#3399ff;font-weight:400;float:left" >&nbsp&nbsp轻微污染&nbsp&nbsp</span>
        <el-tag style="background:#339966;width:30px;height:15px;border:1px solid #339966;float:left;margin-top:2px"></el-tag>
        <span style="color:#339966;font-weight:400;float:left" >&nbsp&nbsp无污染</span>
   </div>
    <div ref="compf" id="comp" style="width: 100%;"></div>
    </div>
  </template>
  <script>
  import { dicData } from "@/assets/commjs/dictypeData";
  import api from "@/api/pollution/pollution";
  import yan from "@/assets/commjs/color";
  export default {
    props: {
      item: {
        type: Object,
        default: null,
      },
      item2: {
        type: Object,
        default: null,
      },
      height: {
        type: Number,
        default: null,
      },
      height2: {
        type: Number,
        default: null,
      },
    },
    watch: {
      height2(a, b) {
        if (a == 24) {
          this.$refs.compf.style.height =
            document.getElementById("conmentId").offsetHeight - 50 + "px";
        } else {
          return;
        }
      },
      height(a, b) {
        if (a == 6 || a == 8 || a == 9 || a == 16) {
          setTimeout(() => {
            let str = document.getElementById("compentwuqutu").style.height;
            let strsec = str.split("p");
            let height = parseInt(strsec) - 50 + "px";
            this.$refs.compf.style.height = height;
          }, 200);
        } else {
          return;
        }
      },
    },
    data() {
      return {
        classificationData: [],
        areaData: [],
        time: this.timefamt(),
        formData: {
          deptIndex: JSON.parse(window.sessionStorage.getItem("Info")).deptId,
          id:'',
          monitorFlag: 2,
          powerFlag: 2,
          reportFlag: 3,
          searchBeginTime: "",
          searchEndTime: "",
          statisticalType: [],
        },
        xdata:[],
        ydata:[]
      };
    },
    created() {
      this.getIndexType();
      this.queryData();
    },
    mounted() {
      setTimeout(() => {
        let str = document.getElementById("compentwuqutu").style.height;
        let strsec = str.split("p");
        let height = parseInt(strsec) - 50 + "px";
        this.$refs.compf.style.height = height;
      }, 200);
    },
    methods: {
      //获取统计类型
      getIndexType() {
      var code = "Pollution_Statis";
      this.classificationData = dicData(code, [
        "I_Neg",
        "V_Inharm",
        "V_Dev",
        "V_Unbalance",
        "Plt",
        "Freq_Dev",
      ]);
      this.formData.statisticalType = this.classificationData[0];
    },
      queryData() {
        this.formData.searchBeginTime = this.time[0];
        this.formData.searchEndTime = this.time[1];
        api.deptSubstationRelations(this.formData).then((res) => {
          this.areaData = res.data;
        let xarr  =[]
        let yarr =[]
        this.areaData.forEach((item) => {
            xarr.push(item.name);
            yarr.push(item.data);
        });
        this.xdata = xarr;
        for (var i = 0; i < yarr.length; i++) {
            if (yarr[i] == 0 || yarr[i] == -1) {
              yarr[i] = 0.05;
            }
          }
          this.ydata = yarr;
          this.qualifiedechart();
        });
      },
      timefamt() {
        var date = new Date();
        var year = date.getFullYear();
        var month = date.getMonth() + 1;
        var day = date.getDate();
        month = month > 9 ? month : "0" + month;
        day = day < 10 ? "0" + day : day;
        var arr = [];
        var time1 = year + "-" + month + "-01";
        arr.push(time1);
        var time2 = year + "-" + month + "-" + day;
        arr.push(time2);
        return arr;
      },
      qualifiedechart() {
      //  let echartsColor = JSON.parse(window.localStorage.echartsColor);
      
        const echarts = require("echarts");
        var myChartes = echarts.init(document.getElementById("comp"));
        let echartsColor = JSON.parse(window.localStorage.echartsColor);
        myChartes.clear();
        let option = {
        title: {
         //text: "区域",
          left: "center",
          textStyle: {
            fontSize: 20,
            color: "#fff",
          },
          // subtext: ''
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
                            type: "shadow",
                            label: {
                            color: "#fff",
                            fontSize: 16,
                            },
                        },
                        textStyle: {
                            color: "#fff",
                            fontStyle: "normal",
                            opacity: 0.35,
                            fontSize: 14,
                        },
                        backgroundColor: "rgba(0,0,0,0.35)",
          formatter: function (params) {
            var tips = "";
            tips +=
              '<span style="">' +
              params[0].name +'</br>'
              "</span>";
            for (var i = 0; i < params.length; i++) {
              if (params[i].value == 0.05) {
                tips += params[i].seriesName + ":暂无数据<br/>";
              } else {
                tips += params[i].seriesName + ":"+params[i].value;
              }
            }
            return tips;
          },
        },
        grid: yan.EchartObject.gridf,

        xAxis: [

          {
            name:yan.EchartObject.area,
            nameTextStyle: {
              color: '#fff',
            },
            type: "category",
            data: this.xdata,
            splitLine: {
              show: false,
              type: "dashed",
              lineStyle: {
                color: "#fff",
              },
            },
            axisTick: {
              alignWithLabel: true,
            },
            axisLine: {
              show: true,
              symbol: ["none", "arrow"],
              lineStyle: {
                color: '#fff',
              },
            },
            axisLabel: {
              interval: 0, 
              textStyle: {
                fontFamily: "dinproRegular",
                color: '#fff',
              },
              rotate: yan.rotate(this.xdata.length)
            },
          },
        ],
        //toolbox:  yan.EchartObject.toolbox1,
        yAxis: {
          name: yan.EchartObject.grade,
          type: "value",
          min: 0,
          max: 2,
          interval: 0.2,
          axisLabel: {
            show: true,
            textStyle: {
              color: '#fff',
            },
            // 这里重新定义就可以
            formatter: function (value, index) {
              var texts = [];
              if (value ===1) {
                texts.push("1级");
              } else if (value ===1.2) {
                texts.push("2级");
              } else if (value === 1.4) {
                texts.push("3级");
              } else if (value === 1.6) {
                texts.push("4级");
              } else if (value === 2) {
                texts.push("5级");
              }
              return texts;
            },
          },
          splitLine: {
             show:false,
              lineStyle: {
                // 使用深浅的间隔色
                color: ["#fff"],
                //type: "dashed",
                opacity: 0.5,
              },
            },
          axisLine: {
            show: true,
            lineStyle: {
                color: '#fff',
              },
            symbol: ["none", "arrow"],
          },
        },
        dataZoom: yan.EchartObject.dataZoom,
        series: [
          {
            name: "污染值",
            barMaxWidth: yan.EchartObject.barMaxWidth,
            type: "bar",
            label: {
              normal: {
                show: false,
                position: "top",
              },
            },
            itemStyle: {
              normal: {
                // 随机显示
                //color:function(d){return "#"+Math.floor(Math.random()*(256*256*256-1)).toString(16);}

                // 定制显示（按顺序）
                color: function (params) {
                  if (params.value >2) {
                    return new echarts.graphic.LinearGradient(
                      0,
                      1,
                      0,
                      0,
                      [
                        {
                          offset: 1,
                          color: yan.ColorObject.zdContaminated,
                        },
                      ],
                      false
                    );
                  } else if (1.6< params.value && params.value <= 2) {
                    return new echarts.graphic.LinearGradient(
                      0,
                      1,
                      0,
                      0,
                      [
                        {
                          offset: 1,
                          color:  yan.ColorObject.centerContaminated,
                        },
                      ],
                      false
                    );
                  } else if (1.2< params.value && params.value <= 1.6) {
                    return new echarts.graphic.LinearGradient(
                      0,
                      1,
                      0,
                      0,
                      [
                        {
                          offset: 1,
                          color:  yan.ColorObject.qdContaminated,
                        },
                      ],
                      false
                    );
                  } else if (1< params.value && params.value <=1.2) {
                    return new echarts.graphic.LinearGradient(
                      0,
                      1,
                      0,
                      0,
                      [
                        {
                          offset: 1,
                          color:  yan.ColorObject.qwContaminated,
                        },
                      ],
                      false
                    );
                  } else if (
                    0 < params.value &&
                    params.value <=1 &&  params.value >= 0 &&
                    params.value !== 0.05
                  ) {
                    return new echarts.graphic.LinearGradient(
                      0,
                      1,
                      0,
                      0,
                      [
                        {
                          offset: 1,
                          color:  yan.ColorObject.noContaminated,
                        },
                      ],
                      false
                    );
                  } else if (params.value == 0.05) {
                    return new echarts.graphic.LinearGradient(
                      0,
                      1,
                      0,
                      0,
                      [
                        {
                          offset: 1,
                          color: "#999999",
                        },
                      ],
                      false
                    );
                  }
                },
              },
            },
            markLine: {
              silent: false,
              symbol: "circle",
              lineStyle: {
                color: "red",
                width: 1,
              },
              emphasis: {
                lineStyle: {
                  width: 1,
                },
              },
              data: [
                {
                  name: "",
                  yAxis: 1,
                  lineStyle: {
                    color:  yan.ColorObject.noContaminated,
                  },
                  label: {
                    //position: "middle",
                    formatter: "{b}",
                    textStyle: {
                      color:  yan.ColorObject.noContaminated,
                    },
                  },
                },
                {
                  name: "",
                  yAxis: 1.2,
                  lineStyle: {
                    color:  yan.ColorObject.qwContaminated,
                  },
                  label: {
                   // position: "middle",
                    formatter: "{b}",
                    textStyle: {
                      color:  yan.ColorObject.qwContaminated,
                    },
                  },
                },
                {
                  name: "",
                  yAxis: 1.4,
                  lineStyle: {
                    color:  yan.ColorObject.qdContaminated,
                  },
                  label: {
                   // position: "middle",
                    formatter: "{b}",
                    textStyle: {
                      color:  yan.ColorObject.qdContaminated,
                    },
                  },
                },
                {
                  name: "",
                  yAxis: 1.6,
                  lineStyle: {
                    color:  yan.ColorObject.centerContaminated,
                  },
                  label: {
                   // position: "middle",
                    formatter: "{b}",
                    textStyle: {
                      color:  yan.ColorObject.centerContaminated,
                    },
                  },
                },
                {
                  name: "",
                  yAxis: 2,
                  lineStyle: {
                    color:  yan.ColorObject.zdContaminated,
                  },
                  label: {
                   // position: "middle",
                    formatter: "{b}",
                    textStyle: {
                      color:  yan.ColorObject.zdContaminated,
                    },
                  },
                },
              ],
            },
            data: this.ydata,
          },
        ],
        };
        myChartes.setOption(option)
window.echartsArr.push(myChartes);
        setTimeout(() => {
          myChartes.resize();
        }, 100);
        this.loadingd = false;
        // let _this = this;
        // _this.$erd.listenTo(_this.$refs.areaSeverity, (element) => {
        //   _this.$nextTick(() => {
        //     myChartes.resize();
        //   });
        // });
        window.onresize = function () {
          myChartes.resize();
        };
      },
    },
  };
  </script>
  