<template>
  <div class="border-chart-color">
    <div class="chartTitle">
      <label>{{groupName}} 员工工作量比率</label>
    </div>
    <div :style="heightObj" class="chartCont">
      <div v-if="showStatistic" style="width:90%">
        <IEcharts :option="option" :style="optionObj"></IEcharts>
      </div>
      <div v-else :style="noDataObj" class="no-statistic-bg"></div>
    </div>
    <form id="persontal-task-pie">
      <input name="groupId" type="hidden"/>
      <input name="beginDate" type="hidden"/>
      <input name="endDate" type="hidden"/>
      <input name="groupName" type="hidden"/>
      <input name="serviceType" type="hidden"/>
    </form>
  </div>
</template>

<script>
// import IEcharts from 'vue-echarts-v3/src/full'
export default {
  // components: { IEcharts },
  data() {
    return {
      // 科室名称
      groupName: '',
      showStatistic: true,
      heightObj: {
        height: '300px'
      },
      option: {
        title: {
          x: 'center',
          textStyle: {
            fontSize: 14,
            fontWeight: 'normal'
          }
        },
        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: ['50%', '70%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '30',
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: [
              { value: 335, name: '直接访问' },
              { value: 310, name: '邮件营销' },
              { value: 234, name: '联盟广告' },
              { value: 135, name: '视频广告' },
              { value: 1548, name: '搜索引擎' }
            ]
          }
        ]
      },
      optionObj: {
        height: ''
      },
      noDataObj: {
        marginTop: ''
      }
    }
  },
  mounted() {
    this._contHide()
  },
  methods: {
    _contHide() {
      this.optionObj.height = document.documentElement.clientHeight - 300 + 'px'
      this.heightObj.height = document.documentElement.clientHeight - 272 + 'px'
      this.noDataObj.marginTop =
        (document.documentElement.clientHeight - 450) / 2 + 'px'
      this.optionObj.width =
        (document.documentElement.clientWidth - 200) / 2.6 + 'px'
    },
    _openPie(data) {
      // alert(this.option.series[0].data)
      const testerList = []
      const seriesList = []
      let total = 0
      for (let i = 0; i < data.length; i++) {
        testerList.push(data[i].tester)
        total = total + data[i].total
        seriesList.push({
          value: data[i].total,
          name: data[i].tester,
          total: data[i].total,
          ratio: data[i].ratio
        })
      }
      this.option.title.text = '检测项目总量(个):' + total
      this.option.legend.data = testerList
      this.option.series[0].data = seriesList
      console.log(this.option.series[0].data)
    },

    _searchParams() {
      const data = this.$serialize('persontal-task-pie')
      return this.$extend(data)
    }
  }
}
</script>
