<template>
  <div class="border-chart-color">
    <div class="chartTitle">
      <label>报告及时率统计</label>
    </div>
    <Form id="report-timely-pie">
      <input name="beginDate" type="hidden">
      <input name="endDate" type="hidden">
      <input name="warningDate" type="hidden">
    </Form>
    <div :style="heightObj" class="chartCont">
      <div style="width:90%">
        <IEcharts :option="option" :style="optionObj" @click="_pieClick"></IEcharts>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      name: 'A',
      heightObj: {
        height: '300px'
      },
      option: {
        tooltip: {
          trigger: 'item',
          formatter: function(a) {
            return (
              a.name +
              '</br>样品量: ' +
              a.data.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: [],
            avoidLabelOverlap: false,
            label: {
              normal: {
                show: false,
                position: 'center'
              },
              emphasis: {
                show: true,
                textStyle: {
                  fontSize: '30',
                  fontWeight: 'bold'
                }
              }
            },
            labelLine: {
              normal: {
                show: false
              }
            }
          }
        ]
      },
      optionObj: {
        height: ''
      },
      pageParams: {},
      pie: [],
      timeWrning: []
    }
  },
  mounted() {
    this._contHide()
  },
  methods: {
    _contHide() {
      this.optionObj.height = document.documentElement.clientHeight - 300 + 'px'
      this.heightObj.height = document.documentElement.clientHeight - 272 + 'px'
      this.optionObj.width =
        (document.documentElement.clientWidth - 200) / 2.6 + 'px'
    },
    _openPie(data) {
      this.option.series[0].data = []
      this.option.legend.data = []
      const testerList = []
      for (let i = 0; i < data.length; i++) {
        testerList.push(data[i].type)
        this.option.series[0].data.push({
          name: data[i].type,
          value: data[i].quantity
        })
        // this.option.legend.data.push(this.data[i].type)
      }
      this.option.legend.data = testerList
      console.log('963258', this.option.legend.data)
    },
    _searchPie(data) {
      this.option.series[0].data = []
      this.option.legend.data = []
      for (let i = 0; i < data.length; i++) {
        this.option.series[0].data.push({
          name: this.pie[i].type,
          value: this.pie[i].quantity
        })
        this.option.legend.data.push(this.pie[i].type)
      }
    },
    _searchParams() {
      const data = this.$serialize('report-timely-pie')
      return this.$extend(data, this.pageParams)
    },
    _pieClick(res) {
      this.$emit('on-result-change', res.data.name)
    }
  }
}
</script>
