<template>
  <div class="border-chart-color">
    <div class="chartTitle">
      <label>{{year}}年度委托量统计</label>
    </div>
    <div :style="heightObj" class="chartCont">
      <div v-if="showStatistic" style="width:90%">
        <IEcharts :option="option"  :style="optionObj"></IEcharts>
      </div>
      <div v-else class="no-statistic-bg" style="margin-top: 100px"></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: {
        title: {
          textStyle: {
            fontSize: 14,
            fontWeight: 'normal'
          },
          text: '',
          x: 'center'
        },
        tooltip: {
          trigger: 'item',
          // formatter: "{b}<br/> : {c} ({d}%)"
          formatter: function(a) {
            return (
              a.name +
              '<br>委托额: ' +
              a.value +
              '</br>占比: ' +
              a.percent +
              '%'
            )
          }
        },
        legend: {
          type: 'scroll',
          orient: 'vertical',
          right: 0,
          top: 20,
          bottom: 20,
          data: []
        },
        color: this.$echartColor,
        series: [
          {
            name: '',
            type: 'pie',
            radius: ['30%', '65%'],
            center: ['40%', '50%'],
            data: [],
            label: {
              normal: {
                show: false
              }
            },
            labelLine: {
              normal: {
                show: false
              }
            }
          }
        ]
      },
      optionObj: {
        height: ''
      },
      pageParams: {},
      pie: [],
      year: '',
      showStatistic: true
    }
  },
  mounted() {
    console.log(this.option.series[0].data)
    this._contHide()
  },
  methods: {
    _contHide() {
      this.optionObj.height =
        (document.documentElement.clientHeight - 300) * (2 / 3) + 'px'
      this.optionObj.width =
        (document.documentElement.clientWidth - 200) / 3.2 + 'px'
      this.heightObj.height =
        (document.documentElement.clientHeight - 272) * (2 / 3) + 'px'
    },
    _openPie(data, result) {
      this.showStatistic = true
      this._page(data, result)
    },
    _page(data, result) {
      this.year = data
      if (result.length === 0) {
        this.option.series[0].data = []
      } else {
        let total = 0
        const testerList = []
        for (let i = 0; i < result.length; i++) {
          testerList.push(result[i].entrustDate)
          total = total + result[i].quantity
          const obj = {}
          obj.name = result[i].entrustDate
          obj.value = result[i].quantity
          obj.fee = result[i].fee
          this.option.series[0].data.push(obj)
        }
        this.option.title.text = '检测项目总量(个):' + total
        this.option.legend.data = testerList
      }
    },
    _searchParams() {
      const data = this.$serialize('customer-contract-pie')
      return this.$extend(data, this.pageParams)
    }
  }
}
</script>
