<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" :clearable="false"
                    type="year" style="width:90px"></DatePicker>
        </Col>
        <Col span="24">
        <div style="width:100%">
          <!--柱状图-->
          <IEcharts :option="option" :style="{width}" @click="_detail" style="height: 302px"></IEcharts>
        </div>
        </Col>
      </Row>
    </Card>
    <!--月详情-->
<!--    <contractNumDetail ref="contractNumDetail"></contractNumDetail>-->
  </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: [],
            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]
          }
        ]
      },
      // 临时存储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 = []
      this.tempXAxis = []
      for (let i = 1; i < 13; i++) {
        if (i < 10) {
          this.tempXAxis.push(data + '-0' + i)
        } else {
          this.tempXAxis.push(data + '-' + i)
        }
        this.option.xAxis[0].data.push(i + '月')
      }
      this.$store
        .dispatch('StatisticContract/pageYearContract', { year: data })
        .then(() => {
          const bar = this.$store.state.StatisticContract.page
          this.option.series[0].data = []
          this.option.series[1].data = []
          for (let j = 0; j < bar.length; j++) {
            for (let k = 0; k < this.tempXAxis.length; k++) {
              if (bar[j].yearMonth === this.tempXAxis[k]) {
                this.option.series[0].data[k] = bar[j].total
                this.option.series[1].data[k] = bar[j].price
              }
            }
          }
        })
    },
    // 查看每月详情
    _detail(data) {
      // 11月 转换成 2018-11
      const index = this.option.xAxis[0].data.indexOf(data.name)
      const yearMonth = this.tempXAxis[index]
      this.$refs.contractNumDetail._open({ yearMonth: yearMonth })
    }
  }
}
</script>
