<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}" @click="_detail" style="height: 238px"></IEcharts>
        </div>
        </Col>
      </Row>
    </Card>
  </div>
</template>
<script>
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: [],
            axisPointer: {
              type: ''
            },
            axisLine: {
              lineStyle: {
                color: 'gray'
              }
            },
            splitLine: { show: false }
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '超标数量',
            min: 0,
            axisLabel: {
              formatter: '{value}'
            },
            axisLine: {
              lineStyle: {
                color: 'gray'
              }
            },
            splitLine: { show: false }
          },
          {
            type: 'value',
            name: '超标率(%)',
            min: 0,
            axisLabel: {
              formatter: '{value}'
            },
            axisLine: {
              lineStyle: {
                color: 'gray'
              }
            },
            splitLine: { show: false }
          }
        ],
        series: [
          {
            name: '超标数量',
            type: 'bar',
            data: [10, 20, 30, 40, 50, 60, 70, 80, 90, 100, 110, 120]
          },
          {
            name: '超标率',
            type: 'line',
            yAxisIndex: 1,
            data: [10, 20, 30, 40, 50, 60, 70, 80, 90, 100, 110, 120]
          }
        ]
      }
    }
  },
  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/pageYearOverItem', { year: data })
        .then(() => {
          const result = this.$store.state.FoodContract.list
          this.option.series[0].data = []
          this.option.series[1].data = []
          for (let j = 0; j < result.length; j++) {
            for (let k = 0; k < this.option.xAxis[0].data.length; k++) {
              if (result[j].testDateMonth === this.option.xAxis[0].data[k]) {
                this.option.series[0].data[k] = result[j].total
                this.option.series[1].data[k] = result[j].unQualifiedPercent
              }
            }
          }
        })
    }
  }
}
</script>
