<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">
          制单日期：
          <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: 238px"></IEcharts>
          </div>
          <div v-show="!showStatistic" style="height: 238px;text-align: center;" class="no-statistic-bg"><p style="position: relative;top: 100px;">暂无数据</p></div>
        </Col>
      </Row>
    </Card>
    <!--委托详情-->
<!--    <DetectTypeContractDetail ref="detectTypeDetail"></DetectTypeContractDetail>-->
  </div>
</template>
<script>
// import IEcharts from 'vue-echarts-v3/src/full.js'
// import DetectTypeContractDetail from '../../lims/food-test/envAnalysisManage/detect-type/ContractDetail'

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: '直接访问' },
              { value: 310, name: '邮件营销' },
              { value: 234, name: '联盟广告' },
              { value: 135, name: '视频广告' },
              { value: 1548, name: '搜索引擎' }
            ],
            label: {
              normal: {
                show: false
              }
            },
            labelLine: {
              normal: {
                show: false
              }
            }
          }
        ]
      },
      tempData: {
        ctimeBegin: '',
        ctimeEnd: ''
      },
      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.ctimeBegin = firstdate
    this.tempData.ctimeEnd = this.$dateformat(newDate, 'yyyy-mm-dd')
    // this._getPie()
  },
  methods: {
    _request() {
      this._getPie()
    },
    // 日期
    _ctimeChange(data) {
      this.tempData.ctimeBegin = data[0]
      this.tempData.ctimeEnd = data[1]
      this._getPie()
    },
    _getPie() {
      this.showStatistic = false
      const detectList = []
      const seriesList = []
      let total = 0
      this.$store
        .dispatch(
          'StatisticContract/detectTypeList',
          this.$serializeFormSearch(this.tempData)
        )
        .then(() => {
          const result = this.$store.state.StatisticContract.list
          for (let i = 0; i < result.length; i++) {
            detectList.push(
              result[i].detectType === undefined ? '' : result[i].detectType
            )
            total = total + result[i].contractAmount
            seriesList.push({
              value: result[i].contractAmount,
              name:
                result[i].detectType === undefined ? '' : result[i].detectType,
              total: result[i].contractAmount
            })
            if (detectList.length === 0) {
              this.showStatistic = false
            } else {
              this.showStatistic = true
            }
          }
          this.option.title.text = ' 委托总额(元): ' + total
          this.option.legend.data = detectList
          this.option.series[0].data = seriesList
        })
    },
    // 查看委托详情
    _detail(data) {
      const temp = {
        queryDateBegin: this.tempData.ctimeBegin,
        queryDateEnd: this.tempData.ctimeEnd
      }
      this.$refs.detectTypeDetail._open(data.name, temp)
    }
  }
}
</script>
