<template>
  <div>
    <Card style="width:100%;">
      <div class="config_meta">
        <p class="fl">委托完成额占比</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">
        制单日期：
        <DatePicker v-model="beginMonth" :editable="false" @on-change="_request" type="month"
                    style="width:90px"></DatePicker>
        <label class="line-color">——</label>
        <DatePicker v-model="endMonth" :editable="false" @on-change="_request" type="month"
                    style="width:90px"></DatePicker>
        </Col>
        <Col span="24">
        <div v-show="showStatistic" style="width:100%">
        <IEcharts :option="option" @ready="_onReady" :style="{width}"
                  style="height:238px"></IEcharts>
        </div>
        <div v-show="!showStatistic" class="no-statistic-bg"></div>
        </Col>
      </Row>
    </Card>
  </div>
</template>

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

export default {
  components: {},
  data() {
    return {
      width: '',
      beginMonth: new Date(),
      endMonth: new Date(),
      option: {
        color: this.$echartColor,
        tooltip: {
          trigger: 'item',
          formatter: '{b} : {c} ({d}%)'
        },
        legend: {
          left: 'center',
          top: 10,
          data: ['未完成委托额', '已完成委托额']
        },
        series: [
          {
            name: '委托完成额',
            type: 'pie',
            radius: '55%',
            center: ['50%', '60%'],
            data: [
              { value: 335, name: '未完成委托额' },
              { value: 310, name: '已完成委托额' }
            ],
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      },
      showStatistic: true
    }
  },
  mounted() {
    this.width = (document.documentElement.clientWidth - 280) / 2 + 'px'
    // this._request()
  },

  methods: {
    _request() {
      this.showStatistic = false
      const data = {}
      data.beginMonth = this.$dateformat(this.beginMonth, 'yyyy-mm')
      data.endMonth = this.$dateformat(this.endMonth, 'yyyy-mm')
      this.$store.dispatch('FoodContract/contractEndNum', data).then(() => {
        const result = this.$store.state.FoodContract.model
        const series = []
        if (result !== undefined) {
          series.push({ value: result.contractAmount, name: '已完成委托额' })
          series.push({ value: result.noContractAmount, name: '未完成委托额' })
        }
        this.option.series[0].data = series
        if (series.length === 0) {
          this.showStatistic = false
        } else {
          this.showStatistic = true
        }
      })
    },
    _onReady() {
      // this._request();
    }
  }
}
</script>
