<template>
  <div>
    <Card style="width:100%;">
      <div class="config_meta">
        <p class="fl" style="margin-bottom: 10px;">客户委托分析</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">
          制单日期：
          <Date-picker @on-change="_ctimeChange" v-model="dateList" type="daterange" split-panels
                       style="width:200px" placeholder="请选择日期"></Date-picker>
        </Col>
        <Col span="24">
          <div v-show="showStatistic" style="width:100%">
            <!--饼图-->
            <IEcharts :option="option" :style="{width}" @click="_detail" style="height: 242px"></IEcharts>
          </div>
          <div v-show="!showStatistic" class="no-statistic-bg"></div>
        </Col>
      </Row>
    </Card>
    <!--委托详情-->
  </div>
</template>
<script>
export default {
  components: {},
  data() {
    return {
      width: '',
      option: {
        title: {
          x: 'center',
          textStyle: {
            fontSize: 18,
            fontWeight: 'normal'
          }
        },
        tooltip: {
          trigger: 'item',
          formatter: function(a) {
            return (
              a.name +
              '</br>委托量: ' +
              a.data.total +
              '<br>占比: ' +
              a.percent +
              '%'
            )
          }
        },
        legend: {
          orient: 'horizontal',
          y: 'bottom',
          data: ['已开完发票']
        },
        color: this.$echartColor,
        series: [
          {
            name: '',
            type: 'pie',
            radius: ['40%', '70%'],
            center: ['50%', '50%'],
            data: [{ value: 335, name: '已开完发票' }],
            label: {
              normal: {
                show: false
              }
            },
            labelLine: {
              normal: {
                show: false
              }
            }
          }
        ]
      },
      tempData: {
        signDateBegin: '',
        signDateEnd: ''
      },
      dateList: [],
      showStatistic: true
    }
  },
  mounted() {
    this.width = (document.documentElement.clientWidth - 300) / 2 + 'px'
    const newDate = new Date()
    const year = newDate.getFullYear()
    let month = newDate.getMonth() + 1
    if (month < 10) {
      month = '0' + month
    }
    const firstdate = year + '-' + month + '-01'
    this.dateList = [new Date(firstdate), new Date()]
    this.tempData.signDateBegin = firstdate
    this.tempData.signDateEnd = this.$dateformat(newDate, 'yyyy-mm-dd')
    // this._getPie()
  },
  methods: {
    // 日期
    _ctimeChange(data) {
      this.tempData.signDateBegin = data[0]
      this.tempData.signDateEnd = data[1]
      this._getPie()
    },
    // 查看委托详情
    _detail(data) {
      const temp = {
        signDateBegin: this.tempData.signDateBegin,
        signDateEnd: this.tempData.signDateEnd
      }
      this.$refs.detectTypeDetail._open(data.name, temp)
    }
  }
}
</script>
