<!--
  @description:供应商统计
  @Modifier: zhangyawen
  @routerPath: /statisticalManagement/supplierStatisticsChart
  @date: 2021-4-22-14:00
-->
<template>
  <div class="reportChart-main-review">
    <statisticsChartHeader :title="'供应商统计'" />
    <section class="reportChart-content">
      <el-form ref="searchForm" :model="searchForm" inline>
        <el-form-item label="统计时间">
          <el-date-picker
            v-model="searchForm.timeDate"
            popper-class="reportChart_date-picker"
            :value-format="elValueFormat"
            :unlink-panels="true"
            range-separator="至"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            type="daterange"
            @change="timeDateChange"
          />
        </el-form-item>
        <el-form-item class="fr">
          <el-button type="primary" round @click="search">
            统计
          </el-button>
          <el-button type="primary" round @click="resetForm('searchForm')">
            重置
          </el-button>
        </el-form-item>
      </el-form>
      <statisticsCrud :list="crudList" />
      <el-row :gutter="crudData.gutter" class="el-row-x-1">
        <el-col :span="12">
          <!-- 中选金额TOP10 -->
          <supplierWinBIdMoneyTOP
            reportchart="reportChart"
            :data="allData.supplierWinningMoneyData"
            :searchdata="searchData"
            :height="heightData.planChart_h"
          />
        </el-col>
        <el-col :span="12">
          <!-- 中选次数TOP10 -->
          <supplierWinBIdNumberTOP
            reportchart="reportChart"
            :data="allData.supplierWinningNumData"
            :searchdata="searchData"
            :height="heightData.planChart_h"
          />
        </el-col>
      </el-row>
      <el-row :gutter="crudData.gutter" class="el-row-x-1">
        <el-col :span="12">
          <!-- 参与次数TOP10 -->
          <supplierTenderBIdNumberTOP
            reportchart="reportChart"
            :data="allData.supplierBidNumData"
            :searchdata="searchData"
            :height="heightData.planChart_h"
          />
        </el-col>
        <el-col :span="12">
          <!-- 弃标供应商名单 -->
          <listOfAbandonedBidSuppliers
            reportchart="reportChart"
            :data="allData.supplierFailNumData"
            :searchdata="searchData"
            :height="heightData.planChart_h"
          />
        </el-col>
      </el-row>
      <!-- 集采供应商供应物资类别及交易金额对比图 -->
      <el-row :gutter="crudData.gutter" class="el-row-x-1">
        <el-col>
          <suppliesCategoryAndTransactionAmountChart
            reportchart="reportChart"
            :collection-num-money="allData.collectionNumMoney"
            :height="heightData.planChart_h"
          />
        </el-col>
      </el-row>
    </section>
  </div>
</template>

<script>
/* eslint-disable */
import statisticsChartHeader from './../statisticalChartCommon/statisticsChartHeader.vue' // 头部
import statisticsCrud from './../statisticalChartCommon/statisticsCrud.vue' // 汇总
import supplierWinBIdMoneyTOP from './supplierWinBIdMoney/supplierWinBIdMoneyTOP.vue' // 中选金额TOP10
import supplierWinBIdNumberTOP from './supplierWinBIdNumber/supplierWinBIdNumberTOP.vue' // supplierWinBIdNumberTOP
import supplierTenderBIdNumberTOP from './supplierTenderBIdNumber/supplierTenderBIdNumberTOP.vue' // 参与次数TOP10
import listOfAbandonedBidSuppliers from './listOfAbandonedBidSuppliers/listOfAbandonedBidSuppliers.vue' // 弃标供应商名单
import suppliesCategoryAndTransactionAmountChart from './suppliesCategoryAndTransactionAmountChart.vue' // 弃标供应商名单

/* 公共方法*/
import { filterObj, cloneObject, restoreInitialValue, addChineseUnit } from '@/assets/js/utils' // 过滤空的key 克隆对象 初始化 为数字加上单位：万或亿
/* api */
import { getProcurementSupplierStatistics } from '@/api/procurement/statisticalManagement'
export default {
  name: 'SupplierStatisticsChart',
  components: {
    statisticsChartHeader,
    statisticsCrud,
    supplierWinBIdMoneyTOP,
    supplierWinBIdNumberTOP,
    supplierTenderBIdNumberTOP,
    listOfAbandonedBidSuppliers,
    suppliesCategoryAndTransactionAmountChart
  },
  data() {
    return {
      searchForm: {
        timeDate:[],//统计时间
        statisticalStartTime:'',//统计时间-开始
        statisticalEndTime:'',//统计时间-结束
      },
      crudList: [],
      crudData: {
        gutter: 10, // 栅格间隔
        height_default: '46.3125rem', // 默好认内容高度
        height: '100vh', // 内容高度
        header_H: '7.875rem' // 头部的高度
      },
      // echarts 高度换算
      heightData: {
        search_h: '2.6875rem', // 搜索条件的高度
        statisticsCrud_h: '4.75rem', // 总汇组件高度
        h_p: '1.875rem', // 间距
        bidAndProcMapCard_h: '', // 招采地图高度
        planChart_h: '' // 中选金额TOP10高度统一
      },
      allData: {}// 页面数据
    }
  },
  computed: {
    searchData() {
      let obj = cloneObject(this.searchForm)
      delete obj.timeDate
      return obj
    }
  },
  created() {
    this.initHeightData() // 高度计算
    this.initChart(this.searchData)
  },
  methods: {
    // 高度计算
    initHeightData() {
      // 招采地图高度
      if (this.crudData.height_default) {
        this.heightData.bidAndProcMapCard_h = this.crudData.height_default
      } else {
        this.heightData.bidAndProcMapCard_h =
          'calc( ' +
          this.crudData.height_default +
          ' - ' +
          this.crudData.header_H +
          ' - ' +
          this.heightData.search_h +
          ' - ' +
          this.heightData.h_p +
          ' - ' +
          this.heightData.statisticsCrud_h +
          ')'
      }

      // 中选金额TOP10高度统一
      this.heightData.planChart_h = `calc((${this.heightData.bidAndProcMapCard_h} - .625rem) / 2)`
    },
    /**
     * 获取平台运营情况信息数据
     *  @param {searchData} Object 查询条件
     */
    initChart(searchData) {
      const data = {
        ...filterObj(searchData)
      }
      getProcurementSupplierStatistics(data).then(res => {
        this.crudData1(res.data.supplierStaticticsData)// 统计汇总
        this.allData = res.data
      })
    },
    // 选择时间
    timeDateChange(val) {
      this.searchForm.statisticalStartTime = this.$Moment(val[0]).format(
        this.momentDate
      )
      this.searchForm.statisticalEndTime = this.$Moment(val[1]).format(
        this.momentDate
      )
    },
    // 统计
    search() {
      this.initChart(this.searchData)
    },
    // 重置
    resetForm() {
      restoreInitialValue(this.searchForm)
      this.search()
    },
    // 统计汇总
    crudData1(data) {
      this.crudList = [
        {
          name: '供应商总数',
          value: data.allNum,
          suffix: '家',
          width: '12%',
          code: '00'
        },
        {
          name: '集采供应商数量',
          value: data.collectionNum,
          suffix: '家',
          width: '12%',
          code: '00'
        },
        {
          name: '自采供应商数量',
          value: data.selfNum,
          suffix: '家',
          width: '10%',
          code: '00'
        },
        {
          name: '招标供应商数量',
          value: data.bidNum,
          suffix: '家',
          width: '10%',
          code: '00'
        },
        {
          name: '集采供应商占比',
          value: data.collectionNumRate,
          suffix: data.collectionNumRate? '' : '%',
          width: '11%',
          code: '00'
        },
        {
          name: '自采供应商占比',
          value: data.selfNumRate,
          suffix: data.selfNumRate? '' : '%',
          width: '10%',
          code: '00'
        },
        {
          name: '招标供应商占比',
          value: data.bidNumRate,
          suffix: data.bidNumRate? '' : '%',
          width: '14%',
          code: '00'
        }
      ]
    }
  }
}
</script>

<style lang="less">
@import "./../statisticalChartCommon/reportChart.less";
</style>
