<template>
  <div v-loading="loading" element-loading-text="数据加载中" id="EventChance">
    <div
      id="eventChance"
      ref="eventChance"
      :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 yan from "@/assets/commjs/color";
import html2canvas from "html2canvas";

import { getProbabilityDistribution } from "@/api/monitoringpointStatistics/echart";
export default {
  components: {},
  props: {
    item: {
      default: ["", ""],
    },
  },
  data() {
    return {
      loading: true,
      zoom: "",
      myChartes: '',
      //暂降概率率分布模拟数据
      eventList: {},
    };
  },
  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("eventChance"), {
        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],
      };
      getProbabilityDistribution(form).then((res) => {
        this.eventList = res.data;
        this.eventChance();
        this.loading = false;
      });
    },
    //暂降幅值概率分布函数
    eventChance() {
      var eventValue = this.eventList.eventvalue;
      var pereventValue = this.eventList.pereventvalue;
      const echarts = require("echarts");
      let domID1 = document.getElementById("eventChance");
      this.myChartes = echarts.init(domID1, null, { renderer: "svg" });
      setTimeout(() => {
        (domID1.style.width =
          document.getElementById("EventChance").offsetWidth - 220 + "px"),
          (domID1.style.height =
            window.sessionStorage.getItem("appheight") - 100 + "px");
      }, 0);
      let echartsColor = JSON.parse(window.localStorage.echartsColor);
      this.myChartes.clear();
      var option = {
        backgroundColor: "#fff", //背景色,
        title: {
          text: "暂降幅值的概率分布函数",
          x: "center",
          textStyle: {
            color: echartsColor.WordColor,
            fontSize: yan.EchartObject.titleNamefontSize1,
          },
        },
        legend: {
          show: true,
          left: 10,
          data: ["概率分布", "占比"],

          textStyle: {
            color: echartsColor.WordColor,
            rich: {
              a: {
                verticalAlign: "middle",
              },
            },

            padding: [2, 0, 0, 0], //[上、右、下、左]
          },
        },

        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)",
          borderWidth: 0,
        },
        calculable: true,
        grid: yan.EchartObject.grid11,
        xAxis: [
          {
            type: "category",
            name: "暂降幅值",
            nameGap: 10,
            nameTextStyle: {
              fontSize: 12,
            },
            axisLine: {
              lineStyle: {
                color: echartsColor.thread,
              },
            },
            axisLabel: {
             textStyle: {
                fontFamily: yan.EchartObject.fontFamily,
                color: echartsColor.WordColor,
                fontSize:yan.EchartObject.xNamefontSize
              },
            },
            data: [
              "0",
              "10%",
              "20%",
              "30%",
              "40%",
              "50%",
              "60%",
              "70%",
              "80%",
              "90%",
              "100%",
            ],
          },
        ],
        yAxis: [
          {
            type: "value",
            name: "概率分布",
            nameTextStyle: {
              fontSize: 15,
            },
            axisLabel: {
              color: echartsColor.WordColor,
              formatter: "{value}%",
               fontSize: yan.EchartObject.yNamefontSize,
            },
            nameTextStyle: {
              color: echartsColor.WordColor,
            },

            axisLine: {
              show: true,
              lineStyle: {
                color: echartsColor.thread,
              },
            },

            splitLine: {
              lineStyle: {
                // 使用深浅的间隔色
                color: [echartsColor.thread],
                type: "dashed",
                opacity: 0.5,
              },
            },
          },
          {
            type: "value",
            name: "占比",

            nameTextStyle: {
              fontSize: 15,
            },
            axisLabel: {
              formatter: "{value}%",
              color: echartsColor.WordColor,
                fontSize: yan.EchartObject.yNamefontSize,
            },
            nameTextStyle: {
              color: echartsColor.WordColor,
            },

            axisLine: {
              show: true,
              lineStyle: {
                color: echartsColor.thread,
              },
            },

            splitLine: {
              lineStyle: {
                // 使用深浅的间隔色
                color: [echartsColor.thread],
                type: "dashed",
                opacity: 0.5,
              },
            },
          },
        ],
        series: [
          {
            name: "概率分布",
            type: "line",
            data: eventValue,
            itemStyle: {
              normal: { show: true, color: echartsColor.FigureColor[0] },
            },
          },
          {
            name: "占比",
            type: "bar",
            data: pereventValue,
            barWidth: 30,
            itemStyle: {
              normal: { show: true, color: echartsColor.FigureColor[1] },
            },
          },
        ],
      };
      this.myChartes.setOption(option)
window.echartsArr.push(this.myChartes);
      // myChart.resize();
      let _this = this;
      _this.$erd.listenTo(_this.$refs.eventChance, (element) => {
        _this.$nextTick(() => {
          //  domID1.style.width = document.getElementById("drag-dept-right").offsetWidth - 30 + "px",
          (domID1.style.width =
            document.getElementById("EventChance").offsetWidth - 0 + "px"),
            _this.myChartes.resize();
        });
      });
    },
    resizeEchart() {
      var elementResizeDetectorMaker = require("element-resize-detector");
      var erd = elementResizeDetectorMaker();
      erd.listenTo(document.getElementById("EventChance"), (element) => {
        let domeId = document.getElementById("EventChance");
        let domeId2 = document.getElementById("eventChance");
        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>
