<template>
  <div>
    <el-row :gutter="20">
      <el-col :span="24">
        <!-- <el-row :gutter="20">
                                       <el-col :span="2"><p style="width:30px;height:15px;background:#339966;line-height:6px;border-radius:4px;margin-left:90%"></p></el-col>
                                       <el-col :span="2"><span style="color:#339966;margin-top:0.5%;margin-right:0%;position:absolute;">完整性≥90%</span></el-col>
                                       <el-col :span="2"><p style="width:30px;height:15px;background:#FFCC33;line-height:6px;border-radius:4px;margin-left:100%"></p></el-col>
                                       <el-col :span="3" ><span style="color:#FFCC33;margin-top:0.5%;position:absolute;margin-left:0.8%">60%≤完整性<90% </span></el-col>
                                       <el-col :span="3"><p style="width:30px;height:15px;background:#CC0000;line-height:6px;border-radius:4px;margin-left:92%"></p></el-col>
                                       <el-col :span="2"> <span style="color:#CC0000;margin-top:0.5%;position:absolute;">完整性<60%</span></el-col>
                                    </el-row>    -->
        <div
          ref="fg"
          v-loading="loadingd"
          id="dataintegrity"
          style="'width:100%;height:calc(100vh - 180px);"
        ></div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import { getheight } from "../../assets/commjs/common";
import yan from "@/assets/commjs/color";
export default {
  data() {
    return {
      loadingd: false,
      voltageleve1: 0,
      tableheight: undefined,
      terminal: 0,
      title: "电网拓扑",
      interfere: 0,
      device: 1,
      voltageleveloption: [
        { value: 0, label: "全部" },
        { value: 1, label: "0.38kV" },
        { value: 2, label: "0.45kV" },
        { value: 3, label: "6kV" },
        { value: 4, label: "10kV" },
        { value: 5, label: "20kV" },
        { value: 6, label: "110kV" },
        { value: 7, label: "220kV" },
        { value: 8, label: "500kV" },
        { value: 9, label: "750kV" },
        { value: 10, label: "1000kV" },
      ],
      terminaloption: [
        { value: 0, label: "全部" },
        { value: 1, label: "南京灿能电力" },
      ],
      interfereoption: [
        { value: 0, label: "全部" },
        { value: 1, label: "非线性负荷" },
        { value: 2, label: "电气化铁路" },
        { value: 3, label: "电加热负荷" },
        { value: 4, label: "整流装置" },
        { value: 5, label: "中频炉" },
      ],
    };
  },
  props: {
    xdata: {
      type: Array,
      default: undefined,
    },
    loading: {
      type: Boolean,
      default: false,
    },
    classvalue: {
      type: String,
      default: undefined,
    },
    ydata: {
      type: Array,
      default: undefined,
    },
    // ydata1: {
    //   type: Array,
    //   default: undefined,
    // },
    timeValue: {
      type: String,
      default: undefined,
    },
    timehuanbiValue: {
      type: String,
      default: undefined,
    },
  },
  watch: {
    classvalue: function (a, b) {
      if (a == "Power_Network") {
        this.title = "电网拓扑";
      } else if (a == "Manufacturer") {
        this.title = "终端厂家";
      } else if (a == "Voltage_Level") {
        this.title = "电压等级";
      } else if (a == "Load_Type") {
        this.title = "干扰源类型";
      }
    },
  },
  created() {},
  mounted() {
    
  },
  methods: {
    dataintegrity() {
      this.loadingd = true;
      if (this.ydata.length == 0) {
        this.loadingd = false;
      }
      const echarts = require("echarts");
      var myChartes = echarts.init(document.getElementById("dataintegrity"));
      myChartes.clear();
      var option = {
        title: {
          text: this.title,
          left: "center",

          //subtext: '单位(%)'
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
          },
          formatter: function (params) {
            var tips = "";
            tips += params[0].name + "</br/>";
            for (var i = 0; i < params.length; i++) {
              if (params[i].value == 3.14159) {
                tips += params[i].seriesName + "数据完整性:暂无数据<br/>";
              } else {
                tips += "数据完整性:" + params[i].value + "%<br/>";
              }
            }
            return tips;
          },
        },
        grid: {
          left: "10px",
          right: "20px",
          bottom: "20px",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            data: this.xdata,
            splitLine: {
              show: false,
            },
            axisTick: {
              alignWithLabel: true,
            },
            axisLabel: {
              textStyle: {
                fontFamily: "dinproRegular",
                color: "#000",
              },
              rotate: 0,
            },
            axisLine: {
              show: true,
              symbol: ["none", "arrow"],
            },
          },
        ],
        toolbox: {
          show: true,
          feature: {
           // saveAsImage: { show: true },
            // dataZoom: {
            //      yAxisIndex: 'none'
            // },
            // //restore: {},
            // mark : {show: true},
            //magicType : {show: true, type: ['line', 'bar']}
          },
        },
        yAxis: [
          {
            name: "单位(%)",
            type: "value",
            min: 0,
            max: 100,
            splitLine: {
              show: false,
            },
            axisLine: {
              show: true,
              symbol: ["none", "arrow"],
            },
            splitArea: {
              show: true,
            },
          },
        ],
        series: [
          {
            name: this.timeValue,
            barMaxWidth: 30,
            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 >= 90 && params.value !== 3.14159) {
                    return new echarts.graphic.LinearGradient(
                      0,
                      1,
                      0,
                      0,
                      [
                        {
                          offset: 1,
                          color: yan.ColorObject.Integrity1,
                        },
                      ],
                      false
                    );
                  } else if (
                    params.value >= 60 &&
                    params.value <= 90 &&
                    params.value !== 3.14159
                  ) {
                    return new echarts.graphic.LinearGradient(
                      0,
                      1,
                      0,
                      0,
                      [
                        {
                          offset: 1,
                          color: yan.ColorObject.Integrity2,
                        },
                      ],
                      false
                    );
                  } else if (params.value <= 60 && params.value !== 3.14159) {
                    return new echarts.graphic.LinearGradient(
                      0,
                      1,
                      0,
                      0,
                      [
                        {
                          offset: 1,
                          color: yan.ColorObject.Integrity3,
                        },
                      ],
                      false
                    );
                  } else if (params.value == 3.14159) {
                    return new echarts.graphic.LinearGradient(
                      0,
                      1,
                      0,
                      0,
                      [
                        {
                          offset: 1,
                          color: "#ccc",
                        },
                      ],
                      false
                    );
                  }
                },
              },
            },
            markLine: {
              silent: false,
              symbol: "circle",
              data: [
                {
                  name: "完整性≥90%",
                  yAxis: 100,
                  lineStyle: {
                    color: yan.ColorObject.Integrity1,
                  },
                  label: {
                    position: "middle",
                    formatter: "{b}",
                    textStyle: {
                      color: yan.ColorObject.Integrity1,
                    },
                  },
                },
                {
                  name: "60%≤完整性<90%",
                  yAxis: 90,
                  lineStyle: {
                    color: yan.ColorObject.Integrity2,
                  },
                  label: {
                    position: "middle",
                    formatter: "{b}",
                    textStyle: {
                      color: yan.ColorObject.Integrity2,
                    },
                  },
                },
                {
                  name: "完整性<60%",
                  yAxis: 60,
                  lineStyle: {
                    color: yan.ColorObject.Integrity3,
                  },
                  label: {
                    position: "middle",
                    formatter: "{b}",
                    textStyle: {
                      color: yan.ColorObject.Integrity3,
                    },
                  },
                },
              ],
            },
            data: this.ydata,
          },
          // {
          //     name: this.timehuanbiValue,
          //     barMaxWidth: 45,
          //     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 >=90){
          //                     return  new echarts.graphic.LinearGradient(0, 1, 0, 0, [
          //                             {
          //                             offset: 1,
          //                             color: Integrity1
          //                             } ],false)
          //                 }else if(params.value >=60 && params.value<= 90){
          //                     return  new echarts.graphic.LinearGradient(0, 1, 0, 0, [
          //                             {
          //                             offset: 1,
          //                             color: Integrity2
          //                             } ],false)
          //                 }else if(params.value<= 60 && params.value>5){
          //                     return  new echarts.graphic.LinearGradient(0, 1, 0, 0, [
          //                             {
          //                             offset: 1,
          //                             color: Integrity3
          //                             } ],false)
          //                 }else if(params.value>0 && params.value<=5){
          //                     return  new echarts.graphic.LinearGradient(0, 1, 0, 0, [
          //                             {
          //                             offset: 1,
          //                             color: '#ccc'
          //                             } ],false)
          //                 }
          //             }
          //         },
          //     },
          //     markLine: {
          //          silent:false,
          //          symbol :'circle',
          //                         data: [
          //                             {
          //                                 name:"完整性≥90%",
          //                                 yAxis: 100,
          //                                 lineStyle:{
          //                                     color:Integrity1,
          //                                 },
          //                                 label:{
          //                                     position:"middle",
          //                                     formatter:'{b}',
          //                                 textStyle:{
          //                                     color:Integrity1
          //                                 }
          //                             }
          //                             },
          //                             {
          //                                 name:"60%≤完整性<90%",
          //                                 yAxis: 90,
          //                                 lineStyle:{
          //                                     color:Integrity2,
          //                                 },
          //                                 label:{
          //                                  position:"middle",
          //                                     formatter:'{b}',
          //                                 textStyle:{
          //                                     color:Integrity2
          //                                 }
          //                             }
          //                             },
          //                         {
          //                                 name:"完整性<60%",
          //                                 yAxis: 60,
          //                                 lineStyle:{
          //                                     color:Integrity3,
          //                                 },
          //                                 label:{
          //                                     position:"middle",
          //                                     formatter:'{b}',
          //                                 textStyle:{
          //                                     color:Integrity3
          //                                 }
          //                             }
          //                             },

          //                         ]
          //              },
          //     data: this.ydata1,
          // }
        ],
      };
      myChartes.setOption(option)
window.echartsArr.push(myChartes);
      setTimeout(() => {
        myChartes.resize();
      }, 100);
      this.loadingd = false;
      let _this = this;
      _this.$erd.listenTo(_this.$refs.fg, (element) => {
        _this.$nextTick(() => {
          myChartes.resize();
        });
      });
      window.onresize = function () {
        myChartes.resize();
      };
    },
  },
};
</script>
<style scoped>
</style>