<!--
  @description: 报表统计-采购计划统计
  @Modifier：肖文龙
  @routerPath:
  @date：  2021/01/27
-->
<template>
  <div>
    <div class="reportChart-content">
      <!-- 统计分析-采购计划统计-搜索条件 -->
      <planStatisticsSearch />
      <!-- 统计分析-总汇组件 -->
      <statisticsCrud :list="crudList" />
      <el-row :gutter="crudObj.gutter" class="el-row-x-1">
        <!-- 采购计划累计信息 -->
        <el-col :span="8">
          <planGrandTotalInfoCurd reportchart="reportChart" :height="heightData.planGrandTotalInfoCurd_h" />
        </el-col>
        <!-- 常规采购与紧急采购占比 -->
        <el-col :span="8">
          <planAndRoutineOrUrgencyRateChart reportchart="reportChart" :height="heightData.planAndRoutineOrUrgencyRateChart_h" />
        </el-col>
        <!-- 自采与集采占比 -->
        <el-col :span="8">
          <oneselfProcOrGatherProcRateChart reportchart="reportChart" :height="heightData.oneselfProcOrGatherProcRateChart_h" />
        </el-col>
      </el-row>
      <el-row :gutter="crudObj.gutter" class="el-row-x-1">
        <!-- 分类采购 -->
        <el-col>
          <planClassifyChart reportchart="reportChart" :height="heightData.planClassifyChart_h" />
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script>
/* api */
import { getProcurementPlanInfoNumber } from '@api/statisticalAnalysis/reportChart.js'
/* 公共方法*/
import { addChineseUnit } from '@/assets/js/utils' // 为数字加上单位：万或亿
/* 组件 */
import planStatisticsSearch from './planStatisticsSearch.vue' // 统计分析-采购计划统计-搜索条件
import statisticsCrud from './../../components/statisticsCrud.vue' // 统计分析-总汇组件图
import planGrandTotalInfoCurd from './../planGrandTotalInfo/planGrandTotalInfoCurd.vue' // 采购计划累计信息
import planAndRoutineOrUrgencyRateChart from './../planAndRoutineOrUrgencyRate/planAndRoutineOrUrgencyRateChart.vue' // 常规采购与紧急采购占比
import oneselfProcOrGatherProcRateChart from './../oneselfProcOrGatherProcRate/oneselfProcOrGatherProcRateChart.vue' // 自采与集采占比
import planClassifyChart from './../planClassify/planClassifyChart.vue' // 分类采购

export default {
  inject: ['crudObj'],
  components: {
    planStatisticsSearch, // 采购计划统计-搜索条件
    statisticsCrud, // 统计分析-总汇组件
    planGrandTotalInfoCurd, // 采购计划累计信息
    planAndRoutineOrUrgencyRateChart, // 常规采购与紧急采购占比
    oneselfProcOrGatherProcRateChart, // 自采与集采占比
    planClassifyChart // 分类采购
  },
  data() {
    return {
      // echarts 高度换算
      heightData: {
        search_h: '2.6875rem', // 搜索条件的高度
        statisticsCrud_h: '4.75rem', // 总汇组件高度
        h_p: '1.875rem', // 间距
        planGrandTotalInfoCurd_h: '', // 采购计划累计信息
        planAndRoutineOrUrgencyRateChart_h: '', // 常规采购与紧急采购占比
        oneselfProcOrGatherProcRateChart_h: '', // 自采与集采占比
        planClassifyChart_h: '' // 分类采购
      },
      // 统计汇总
      crudList: []
    }
  },
  created() {
    this.initHeightData()// 高度计算
  },
  methods: {
    // 高度计算
    initHeightData() {
      // 计算content一减去头部的高度
      let bidAndProcMapCharts_h = ''
      if (this.crudObj.height_default) {
        bidAndProcMapCharts_h = this.crudObj.height_default
      } else {
        bidAndProcMapCharts_h = 'calc( ' +
        this.crudObj.height_default + ' - ' +
        this.crudObj.header_H + ' - ' +
        this.heightData.search_h + ' - ' +
        this.heightData.h_p + ' - ' +
        this.heightData.statisticsCrud_h + ')'
      }

      // 分类采购
      this.heightData.planClassifyChart_h = `calc((${bidAndProcMapCharts_h} - .625rem) / 2)`
      // 常规采购与紧急采购占比
      this.heightData.planAndRoutineOrUrgencyRateChart_h = this.heightData.planClassifyChart_h
      // 自采与集采占比
      this.heightData.oneselfProcOrGatherProcRateChart_h = this.heightData.planClassifyChart_h
      //  采购计划累计信息
      this.heightData.planGrandTotalInfoCurd_h = this.heightData.planClassifyChart_h
    },
    /**
     * 获取平台运营情况信息数据
     *  @param {searchData} Object 查询条件
    */
    initChart(searchData) {
      const data = {
        ...searchData
      }
      getProcurementPlanInfoNumber(data).then(res => {
        this.crudData(res.data)// 统计汇总
      })
    },
    // 统计汇总
    crudData(data) {
      this.crudList = [
        {
          name: '上报计划条数',
          value: addChineseUnit(data.reportPlanNumber),
          suffix: '条',
          width: '13%',
          code: '00'
        },
        {
          name: '已执行计划条数',
          value: addChineseUnit(data.completedPlanNumber),
          suffix: '条',
          width: '13%',
          code: '00'
        },
        {
          name: '未执行计划条数',
          value: addChineseUnit(data.noCompletedPlanNumber),
          suffix: '条',
          width: '13%',
          code: '00'
        },
        {
          name: '完成率',
          value: data.completedPlanRate,
          suffix: '%',
          width: '8%',
          code: '00'
        },
        {
          name: '常规采购项目',
          value: addChineseUnit(data.conventionalPurchaseNum),
          suffix: '条',
          width: '12%',
          code: '00'
        },
        {
          name: '紧急采购项目',
          value: addChineseUnit(data.urgentPurchaseNum),
          suffix: '条',
          width: '12%',
          code: '00'
        },
        {
          name: '上报计划总预算',
          value: addChineseUnit(data.reportPlanAmount * 10000),
          suffix: '元',
          width: '15%',
          code: '00'
        },
        {
          name: '执行计划总预算',
          value: addChineseUnit(data.completedPlanAmount * 10000),
          suffix: '元',
          width: '14%',
          code: '00'
        }
      ]
    }
  }
}
</script>
<style lang="less" scoped>
</style>
