<!--
  @description: 报表统计-中标供应商占比
  @Modifier：肖文龙
  @routerPath:
  @date：  2021/02/23
-->
<template>
  <dl
    class="reportChart_crud"
    :style="{'height':height}"
  >
    <dt>
      中标供应商占比
      <p class="right">
        <span style="margin-right:10px">
          <i class="iconfont icon-xiazai1" @click="dowloadClick" />
        </span>
      </p>
    </dt>
    <dd class="expertTotalCurd_dd">
      <div class="suppler_left">
        <!--百分比图 -->
        <!-- 供应商总数 -->
        <gaugeChart :option-data="gaugeChartOption" />
      </div>
      <div class="suppler_right">
        <!-- 中标供应商数量 -->
        <gaugeChart :option-data="gaugeMonthChartOption" />
      </div>
    </dd>
  </dl>
</template>

<script>
/* api */
import { getWinningSupplierInfo, exportWinningSupplierInfo } from '@api/statisticalAnalysis/reportChart.js'
/* 公用方法*/
import { download } from '@/assets/js/utils'// 常用方法
/* 公用方法 */
import { GetPercent } from '@assets/js/utils'// 百分比计算
/* 组件 */
import gaugeChart from './../../components/gaugeChart.vue' // 统计分析-百分比图
export default {
  name: 'WinBidSupplierRateCurd',
  components: {
    gaugeChart
  },
  props: {
    height: {
      type: String,
      default: '100%'
    }
  },
  data() {
    return {
      // 百分比图-自定义参数
      // 供应商总数
      gaugeChartOption: {
        title: {
          text: ''
        },
        series: {
          radius: '60%'
        },
        value: '', // 占比
        yuanLineColor: '#00a7f0'// 进度颜色
      },
      // 中标供应商数量
      gaugeMonthChartOption: {
        title: {
          text: ''
        },
        series: {
          radius: '60%'
        },
        value: '20', // 占比
        yuanLineColor: '#FFFF00'// 进度颜色
      },
      // 查询条件
      searchData: {}
    }
  },
  created() {
    // 获取数据
    this.initChart()
  },
  methods: {
    // 下载
    dowloadClick() {
      const data = { ...this.searchData }
      exportWinningSupplierInfo(data).then(res => {
        download(res, '中标供应商占比表.xls')
      })
    },
    /**
     * 获取数据
     *  @param {searchData} Object 查询条件
    */
    initChart(searchData) {
      this.searchData = searchData
      const data = {
        ...searchData
      }
      getWinningSupplierInfo(data).then(res => {
        // 文字赋值
        this.gaugeChartOption.title.text = `初审供应商数量：${res.data.totalCount}` + '\n\n' + `年中标供应商数量：${res.data.yearWinningCount}` + '\n\n年'
        this.gaugeMonthChartOption.title.text = `初审供应商数量：${res.data.totalCount}` + '\n\n' + `月中标供应商数量：${res.data.monthWinningCount}` + '\n\n月'
        //                                                             中标供应商 / 供应商总数 计算占比
        this.gaugeChartOption.value = GetPercent(res.data.yearWinningCount, res.data.totalCount)
        //                                                             中标供应商 / 供应商总数 计算占比
        this.gaugeMonthChartOption.value = GetPercent(res.data.monthWinningCount, res.data.totalCount)
      })
    }
  }
}
</script>
<style lang="less" scoped>
.expertTotalCurd_dd {
  padding: 1rem 0;
  .suppler_left{
    float: left;
    width: 50%;
    height: 100%;
  }
  .suppler_right{
    float: left;
    width: 50%;
    height: 100%;
  }
  /deep/.echart-dom{
    height: 100%;
  }
}
</style>
