<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.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: [],
        }
        // let dataArr0 = []
        // let dataArr1 = []
        // let 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%;
    // flex: 900;
    .chartLine {
      height: 100%;
    }
  }
}
.radio_box {
  position: absolute;
  left: 20px;
  z-index: 99;
}
.date_show {
  text-align: center;
}
</style>