<template>
  <div class="app-container-Lossrate">
    <div id="LossrateChart" :style="{height:height,width:width}"></div>
  </div>
</template>

<script>
  import {listMonthplan} from "@/api/production/monthplan";
  import resize from "./mixins/resize";

  export default {
  mixins: [resize],
  props: {
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '180px'
    },
    year: {
      type: Number,
    }
  },
  data() {
    return {
      //显示表格数据
      chartsList1: [],
      chartsList2: [],
      // 查询参数
      queryParams: {
        item: 4,
        year: 2020
      },
      // 获取当前年份
      searchFormField: {
        year: this.getNowTime(),
      },
      chart: null
    }
  },
  watch: {
    year(newValue, oldValue) {
      this.queryParams.year = newValue
      this.getList()
    }
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  mounted() {
    this.$nextTick(() => {
      /*this.queryParams.year = this.searchFormField.year;*/
      this.getList()
    })
  },
  methods: {
    getList() {
      listMonthplan(this.queryParams).then(response => {
        this.chartsList1 = response.rows[0];
        this.chartsList2 = response.rows[1];
        this.chartsList3 = response.rows[2];
        this.initChart()
      });
    },
    /** 获取当前年份 */
    getNowTime() {
      var now = new Date();
      var year = now.getFullYear(); //得到年份
      var defaultDate = `${year}`;
      return defaultDate;
      this.$set(this.searchFormField, "year", defaultDate);
    },
    initChart() {
      // 基于准备好的dom，初始化echarts实例
      this.chart = this.echarts.init(document.getElementById('LossrateChart'))

      this.chart.setOption({
        color: ['#00DDFF', '#37A2FF'],
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985'
            }
          }
        },
        /* 标识 */
        legend: {
          data: ['实际', '计划'],
          textStyle:{
            color: '#ffffff'//字体颜色
          }
        },
        /* 周围边距 */
        grid: {
          left: '3%',
          right: '3%',
          bottom: '1%',
          top: '13%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24', '25', '26', '27', '28', '29', '30', '31'],
            axisLabel: {//x轴文字的配置
              show: true,
              textStyle: {
                color: '#ffffff',
              }
            },
          }
        ],
        yAxis: [
          {
            type: 'value',
            axisLabel: {
              textStyle: {
                fontSize: 10,
                color: '#ffffffff',
                margin: 15
              },
            }
          }
        ],
        series: [
          {
            name: this.$t('实际'),
            type: 'line',
            stack: this.$t('总量'),
            smooth: true,
            lineStyle: {
              width: 0
            },
            showSymbol: false,
            areaStyle: {
              opacity: 0.8,
              color: new this.echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: 'rgba(0, 221, 255)'
              }, {
                offset: 1,
                color: 'rgba(77, 119, 255)'
              }])
            },
            emphasis: {
              focus: 'series'
            },
            data: [120, 282, 111, 234, 220, 340, 310, 120, 282, 111, 234, 220, 340, 310, 120, 282, 111, 234, 220, 340, 310, 120, 282, 111, 234, 220, 340, 310]
          },
          {
            name: this.$t('计划'),
            type: 'line',
            stack: this.$t('总量'),
            smooth: true,
            lineStyle: {
              width: 0
            },
            showSymbol: false,
            areaStyle: {
              opacity: 0.8,
              color: new this.echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: 'rgba(55, 162, 255)'
              }, {
                offset: 1,
                color: 'rgba(116, 21, 219)'
              }])
            },
            emphasis: {
              focus: 'series'
            },
            data: [320, 132, 201, 334, 190, 130, 220, 320, 132, 201, 334, 190, 130, 220, 320, 132, 201, 334, 190, 130, 220, 320, 132, 201, 334, 190, 130, 220]
          },
        ]
      })
    }
  }
}
</script>
