<!--
  @description:集采订单统计
  @Modifier: zhangyawen
  @routerPath: /statisticalManagement/collectivePurchaseOrderStatisticsChart
  @date: 2021-4-23-14:35
-->
<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 label="板块查询" prop="belongBk">
          <el-select
            v-model="searchForm.belongBk"
            placeholder="全部"
            style="width: 220px"
            popper-class="el-select-reportChart"
          >
            <el-option
              v-for="item in belong_bkList"
              :key="item.typecode"
              :label="item.typename"
              :value="item.typecode"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="采购方式" prop="tenderMethod">
          <el-select
            v-model="searchForm.tenderMethod"
            placeholder="采购方式"
            style="width: 220px"
            popper-class="el-select-reportChart"
          >
            <el-option
              v-for="item in tender_methodList"
              :key="item.typecode"
              :label="item.typename"
              :value="item.typecode"
            />
          </el-select>
        </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>
          <!-- 订单信息 -->
          <orderInformationChartComp
            reportchart="reportChart"
            :order-details-statistics="orderDetailsStatistics"
            :height="heightData.planChart_h"
          />
        </el-col>
      </el-row>
      <el-row :gutter="crudData.gutter" class="el-row-x-1">
        <el-col :span="12">
          <!--订单行项目数分析-->
          <orderPlanDetailsNumStatisticsComp
            reportchart="reportChart"
            :order-plan-details-num-statistics="orderPlanDetailsNumStatistics"
            :height="heightData.planChart_h"
          />
        </el-col>
        <el-col :span="12">
          <!-- 订单金额数分析 -->
          <orderPlanDetailsMoneyStatisticsComp
            reportchart="reportChart"
            :order-plan-details-money-statistics="orderPlanDetailsMoneyStatistics"
            :height="heightData.planChart_h"
          />
        </el-col>
      </el-row>
    </section>
  </div>
</template>

<script>
/* 公共方法*/
import { filterObj, cloneObject, restoreInitialValue } from '@/assets/js/utils' // 过滤空的key 克隆对象 初始化 为数字加上单位：万或亿
/* api */
import { getProcurementOrderStatistics } from '@/api/procurement/statisticalManagement'
import { statisticalMixins } from './../mixins/statisticalMixins'// 字典信息
/* 组件*/
import statisticsChartHeader from './../statisticalChartCommon/statisticsChartHeader.vue'
import statisticsCrud from './../statisticalChartCommon/statisticsCrudGroup.vue'
import orderInformationChartComp from './orderInformationChartComp.vue' // 订单信息
import orderPlanDetailsNumStatisticsComp from './orderPlanDetailsNumStatisticsComp.vue' // 订单行项目数分析
import orderPlanDetailsMoneyStatisticsComp from './orderPlanDetailsMoneyStatisticsComp' // 订单金额数分析

export default {
  name: 'CollectivePurchaseOrderStatisticsChart',
  components: {
    statisticsChartHeader,
    statisticsCrud,
    orderInformationChartComp, // 订单信息
    orderPlanDetailsNumStatisticsComp, // 订单行项目数分析
    orderPlanDetailsMoneyStatisticsComp // 订单金额数分析
  },
  mixins: [statisticalMixins],
  data() {
    return {
      searchForm: {
        timeDate: [], // 统计时间
        statisticsTimeStart: '', // 统计时间-开始
        statisticsTimeEnd: '', // 统计时间-结束
        belongBk: '', // 板块查询
        tenderMethod: ''// 采购方式
      },
      orderDetailsStatistics: [], // 订单信息统计
      orderPlanDetailsNumStatistics: [], // 订单行项目数分析
      orderPlanDetailsMoneyStatistics: [], // 订单金额数分析
      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: '' // 订单信息高度
      }
    }
  },
  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)
      }
      getProcurementOrderStatistics(data).then(res => {
        const { data: { orderAllStatistics, orderDetailsStatistics, orderPlanDetailsNumStatistics, orderPlanDetailsMoneyStatistics }} = res
        this.crudData1(orderAllStatistics)// 统计汇总
        this.orderDetailsStatistics = orderDetailsStatistics
        this.orderPlanDetailsNumStatistics = orderPlanDetailsNumStatistics
        this.orderPlanDetailsMoneyStatistics = orderPlanDetailsMoneyStatistics
      })
    },
    // 选择时间
    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: '50%',
        groupData: [{
          name: '订单总数',
          value: data.orderNum,
          suffix: '个',
          width: '25%',
          code: '00'
        },
        {
          name: '订单净总价',
          value: data.orderMoney,
          suffix: '万元',
          width: '25%',
          code: '00'
        }, {
          name: '已确认订单数',
          value: data.orderConfirmNum,
          suffix: '个',
          width: '25%',
          code: '00'
        },
        {
          name: '已确认订单净总价',
          value: data.orderConfirmMoney,
          suffix: '万元',
          width: '25%',
          code: '00'
        }]
      }, { groupWidth: '32%', groupData: [{
        name: '资金节约金额',
        value: data.orderSavingMoney,
        suffix: '万元',
        width: '50%',
        code: '00'
      }, {
        name: '成本下降率',
        value: data.costSavingRate,
        suffix: data.costSavingRate ? '' : '%',
        width: '50%',
        code: '00'
      }] }]
    }
  }
}
</script>

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