<template>
  <!-- 趋势分析 -->
  <el-dialog
    :title="finalyText"
    :visible.sync="visible"
    width="1060px"
    @close="cancel"
  >
    <div class="chartLineAll">
      <el-radio-group class="radio_box" v-model="date" size="mini">
        <el-radio-button :label="1">年</el-radio-button>
        <el-radio-button :label="2">月</el-radio-button>
      </el-radio-group>
      <div v-if="date == 1" class="date_show">
        <el-button
          icon="el-icon-arrow-left"
          size="mini"
          @click="lastYear()"
        ></el-button>
        {{ year }}年
        <el-button
          icon="el-icon-arrow-right"
          :disabled="isDisableYear"
          size="mini"
          @click="nextYear()"
        ></el-button>
      </div>
      <div v-else class="date_show">
        <el-button
          icon="el-icon-arrow-left"
          size="mini"
          @click="lastMonth()"
        ></el-button>
        {{ year }}年{{ month }}月
        <el-button
          icon="el-icon-arrow-right"
          :disabled="isDisableMonth"
          size="mini"
          @click="getNextMonth()"
        ></el-button>
      </div>
      <div ref="chartLine" :key="componentKeys" class="chartLine"></div>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="cancel">关 闭</el-button>
    </span>
  </el-dialog>
</template>

<script>
import * as echarts from "echarts"
import { getYear, getMonth } from '../api'

export default {
  props: {
    flag: {
      type: Number,
      default: 0
    },
    selectId: {
      type: [Number, String],
      defualt: null,
    },
    type: {
      type: Number,
      defualt: null,
    },
    curInfo: {
      type: Object,
      default: () => { }
    }
  },
  data() {
    var now = new Date()
    return {
      myChartLine: null,
      date: 1,
      visible: false,
      year: now.getFullYear(),
      month: now.getMonth() + 1,
      preMonth: now.getMonth(),
      nextMonth: now.getMonth() + 1 + 1,
      componentKeys: 0
    }
  },
  computed: {
    finalyText() {
      if (this.$route.query.name) {
        return '趋势分析图形(' + this.$route.query.name + ')';
      } else if (this.type == 0) {
        return '趋势分析图形(' + this.curInfo.baseInfo.leakyCableDescribe + ')';
      } else {
        return '趋势分析图形(' + this.curInfo.baseInfo.feederDescribe + ')';
      }
    },
    isDisableYear() {
      return this.year >= new Date().getFullYear();
    },
    isDisableMonth() {
      return this.month >= new Date().getMonth() + 1;
    }
  },
  watch: {
    flag: {
      immediate: true,
      handler(newV) {
        this.visible = !!newV;
      }
    },
    date(newV) {
      this.year = new Date().getFullYear();
      this.month = new Date().getMonth() + 1;
      this.init(newV);
    },
    visible(newV) {
      if (newV) {
        this.componentKeys++;
        this.$nextTick(() => {
          this.init(1);
        })
      }
    }
  },
  mounted() {
    this.setNewDate();
  },
  methods: {
    // 获取时间
    setNewDate() {//设置日期的方法
      let now = new Date();
      if (this.month == 1) { //当前月为1月时，上一个月显示为12月
        this.preMonth = 12;
      }
      if (this.month == 12) { //当前月为12月时，下一个月显示为1月
        this.nextMonth = 1;
      }
      now.setFullYear(this.year, this.month, 0);
      now.setFullYear(this.year, this.month - 1, 0);
    },
    // 上个月
    lastMonth() {
      this.month = this.preMonth;
      this.preMonth = this.month - 1;
      this.nextMonth = this.month + 1;
      if (this.month == 12) { //边界值判断
        this.year--;
      }
      this.setNewDate();
      this.init(2);
    },
    // 下个月
    getNextMonth() {
      this.month = this.nextMonth;
      this.preMonth = this.month - 1;
      this.nextMonth = this.month + 1;
      if (this.month == 1) { //边界值判断
        this.year++;
      }
      this.setNewDate();
      this.init(2);
    },
    // 上一年
    lastYear() {
      this.year--;
      this.init(1);
    },
    // 下一年
    nextYear() {
      this.year++;
      this.init(1);
    },
    // 初始化数据
    init(type) {
      let params = {
        type: this.type,
        applyId: this.$route.query.id ? this.$route.query.id : this.selectId,
        creationTime: this.date == 1 ? this.year + '-00-00 00:00:00' : this.year + '-' + this.month
      }
      if (type == 1) {
        getYear(params).then(res => {
          let list = res || [];
          this.getLine(list);
        })
      } else {
        params.creationTime = this.year + '-' + (this.month < 10 ? '0' + (this.month) : this.month);
        getMonth(params).then(res => {
          let list = res || [];
          this.getLine(list);
        })
      }
      window.addEventListener("resize", () => {
        this.myChartLine.resize();
      })
    },
    // 初始化图
    getLine(data) {
      this.myChartLine = echarts.init(this.$refs.chartLine)
      // 图例
      let X = Object.keys(data)
      let dataList = Object.values(data)
      let list = []
      let dataObj = {
        dataArr0: [],
        dataArr1: [],
        dataArr2: [],
      }
      dataList.map(item => {
        dataObj.dataArr0.push(item[0].value)
        dataObj.dataArr1.push(item[1].value)
        dataObj.dataArr2.push(item[2].value)
      })
      for (var i = 0; i < 3; i++) {
        let obj = {}
        obj = {
          name: `驻波比${i + 1}`,
          type: 'line',
          data: dataObj[`dataArr${i}`],
          smooth: true,
          emphasis: {
            focus: 'series',
          },
        }
        list.push(obj)
      }
      let option = {
        title: {
          text: '趋势分析图形',
          textStyle: {
            color: '#fff',
          }
        },
        tooltip: {
          trigger: 'axis',
        },
        legend: {
          data: ['驻波比1', '驻波比2', '驻波比3']
        },
        animation: true,
        grid: {
          left: '3%',
          right: '4%',
          bottom: '8%',
          containLabel: true,
        },
        xAxis: {
          type: 'category',
          boundaryGap: true,
          data: X,
          axisLabel: {
            show: true,
            textStyle: {
              color: '#9D9FD6',
            }
          }
        },
        yAxis: {
          name: '驻波比',
          type: 'value',
          axisLine: { show: true },
          splitLine: {
            lineStyle: {
              type: 'dashed',
              color: '#9D9FD6',
              opacity: 0.2
            }
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: '#9D9FD6'
            }
          }
        },
        series: list
      }
      this.myChartLine.setOption(option);
    },
    // 取消
    cancel() {
      this.visible = false;
      this.$emit('cancel');
    }
  }
}
</script>

<style lang="scss" scoped>
.chart {
  height: 344px;
  margin-top: 20px;
  .chartLineAll {
    position: relative;
    margin: 0 20px;
    width: 44%;
    .chartLine {
      height: 100%;
    }
  }
}
.radio_box {
  position: absolute;
  left: 20px;
  z-index: 99;
}
.date_show {
  text-align: center;
}
</style>