<!--
  @description:集采采购单统计
  @Modifier: zhangyawen
  @routerPath: /statisticalManagement/purchaseOrderStatisticsChart
  @date: 2021-4-22-10:50
-->
<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">
          <!-- 发布采购单情况 -->
          <issuePurchaseOrderStatusChartComp
            reportchart="reportChart"
            :project-pass-data="projectPassData"
            :height="heightData.planChart_h"
          />
        </el-col>
        <el-col :span="12">
          <!-- 完成采购单 -->
          <completePurchaseOrderChartComp
            reportchart="reportChart"
            :winning-pass-data="winningPassData"
            :height="heightData.planChart_h"
          />
        </el-col>
      </el-row>
    </section>
  </div>
</template>

<script>
import statisticsChartHeader from './../statisticalChartCommon/statisticsChartHeader.vue'
import statisticsCrud from './../statisticalChartCommon/statisticsCrudGroup.vue'
import issuePurchaseOrderStatusChartComp from './issuePurchaseOrderStatusChartComp.vue'
import completePurchaseOrderChartComp from './completePurchaseOrderChartComp.vue'

/* 公共方法*/
import { filterObj, cloneObject, restoreInitialValue } from '@/assets/js/utils' // 过滤空的key 初始化 为数字加上单位：万或亿
/* api */
import { getProcurementProjectStatistics } from '@/api/procurement/statisticalManagement'
export default {
  name: 'PurchaseOrderStatisticsChart',
  components: {
    statisticsChartHeader,
    statisticsCrud,
    issuePurchaseOrderStatusChartComp,
    completePurchaseOrderChartComp
  },
  data() {
    return {
      searchForm: {},
      crudList: [],
      projectPassData: [], // 发布采购单情况
      winningPassData: [], // 完成采购单情况
      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: '' // 发布采购单情况高度统一
      }
    }
  },
  created() {
    this.initHeightData() // 高度计算
    this.initChart(cloneObject(this.searchForm))
  },
  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 +
          ')'
      }

      // 发布采购单情况高度统一
      this.heightData.planChart_h = `calc((${this.heightData.bidAndProcMapCard_h} - .625rem) / 2)`
    },
    /**
     * 获取平台运营情况信息数据
     *  @param {searchData} Object 查询条件
     */
    initChart(searchData) {
      delete searchData.timeDate
      const data = {
        ...filterObj(searchData)
      }
      getProcurementProjectStatistics(data).then(res => {
        this.crudData1(res.data.tenderProjectStaticticsData)// 统计汇总
        this.projectPassData = res.data.projectPassData
        this.winningPassData = res.data.winningPassData
      })
    },
    // 选择时间
    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(cloneObject(this.searchForm))
    },
    // 重置
    resetForm() {
      restoreInitialValue(this.searchForm)
      this.search()
    },
    // 统计汇总
    crudData1(data) {
      this.crudList = [{
        groupWidth: '26%',
        groupData: [{
          name: '发出采购单总数',
          value: data.projectPassNum,
          suffix: '个',
          width: '50%',
          code: '00'
        },
        {
          name: '预算净总价',
          value: data.projectPassMoney,
          suffix: '万元',
          width: '50%',
          code: '00'
        }]
      }, { groupWidth: '62%', groupData: [{
        name: '已完成采购单数',
        value: data.winningPassNum,
        suffix: '个',
        width: '25%',
        code: '00'
      }, {
        name: '预算净总价',
        value: data.winningPassBudget,
        suffix: '万元',
        width: '25%',
        code: '00'
      }, {
        name: '中选净总价',
        value: data.winningPassMoney,
        suffix: '万元',
        width: '25%',
        code: '00'
      }, {
        name: '已确认净总价',
        value: data.orderConfirmMoney,
        suffix: '万元',
        width: '25%',
        code: '00'
      }] }]
    }
  }
}
</script>

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