<!--
  @description:采购计划统计
  @Modifier: zhangyawen
  @routerPath: /statisticalManagement/procurementPlanningStatisticsChart
  @date: 2021-4-21-11:20
-->
<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 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>
          <planDetailsChartComp
            ref="planDetail"
            reportchart="reportChart"
            :search-data="searchForm"
            :height="heightData.planChart_h"
          />
        </el-col>
      </el-row>
    </section>
  </div>
</template>

<script>
/* eslint-disable */
import statisticsChartHeader from './../statisticalChartCommon/statisticsChartHeader.vue'
import statisticsCrud from './../statisticalChartCommon/statisticsCrudGroup.vue'
import planDetailsChartComp from './planDetailsChartComp.vue'

/* 公共方法*/
import { filterObj, cloneObject,restoreInitialValue } from '@/assets/js/utils' // 过滤空的key 克隆对象 初始化 为数字加上单位：万或亿
/* api */
import { getPurchasePlanDetailStatisticsEstimate } from '@/api/procurement/statisticalManagement'
import { statisticalMixins } from './../mixins/statisticalMixins'// 字典信息
export default {
  name: 'ProcurementPlanningStatisticsChart',
  components: {
    statisticsChartHeader,
    statisticsCrud,
    planDetailsChartComp
  },
  mixins: [statisticalMixins],
  data() {
    return {
      searchForm: {
        timeDate: [], // 统计时间
        statisticsTimeStart: '', // 统计时间-开始
        statisticsTimeEnd: '', // 统计时间-结束
        belongBk: ''// 板块查询
      },
      // belong_bkList: [],
      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)
      }
      getPurchasePlanDetailStatisticsEstimate(data).then(res => {
        this.crudData1(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(cloneObject(this.searchForm))
      this.$refs.planDetail.initChart(cloneObject(this.searchForm))
    },
    // 重置
    resetForm() {
      restoreInitialValue(this.searchForm)
      this.search()
    },
    // 统计汇总
    crudData1(data) {
      this.crudList = [
        {
          groupWidth: '28%',
          groupData: [
            {
              name: '上报计划条目数',
              value: data.reportPlanNum,
              suffix: '条',
              width: '50%',
              code: '00'
            },
            {
              name: '上报计划净预算',
              value: data.reportPlanMoney,
              suffix: '万元',
              width: '50%',
              code: '00'
            }
          ]
        },
        {
          groupWidth: '28%',
          groupData: [
            {
              name: '已执行计划条目数',
              value: data.executedPlanNum,
              suffix: '条',
              width: '50%',
              code: '00'
            },
            {
              name: '已执行计划净预算',
              value: data.executedPlanMoney,
              suffix: '万元',
              width: '50%',
              code: '00'
            },
          ]
        }, {
          groupWidth: '26%',
          groupData: [
            {
              name: '已归集条目数',
              value: data.planDetailPackNum,
              suffix: '条',
              width: '50%',
              code: '00'
            },
            {
              name: '已归集计划净预算',
              value: data.planDetailPackMoney,
              suffix: '万元',
              width: '50%',
              code: '00'
            }
          ]
        }, {
          groupWidth: '26%',
          groupData: [
            {
              name: '转自采条目数',
              value: data.tranferToSelfNum,
              suffix: '条',
              width: '50%',
              code: '00'
            },
            {
              name: '转自采计划净预算',
              value: data.tranferToSelfMoney,
              suffix: '万元',
              width: '50%',
              code: '00'
            }
          ]
        }, {
          groupWidth: '26%',
          groupData: [
            {
              name: '已退回计划条目数',
              value: data.returnPlanNum,
              suffix: '条',
              width: '50%',
              code: '00'
            },
            {
              name: '已退回计划净预算',
              value: data.returnPlanMoney,
              suffix: '万元',
              width: '50%',
              code: '00'
            }
          ]
        }
      ]
    }
  }
}
</script>

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