<template>
  <div style="position: relative" id="ITIC">
    <div
      id="itic"
      ref="itic"
      :style="`width:100%;height:100%;`"
    ></div>
    <div class="wzhi">
      <el-button
        type="text"
        icon="el-icon-download"
        title="生成图片"
        @click="download"
        >下载</el-button
      >
    </div>
  </div>
</template>
<script>
import html2canvas from "html2canvas";

import { getPlot } from "@/api/monitoringpointStatistics/echart";
import yan from "@/assets/commjs/color";
export default {
  components: {},
  props: {
    item: {
      default: ["", ""],
    },
  },
  data() {
    return {
      loading: true,
      //曲线icit和semi曲线模拟数据
      datalist: [],
      pointI: [],
      pointIun: [],
      pointF: [],
      pointFun: [],
      zoom: "", //图表焦点校验
      myChartes: "",
      white: "#ffffff",
      top: [
        [0.001, 200],
        [0.003, 140],
        [0.003, 120],
        [0.5, 120],
        [0.5, 110],
        [10, 110],
        [1000, 110],
      ],
      bot: [
        [0.02, 0],
        [0.02, 70],
        [0.5, 70],
        [0.5, 80],
        [10, 80],
        [10, 90],
        [1000, 90],
      ],
      part: [
        [0.05, 0],
        [0.05, 50],
        [0.2, 50],
        [0.2, 70],
        [0.5, 70],
        [0.5, 80],
        [10, 80],
        [1000, 80],
      ],
    };
  },
  created() {},
  mounted() {
    this.$nextTick(() => {
      this.query();
    });
    this.resizeEchart();
    this.zoom = 1 / document.body.style.zoom;
    window.addEventListener("resize", () => {
      this.zoom = 1 / document.body.style.zoom;
      if (this.myChartes !== "") {
        this.myChartes.resize();
      }
    });
  },
  methods: {
    // dmo元素里的内容转换为canvas,并将canvas下载为图片
    download() {
      // 转换成canvas
      html2canvas(document.getElementById("itic"), {
        scale: 2,
      }).then(function (canvas) {
        // 创建a标签，实现下载
        var creatIMg = document.createElement("a");
        creatIMg.download = "图表.png"; // 设置下载的文件名，
        creatIMg.href = canvas.toDataURL(); // 下载url
        // document.body.appendChild(creatIMg);
        creatIMg.click();
        creatIMg.remove(); // 下载之后把创建的元素删除
      });
    },
    // 查询
    query() {
      this.loading = true;
      let form = {
        lineIndex: this.$store.state.user.lineID,
        startTime: this.item[0],
        endTime: this.item[1],
      };
      getPlot(form).then((res) => {
        this.datalist = res.data.voltageToleranceCurveDataList;
        this.iticData();
      });
    },
    //公共的方法
    gongfunction() {
      var standI = 0;
      var unstandI = 0;
      var standF = 0;
      var unstandF = 0;
      var total = 0;
      this.pointIun = [];
      this.pointI = [];
      total = this.datalist.length;
      if (total == 0) {
      } else {
        for (var i = 0; i < this.datalist.length; i++) {
          var point = [];
          var xx = this.datalist[i].persistTime;
          var yy = this.datalist[i].eventValue;
          var time = this.datalist[i].time;
          var eventId = this.datalist[i].eventId;
          // var index = this.datalist[i].eventDetailIndex;
          point = [xx, yy, time, eventId];

          if (xx <= 0.003) {
            var line = 0;
            line = 250 - 30000 * xx;
            if (yy > line) {
              unstandI++;
              this.pointIun.push({
                value: point,
                itemStyle: { normal: { color: "red" } },
              });
            } else {
              standI++;
              this.pointI.push({
                value: point,
                itemStyle: { normal: { color: "green" } },
              });
            }
          } else if (xx <= 0.02) {
            if (yy > 120) {
              unstandI++;
              this.pointIun.push({
                value: point,
                itemStyle: { normal: { color: "red" } },
              });
            } else {
              standI++;
              this.pointI.push({
                value: point,
                itemStyle: { normal: { color: "green" } },
              });
            }
          } else if (xx <= 0.5) {
            if (yy > 120 || yy < 70) {
              unstandI++;
              this.pointIun.push({
                value: point,
                itemStyle: { normal: { color: "red" } },
              });
            } else {
              standI++;
              this.pointI.push({
                value: point,
                itemStyle: { normal: { color: "green" } },
              });
            }
          } else if (xx <= 10) {
            if (yy > 110 || yy < 80) {
              unstandI++;
              this.pointIun.push({
                value: point,
                itemStyle: { normal: { color: "red" } },
              });
            } else {
              standI++;
              this.pointI.push({
                value: point,
                itemStyle: { normal: { color: "green" } },
              });
            }
          } else {
            if (yy > 110 || yy < 90) {
              unstandI++;
              this.pointIun.push({
                value: point,
                itemStyle: { normal: { color: "red" } },
              });
            } else {
              standI++;
              this.pointI.push({
                value: point,
                itemStyle: { normal: { color: "green" } },
              });
            }
          }

          if (xx < 0.05) {
            standF++;
            this.pointF.push({
              value: point,
              itemStyle: { normal: { color: "green" } },
            });
          } else if (xx < 0.2) {
            if (yy > 50) {
              standF++;
              this.pointF.push({
                value: point,
                itemStyle: { normal: { color: "green" } },
              });
            } else {
              unstandF++;
              this.pointFun.push({
                value: point,
                itemStyle: { normal: { color: "red" } },
              });
            }
          } else if (xx < 0.5) {
            if (yy > 70) {
              standF++;
              this.pointF.push({
                value: point,
                itemStyle: { normal: { color: "green" } },
              });
            } else {
              unstandF++;
              this.pointFun.push({
                value: point,
                itemStyle: { normal: { color: "red" } },
              });
            }
          } else {
            if (yy > 80) {
              standF++;
              this.pointF.push({
                value: point,
                itemStyle: { normal: { color: "green" } },
              });
            } else {
              unstandF++;
              this.pointFun.push({
                value: point,
                itemStyle: { normal: { color: "red" } },
              });
            }
          }
        }
      }
      this.$emit("dataList", {
        name: "事件个数",
        gs: this.datalist.length,
        krr: this.pointI.length,
        bkrr: this.pointIun.length,
      });
    },
    //itic曲线图
    iticData() {
      this.gongfunction();
      let echartsColor = JSON.parse(window.localStorage.echartsColor);
      var white = "#000";
      const echarts = require("echarts");
      let domID1 = document.getElementById("itic");
      this.myChartes = echarts.init(domID1, null, { renderer: "svg" });
      setTimeout(() => {
        (domID1.style.width =
          document.getElementById("ITIC").offsetWidth - 240 + "px"),
          (domID1.style.height =
            window.sessionStorage.getItem("appheight") - 300 + "px");
      }, 0);
      this.myChartes.clear()
      var option = {
        title: {
          text: "ITIC曲线",
          x: "center",
          textStyle: {
            fontSize: yan.EchartObject.titleNamefontSize1,
            color: echartsColor.WordColor,
          },
        },
        grid: yan.EchartObject.grid9,

        tooltip: {
          trigger: "item",
          show: true,
          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)",
          borderWidth: 0,
          formatter: function (a) {
            var relVal = "";
            relVal =
              "<font style='color:" +
              "'>发生时间:" +
              a.value[2] +
              "</font><br/>";
            relVal +=
              "<font style='color:" +
              "'>持续时间:" +
              a.value[0] +
              "s</font><br/>";
            relVal +=
              "<font style='color:" +
              "'>特征幅值:" +
              a.value[1].toFixed(2) +
              "%</font>";
            return relVal;
          },
        },
        legend: {
          data: ["上限", "下限", "可容忍事件", "不可容忍事件"],
          //  selectedMode: false,
          x: "left",
        },
        color: ["#FF8C00", "#00BFFF", "green", "red"],
        xAxis: [
          {
            type: "log",
            min: "0.001",
            max: "1000",
            splitLine: {
              show: false,
            },
            name: "s",
            axisLine: {
              lineStyle: {
                color: echartsColor.thread,
              },
            },
            axisLabel: {
              color: echartsColor.WordColor,
            },
          },
        ],

        yAxis: [
          {
            type: "value",
            splitNumber: 10,
            minInterval: 3,
            name: yan.EchartObject.nuit1,
            nameTextStyle: {
              color: echartsColor.WordColor,
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: echartsColor.thread,
              },
            },
            axisLabel: {
              color: echartsColor.WordColor,
              fontSize: yan.EchartObject.yNamefontSize,
            },
            splitLine: {
              lineStyle: {
                // 使用深浅的间隔色
                color: [echartsColor.thread],
                type: "dashed",
                opacity: 0.5,
              },
            },
          },
        ],
        series: [
          {
            name: "上限",
            type: "line",
            data: this.top,
            showSymbol: false,
            tooltips: {
              show: false,
            },
          },
          {
            name: "下限",
            type: "line",
            data: this.bot,
            showSymbol: false,
            tooltips: {
              show: false,
            },
          },
          {
            name: "可容忍事件",
            type: "scatter",
            symbol: "circle",
            data: this.pointI,
          },
          {
            name: "不可容忍事件",
            type: "scatter",
            symbol: "circle",
            data: this.pointIun,
          },
        ],
      };

      this.myChartes.setOption(option)
window.echartsArr.push(this.myChartes);
      // myChart.resize();
      let _this = this;
       this.myChartes.off("click");
       this.myChartes.on("click", function (params) {
        _this.$emit("eventId", params.data.value[3]);})
      _this.$erd.listenTo(_this.$refs.itic, (element) => {
        _this.$nextTick(() => {
          //  domID1.style.width = document.getElementById("drag-dept-right").offsetWidth - 30 + "px",
          (domID1.style.width =
            document.getElementById("ITIC").offsetWidth - 0 + "px"),
            _this.myChartes.resize();
        });
      });
    },
    resizeEchart() {
      var elementResizeDetectorMaker = require("element-resize-detector");
      var erd = elementResizeDetectorMaker();
      erd.listenTo(document.getElementById("ITIC"), (element) => {
        let domeId = document.getElementById("ITIC");
        let domeId2 = document.getElementById("itic");
        domeId2.style.width = domeId.offsetWidth - 0 + "px";
        // this.$nextTick(() => {
          if (this.myChartes !== "") {
            this.myChartes.resize();
          }
        // });
      });
    },
  },

  computed: {},

  watch: {},
};
</script>
<style lang="scss" scoped>
.wzhi {
  z-index: 1;
  font-size: 14px;
  //font-weight: 550;
  // margin-top: 10px;
  right: 10px;
  top: 0;
  position: absolute;
}
</style>
