<!--
  @description: 报表统计-专家数量统计
  @Modifier：肖文龙
  @routerPath:
  @date：  2021/02/23
-->
<template>
  <dl
    class="reportChart_crud"
    :style="{'height':height}"
  >
    <dt>
      专家数量统计
      <p class="right">
        <span>
          <i class="iconfont icon-xiazai1" @click="dowloadClick" />
        </span>
      </p>
    </dt>
    <dd class="expertTotalCurd_dd">
      <div class="expertTotalCurd_dd-top">
        <p>
          <!--百分比图-内部 -->
          <gaugeChart :option-data="gaugeChartOption" />
        </p>
        <p>
          <!--百分比图-外部 -->
          <gaugeChart :option-data="gaugeChartOption2" />
        </p>
      </div>
      <div class="expertTotalCurd_dd-bottom">
        <!-- 统计分析-总汇组件 -->
        <statisticsCrud :list="crudData" />
      </div>
    </dd>
  </dl>
</template>

<script>
/* api */
import { getExpertNumberStatistic, exportExpertNumberStatistic } from '@api/statisticalAnalysis/reportChart.js'
/* 公共方法*/
import { GetPercent, addChineseUnit, download } from '@/assets/js/utils' // 百分比计算 为数字加上单位：万或亿
/* 组件 */
import statisticsCrud from './statisticsCrud.vue' // 统计分析-总汇组件图
import gaugeChart from './../../components/gaugeChart.vue' // 统计分析-百分比图
export default {
  name: 'ExpertTotalCurd',
  components: {
    statisticsCrud, // 统计分析-总汇组件息
    gaugeChart
  },
  props: {
    height: {
      type: String,
      default: '100%'
    }
  },
  data() {
    return {
      // 查询条件
      searchData: {},
      // 总汇组件数据
      crudData: [],
      // 百分比图-自定义参数-内部
      gaugeChartOption: {
        title: {
          text: '内部'
        },
        // series: {
        //   axisLine: {
        //     width: 20
        //   }
        // },
        value: '', // 占比
        yuanLineColor: '#00a7f0'// 进度颜色
      },
      // 百分比图-自定义参数-外部
      gaugeChartOption2: {
        title: {
          text: '外部'
        },
        // series: {
        //   axisLine: {
        //     width: 20
        //   }
        // },
        value: '', // 占比
        yuanLineColor: '#feff00'// 进度颜色
      }
    }
  },
  methods: {
    // 下载
    dowloadClick() {
      const data = { ...this.searchData }
      exportExpertNumberStatistic(data).then(res => {
        download(res, '专家数量统计.xls')
      })
    },
    /**
     * 获取数据
     *  @param {searchData} Object 查询条件
    */
    initChart(searchData) {
      this.searchData = searchData
      const data = {
        ...searchData
      }
      getExpertNumberStatistic(data).then((res) => {
        this.loadCrudData(res.data)
        this.gaugeChartOption.value = GetPercent(res.data.internalNumber, res.data.totalNubmer)// 内部
        this.gaugeChartOption2.value = GetPercent(res.data.outSideNumber, res.data.totalNubmer)// 外部
      })
    },
    // 统计汇总
    loadCrudData(data) {
      this.crudData = [
        {
          name: '专家总数',
          value: addChineseUnit(data.totalNubmer),
          suffix: '个',
          width: '33.3333%',
          code: '00'
        },
        {
          name: '内部专家数量',
          value: addChineseUnit(data.internalNumber),
          suffix: '个',
          width: '33.3333%',
          code: '00'
        },
        {
          name: '外部专家数量',
          value: addChineseUnit(data.outSideNumber),
          suffix: '个',
          width: '33.3333%',
          code: '00'
        }
      ]
    }
  }
}
</script>
<style lang="less" scoped>
.expertTotalCurd_dd {
  padding: 6% 0;
  .expertTotalCurd_dd-top {
    box-sizing: border-box;
    height: 70%;
    &>p{
      height: 100%;
      float: left;
      width: 50%;
    }
  }
  .expertTotalCurd_dd-bottom{
    height: 30%;
  }
  /deep/.echart-dom{
    height: 100%;
  }
}
</style>
