<template>
  <div class="app-container-Qzft">
    <div id="QzftChart" :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: '200px'
    },
    year: {
      type: Number,
    }
  },
  data() {
    return {
      //显示表格数据
      chartsList1: [],
      chartsList2: [],
      chartsList3: [],
      // 查询参数
      queryParams: {
        item: 2,
        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('QzftChart'))

      this.chart.setOption({
        color: ['#4a7cf9', '#6be5ea', '#fff4f4'],
        // color: ['#f05326', '#eed777', '#fff4f4'],
        /* 周围边距 */
        grid: {
          left: '3%',
          right: '3%',
          bottom: '1%',
          top: '13%',
          containLabel: true
        },
        /* 标识 */
        legend: {
          data: ['Actul', 'Plan', 'OAE'],
          textStyle:{
            color: '#ffffff'//字体颜色
          },
          right: 5,
          top: -5
        },
        /* 坐标轴显示 */
        tooltip: {
          trigger: 'axis',
          axisPointer: {            // 坐标轴指示器，坐标轴触发有效
            type: 'cross',
            label: {
              backgroundColor: '#a0a0a0'
            }
          }
        },
        xAxis: {
          data: ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],
          axisLabel: {//x轴文字的配置
            show: true,
            textStyle: {
              color: '#ffffff',
            }
          },
          axisLine: {//x轴线的颜色以及宽度
            show: true,
            lineStyle: {
              color: '#ffffff',
              width: 0,
              type: "solid"
            }
          },
        },
        yAxis: [
          {
            type: 'value',
            name: 'Unit:(t)',
            min: 0,
            interval: 10000,
            axisLabel: {
              formatter: '{value}',
              textStyle: {
                fontSize: 10,
                color: '#ffffffff',
                margin: 15
              },
            }
          },
          {
            type: 'value',
            min: 0,
            interval: 20,
            axisLabel: {
              formatter: '{value} %',
              textStyle: {
                fontSize: 10,
                color: '#ffffffff',
                margin: 15
              },
            }
          }
        ],
        series: [
          {
            name: 'Actul',
            type: 'bar',
            barWidth: '25%',
            data: [this.chartsList1.jan, this.chartsList1.feb, this.chartsList1.mar, this.chartsList1.apr, this.chartsList1.may, this.chartsList1.jun, this.chartsList1.jul, this.chartsList1.aug, this.chartsList1.sep, this.chartsList1.oct, this.chartsList1.nov, this.chartsList1.dec]
          },
          {
            name: 'Plan',
            type: 'bar',
            barWidth: '25%',
            data: [this.chartsList2.jan, this.chartsList2.feb, this.chartsList2.mar, this.chartsList2.apr, this.chartsList2.may, this.chartsList2.jun, this.chartsList2.jul, this.chartsList2.aug, this.chartsList2.sep, this.chartsList2.oct, this.chartsList2.nov, this.chartsList2.dec]
          },
          {
            name: 'OAE',
            type: 'line',
            yAxisIndex: 1,
            data: [this.chartsList3.jan, this.chartsList3.feb, this.chartsList3.mar, this.chartsList3.apr, this.chartsList3.may, this.chartsList3.jun, this.chartsList3.jul, this.chartsList3.aug, this.chartsList3.sep, this.chartsList3.oct, this.chartsList3.nov, this.chartsList3.dec]
          }
        ]
      })
    }
  }
}
</script>
