<template>
  <div id="MonthChart">
    <div
      id="monthecharts"
      ref="month"
      :style="`width:100%;height:100%;`"
    ></div>
  </div>
</template>
<script>
import yan from "@/assets/commjs/color";

import { getReasonTypeTime } from "@/api/monitoringpointStatistics/echart";
export default {
  components: {},
  props: {
    item: {
      default: ["", ""],
    },
    timeFlag: {
      default: 1,
    },
    intervald: {},
  },
  data() {
    return {
      loading: true,
      //月份模拟数据
      datamock: [],
      zoom: "",
      myChartes: "",
      myChartes1: null,
    };
  },
  created() {},
  mounted() {
    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();
      }
    });
    this.$nextTick(() => {
      this.query();
    });
  },
  methods: {
    // 查询
    query() {
      this.loading = true;

      let form = {
        lineIndex: this.$store.state.user.lineID,
        startTime: this.item[0],
        endTime: this.item[1],
        flag: this.timeFlag,
      };
      getReasonTypeTime(form).then((res) => {
        this.datamock = res.data;
        this.eventmonth();
      });
    },
    //暂降次数
    eventmonth() {
      var months = new Array();
      var handle = new Array();
      if (this.datamock != null) {
        for (var i = 0; i < this.datamock.length; i++) {
          if ((this.datamock[i].month == "01") | (i == 0)) {
            if (this.timeFlag == 0) {
              months[i] = this.datamock[i].month;
            } else {
              months[i] = this.datamock[i].month + "-" + this.datamock[i].day;
            }
          } else {
            if (this.timeFlag == 0) {
              months[i] = this.datamock[i].month;
            } else {
              months[i] = this.datamock[i].month + "-" + this.datamock[i].day;
            }
          }
          handle[i] = this.datamock[i].times;
        }
      }
      const echarts = require("echarts");
      let domID1 = document.getElementById("monthecharts");
      this.myChartes = echarts.init(domID1, null, { renderer: "svg" });
      setTimeout(() => {
        (domID1.style.width =
          (window.sessionStorage.getItem("MonthChart") - 220) / 1.5 + "px")(
          (domID1.style.height =
            window.sessionStorage.getItem("appheight") - 140 + "px")
        );
      }, 0);

      let echartsColor = JSON.parse(window.localStorage.echartsColor);
      this.myChartes.clear();
      var option = {
        backgroundColor: "#fff", //背景色,
        title: {
          text:
            this.intervald == 3
              ? "月份统计"
              : this.intervald == 2
              ? "季度统计"
              : this.intervald == 1
              ? "年份统计"
              : "",
          x: "center",
          textStyle: {
            fontSize: yan.EchartObject.titleNamefontSize1,
            color: echartsColor.WordColor,
          },
        },
        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 += "<font>时间:" + params[0].name + "</font><br/>";
            tips += "<font>暂降次数:" + params[0].data + "</font>";
            return tips;
          },
        },

        dataZoom: yan.EchartObject.dataZoom,
        color: ["#FF8C00"],
        legend: {
          data: ["暂降次数"],
          x: "right",
        },
        grid: yan.EchartObject.grid4,

        xAxis: [
          {
            type: "category",
            data: months,
            name: "时间",
            axisLine: {
              lineStyle: {
                color: echartsColor.thread,
              },
            },
            axisLabel: {
              textStyle: {
                fontFamily: yan.EchartObject.fontFamily,
                color: echartsColor.WordColor,
                fontSize: yan.EchartObject.xNamefontSize,
              },
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            name: "次",
            nameTextStyle: {
              color: echartsColor.WordColor,
            },
            minInterval: 1,
            axisLine: {
              show: true,
              lineStyle: {
                color: echartsColor.thread,
              },
            },
            axisLabel: {
              color: echartsColor.WordColor,
              fontSize: yan.EchartObject.xNamefontSize,
            },
            splitLine: {
              lineStyle: {
                // 使用深浅的间隔色
                color: [echartsColor.thread],
                type: "dashed",
                opacity: 0.5,
              },
            },
          },
        ],
        series: [
          {
            name: "暂降次数",
            type: "bar",
            barMaxWidth: 30,
            barMinHeight: 5,
            itemStyle: {
              normal: {
                color: function (params) {
                  // console.log(params,'1111111111111111111111');
                  if (params.data == 0) {
                    return "#ccc";
                  } else {
                    return "#FF8C00";
                  }
                },
                label: {
                  show: true,
                  textStyle: {
                    label: { show: true, position: "top" },
                    color: "#8B008B",
                  },
                },
              },
            },
            data: handle,
          },
        ],
      };
      this.myChartes.setOption(option)
window.echartsArr.push(this.myChartes);
      // myChart.resize();
      let _this = this;
      _this.$erd.listenTo(_this.$refs.month, (element) => {
        _this.$nextTick(() => {
          //  domID1.style.width = document.getElementById("drag-dept-right").offsetWidth - 30 + "px",
          (domID1.style.width =
            document.getElementById("MonthChart").offsetWidth - 0 + "px"),
            _this.myChartes.resize();
        });
      });
    },
    resizeEchart() {
      var elementResizeDetectorMaker = require("element-resize-detector");
      var erd = elementResizeDetectorMaker();
      erd.listenTo(document.getElementById("MonthChart"), (element) => {
        let domeId = document.getElementById("MonthChart");
        let domeId2 = document.getElementById("monthecharts");
        domeId2.style.width = domeId.offsetWidth - 0 + "px";
        // this.$nextTick(() => {
        if (this.myChartes !== "") {
          this.myChartes.resize();
        }
        // });
      });
    },
  },

  computed: {},

  watch: {},
};
</script>
<style lang="scss" scoped></style>
