<template>
  <div class="border-chart-color" style="border: 1px solid #e9eaec">
    <div class="chartTitle">
      <label>{{ year }}年度委托量统计</label>
    </div>
    <div :style="heightObj" class="chartCont">
      <div style="width:85%">
        <IEcharts :option="option" :style="optionObj"></IEcharts>
      </div>
    </div>
  </div>
</template>

<script>
// import IEcharts from '../../../../../../node_modules/vue-echarts-v3/src/full.js';

export default {
  // components: {IEcharts},
  data() {
    return {
      name: 'A',
      heightObj: {
        height: '300px'
      },
      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: []
          },
          {
            name: '委托金额',
            type: 'line',
            yAxisIndex: 1,
            data: []
          }
        ]
      },
      optionObj: {
        height: ''
      },
      year: ''
    }
  },
  mounted() {
    this._contHide()
  },
  methods: {
    _contHide() {
      this.optionObj.height =
        (document.documentElement.clientHeight - 300) * (2 / 3) + 'px'
      this.optionObj.width =
        (document.documentElement.clientWidth - 200) / 1.6 + 'px'
      this.heightObj.height =
        (document.documentElement.clientHeight - 272) * (2 / 3) + 'px'
    },
    _openBar(data, result) {
      this.year = data
      this.option.xAxis[0].data = []
      if (result.length === 0) {
        this.option.xAxis[0].data = []
        this.option.series[0].data = []
        this.option.series[1].data = []
      } else {
        for (let i = 0; i < result.length; i++) {
          this.option.xAxis[0].data.push(result[i].entrustDate)
          this.option.series[0].data.push(result[i].quantity)
          this.option.series[1].data.push(result[i].fee)
        }
      }

      // 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.option.xAxis[0].data.length; k++) {
      //         if (bar[j].yearMonth === this.option.xAxis[0].data[k]) {
      //           this.option.series[0].data[k] = bar[j].total
      //           this.option.series[1].data[k] = bar[j].price
      //         }
      //       }
      //     }
      //   })
    }
  }
}
</script>
