<template>
  <div>
    <Card style="width:100%;">
      <div class="config_meta">
        <p class="fl">年度检测量统计</p>
        <div class="fr">
          <Tooltip content="刷新" placement="left-start">
            <Icon @click="_request" type="ios-refresh" size="30" color="#2d8cf0" style="cursor:pointer;"></Icon>
          </Tooltip>
        </div>
        <div class="clear"></div>
      </div>
      <Row>
        <Col span="24" style="margin-bottom: 10px">
        日期：
        <DatePicker v-model="date" :editable="false" @on-change="_dateChange" type="year"
                    style="width:90px"></DatePicker>
        </Col>
        <Col span="24">
        <div style="width:100%">
          <!--柱状图-->
          <IEcharts :option="option" :style="{width}" style="height: 238px"></IEcharts>
        </div>
        </Col>
      </Row>
    </Card>
  </div>
</template>
<script>
// import IEcharts from 'vue-echarts-v3/src/full.js'

export default {
  components: {},
  data() {
    return {
      width: '',
      date: new Date(),
      option: {
        color: this.$echartColor,
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            crossStyle: {
              color: '#999'
            }
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true,
          x: 130
        },
        legend: {
          data: ['样品量', '项目未超标量', '项目超标量']
        },
        xAxis: [
          {
            type: 'category',
            data: []
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '样品量',
            splitLine: { show: false }
          },
          {
            type: 'value',
            name: '检测项目量',
            splitLine: { show: false }
          }
        ],
        series: [
          {
            name: '样品量',
            type: 'bar',
            data: [1, 2, 3, 4, 5, 6, 7, 8, 9]
          },
          {
            name: '项目未超标量',
            type: 'bar',
            yAxisIndex: 1,
            stack: '检测项目量',
            data: [6, 7, 8, 9, 10, 11, 12, 13, 14]
          },
          {
            name: '项目超标量',
            type: 'bar',
            yAxisIndex: 1,
            stack: '检测项目量',
            data: [11, 12, 13, 14, 15, 16, 17, 18, 19]
          }
        ]
      },
      // 临时存储x轴数据
      tempXAxis: []
    }
  },
  mounted() {
    this.width = (document.documentElement.clientWidth - 300) / 2 + 'px'
    this._dateChange(this.$dateformat(new Date(), 'yyyy'))
  },
  methods: {
    _request() {
      // this._openBar(this.year)
    },
    // 改变年份
    _dateChange(data) {
      // this._openBar(data)
    },
    _openBar(data) {
      this.year = data
      this.option.xAxis[0].data = []
      for (let i = 1; i < 13; i++) {
        if (i < 10) {
          this.option.xAxis[0].data.push(data + '-0' + i)
        } else {
          this.option.xAxis[0].data.push(data + '-' + i)
        }
      }
      this.$store
        .dispatch('FoodContract/pageYearItem', { year: data })
        .then(() => {
          const result = this.$store.state.FoodContract.model
          const month = [
            'jan',
            'feb',
            'mar',
            'apr',
            'may',
            'jun',
            'jul',
            'aug',
            'sep',
            'oct',
            'nov',
            'dece'
          ]
          const sampleCount = result.sampleCount
          const itemCountNotOver = result.itemCountNotOver
          const itemCountOver = result.itemCountOver

          const sampleCountData = []
          const itemCountOverData = []
          const itemCountNotOverData = []

          for (let i = 0; i < month.length; i++) {
            const m = month[i]
            sampleCountData.push(sampleCount[m])
            itemCountNotOverData.push(itemCountNotOver[m])
            itemCountOverData.push(itemCountOver[m])
          }
          this.option.series[0].data = sampleCountData
          this.option.series[1].data = itemCountNotOverData
          this.option.series[2].data = itemCountOverData
        })
    }
  }
}
</script>
