<template>
  <div ref="dis" id="disec" style="width: 100%;"></div>
</template>
<script>
import {
  onLienRate1,
  onLienRate2,
  onLienRate3,
  colorB,
} from "@/assets/commjs/color";
import { dicData } from "@/assets/commjs/dictypeData";
import { getCoords } from "@/api/monitoringpointStatistics/echart";
import * as echarts from "echarts";
import "echarts-gl";
require("echarts/lib/chart/bar.js");
require("echarts/lib/component/tooltip.js");
require("echarts/lib/component/title.js");
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.dis.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('voltagesagdensity').style.height
        let strsec = str.split('p')
        let height = parseInt(strsec) - 60 +'px'
        this.$refs.dis.style.height =  height
        },200)
      } else {
        return;
      }
    },
  },
  data() {
    return {
      tableData: [],
      statisticalType: null,
      classificationData: [],
      time: this.timefamt(),
      trdata: [],
    };
  },
  created() {
    var data = window.sessionStorage.getItem("Info");
    data = eval("(" + data + ")");
    this.deptIndex = data.deptId;
    this.getIndexType();
    this.queryData();
  },
  mounted() {
    setTimeout(()=>{
    let str = document.getElementById('voltagesagdensity').style.height
    let strsec = str.split('p')
    let height = parseInt(strsec) - 60 +'px'
     this.$refs.dis.style.height =  height
    },200)
  },
  methods: {
    queryData() {
      var formData = {
        lineIndex: "af1fe3d9cf15891ce52d2feb8aaa46f8",
        startTime: this.time[0],
        endTime: this.time[1],
      };
      getCoords(formData).then((res) => {
        this.trdata = res.data;
        this.$nextTick(() => {
          this.disec();
        });
      });
    },
    getIndexType() {
      var code = "Indicator_Type";
      this.classificationData = dicData(code, [
        "PLPC",
        "DYPC",
        "SXDYBPHD",
        "CSSB",
        "FXDL",
        "JXBDY",
      ]);
      this.statisticalType = this.classificationData[0];
    },
    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;
    },
    disec() {
      var xx;
      var yy;
      var zz;
      var datalistmd = [];
      for (var i = 0; i < this.trdata.length; i++) {
        xx = this.trdata[i].x;
        yy = this.trdata[i].y;
        zz = this.trdata[i].z;
        datalistmd[i] = [xx, yy, zz];
      }
      const echarts = require("echarts");
      var myChartes = echarts.init(document.getElementById("disec"));
      myChartes.clear();
      var option = {
        // background: "#fff",
        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)",
        },
        title: {
        //  text: "暂降密度图",
          x: "center",
          textStyle: {
            color: "#fff",
          },
        },
        // toolbox: {
        //   show: true,
        //   feature: {
            // dataView: { show: true },
            // dataZoom: { show: true },
            // //restore: { show: true },
            // saveAsImage: { show: true },
            // myFull: {
            //   show: true,
            //   title: "全屏查看",
            //   icon: "path://M432.45,595.444c0,2.177-4.661,6.82-11.305,6.82c-6.475,0-11.306-4.567-11.306-6.82s4.852-6.812,11.306-6.812C427.841,588.632,432.452,593.191,432.45,595.444L432.45,595.444z M421.155,589.876c-3.009,0-5.448,2.495-5.448,5.572s2.439,5.572,5.448,5.572c3.01,0,5.449-2.495,5.449-5.572C426.604,592.371,424.165,589.876,421.155,589.876L421.155,589.876z M421.146,591.891c-1.916,0-3.47,1.589-3.47,3.549c0,1.959,1.554,3.548,3.47,3.548s3.469-1.589,3.469-3.548C424.614,593.479,423.062,591.891,421.146,591.891L421.146,591.891zM421.146,591.891",
            //   onclick: (e) => {
            //     this.fullFlag = true;
            //     let element = document.getElementById("main");
            
            //     if (element.requestFullScreen) {
            //       // HTML W3C 提议
            //       element.requestFullScreen();
            //     } else if (element.msRequestFullscreen) {
            //       // IE11
            //       element.msRequestFullScreen();
            //     } else if (element.webkitRequestFullScreen) {
            //       // Webkit (works in Safari5.1 and Chrome 15)
            //       element.webkitRequestFullScreen();
            //     } else if (element.mozRequestFullScreen) {
            //       // Firefox (works in nightly)
            //       element.mozRequestFullScreen();
            //     }
            //     // 退出全屏
            //     if (element.requestFullScreen) {
            //       document.exitFullscreen();
            //     } else if (element.msRequestFullScreen) {
            //       document.msExitFullscreen();
            //     } else if (element.webkitRequestFullScreen) {
            //       document.webkitCancelFullScreen();
            //     } else if (element.mozRequestFullScreen) {
            //       document.mozCancelFullScreen();
            //     }
            //   },
            // },
        //   },
        // },
        visualMap: {
          max: 20,
          show: false,
          inRange: {
            color: ["#313695", "#00BB00", "#ff8000", "#a50026"],
          },
        },
        xAxis3D: {
          type: "category",
          name: "剩余电压(%)",
          nameTextStyle: {
            color: "#fff",
            fontSize: 12,
            left: "0%",
          },
          data: [
            "0-10",
            "10-20",
            "20-30",
            "30-40",
            "40-50",
            "50-60",
            "60-70",
            "70-80",
            "80-90",
            "90-100",
          ],
          axisLabel: {
            color: "#fff",
            textStyle: {
              fontSize: 12,
            },
          },
          axisLine: {
            show: true,
            color: "#fff",
            symbol: ["none", "arrow"],
          },
        },
        yAxis3D: {
          type: "category",
          name: "持续时间(cyc)",
          nameTextStyle: {
            color: "#fff",
            fontSize: 12,
            left: "0%",
          },
          data: [
            "1cyc",
            "2cyc",
            "3cyc",
            "4cyc",
            "5cyc",
            "6~10cyc",
            "10~20cyc",
            "20~30cyc",
            "30~60cyc",
          ],
          axisLabel: {
            color: "#fff",
            textStyle: {
              fontSize: 12,
            },
          },
          axisLine: {
            show: true,
            color: "#fff",
            symbol: ["none", "arrow"],
          },
        },
        zAxis3D: {
          type: "value",
          splitNumber: 10,
          minInterval: 10,
          name: "次数",
          nameTextStyle: {
            color: "#fff",
            fontSize: 12,
            left: "0%",
          },
          axisLabel: {
            color: "#fff",
            textStyle: {
              fontSize: 12,
            },
          },
          axisLine: {
            show: true,
            color: "#fff",
            symbol: ["none", "arrow"],
          },
        },
        grid3D: {
          boxWidth: 200,
          boxDepth: 80,
          light: {
            main: {
              intensity: 1.2,
            },
            ambient: {
              intensity: 0.3,
            },
          },
        },
        series: [
          {
            type: "bar3D",
            data: datalistmd.map(function (item) {
              return {
                value: [item[0], item[1], item[2]],
              };
            }),
            shading: "realistic",
            label: {
              show: false,
              textStyle: {
                fontSize: 16,
                color: "#fff",
                borderWidth: 1,
              },
            },

            itemStyle: {
              opacity: 1,
            },
            emphasis: {
              label: {
                textStyle: {
                  fontSize: 20,
                  color: "#fff",
                },
              },
              line: {
                color: "#fff",
              },
              itemStyle: {
                color: "#fff",
              },
            },
          },
        ],
      };
      myChartes.setOption(option)
window.echartsArr.push(myChartes);
      setTimeout(() => {
        myChartes.resize();
      }, 100);
      this.loadingd = false;
      let _this = this;
      _this.$erd.listenTo(_this.$refs.dis, (element) => {
        _this.$nextTick(() => {
          myChartes.resize();
        });
      });
      window.onresize = function () {
        myChartes.resize();
      };
    },
  },
};
</script>
