<!--
  @description: 报表统计-采购项目统计
  @Modifier：肖文龙
  @routerPath:
  @date：  2021/01/27
-->
<template>
  <div>
    <div class="reportChart-content">
      <!-- 统计分析-采购项目统计-搜索条件 -->
      <procStatisticsSearch />
      <!-- 统计分析-总汇组件 -->
      <statisticsCrud :list="crudList" />
      <el-row :gutter="crudObj.gutter" class="el-row-x-1">
        <!-- 招标采购月度完成项目数量和金额 -->
        <el-col :span="12">
          <completeProjectChart reportchart="reportChart" :height="heightData.completeProjectChart_h" />
        </el-col>
        <!-- 采购系统完成项目及成交金额 -->
        <el-col :span="12">
          <!--          <conventionalChart reportchart="reportChart" :height="heightData.conventionalChart_h" />-->
          <procurementCompletionProject reportchart="reportChart" :height="heightData.conventionalChart_h" />
        </el-col>
      </el-row>
      <el-row v-show="roleFlag()" :gutter="crudObj.gutter" class="el-row-x-1">
        <!-- 各工业区当月招标采购完成项目数量和项目金额 -->
        <el-col>
          <industrialZoneProjectChart reportchart="reportChart" :height="heightData.industrialZoneProjectChart_h" />
        </el-col>
      </el-row>
      <!--      <el-row :gutter="crudObj.gutter" class="el-row-x-1">-->
      <!--        &lt;!&ndash; 采购系统完成项目及成交金额&ndash;&gt;-->
      <!--        <el-col>-->
      <!--          -->
      <!--        </el-col>-->
      <!--      </el-row>-->
      <el-row v-show="roleFlag()" :gutter="crudObj.gutter" class="el-row-x-1">
        <!-- 各工业区招标采购累计完成情况-->
        <el-col>
          <variousCumulativeCompletion reportchart="reportChart" :height="heightData.variousCumulativeCompletion_h" />
        </el-col>
      </el-row>
      <el-row :gutter="crudObj.gutter" class="el-row-x-1">
        <!-- 各工业区招标采购累计完成情况-->
        <el-col>
          <procurementProjectClassNum reportchart="reportChart" :height="heightData.procurementProjectClassNum_h" />
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script>
/* api */
import { getProcurementProjectInfoNumber, getRolesOfCheckBuyers } from '@api/statisticalAnalysis/reportChart.js'
/* 公共方法*/
import { addChineseUnit } from '@/assets/js/utils' // 为数字加上单位：万或亿
/* 组件 */
import procStatisticsSearch from './procStatisticsSearch.vue' // 统计分析-采购项目统计-搜索条件
import statisticsCrud from './../../components/statisticsCrud.vue' // 统计分析-总汇组件图
import completeProjectChart from './../completeProject/completeProjectChart.vue' // 完成项目统计
import conventionalChart from './../completeProject/conventionalChart.vue' // 完成项目节资率
import industrialZoneProjectChart from './../completeProject/industrialZoneProjectChart.vue' // 各工业区当月招标采购完成项目数量和项目金额
import procurementCompletionProject from './../procurementCompletionProject/procurementCompletionProject.vue' // 采购系统完成项目及成交金额
import variousCumulativeCompletion from './../variousCumulativeCompletion/variousCumulativeCompletion.vue' // 各工业区招标采购累计完成情况
import procurementProjectClassNum from './../procurementProjectClassNum/procurementProjectClassNum.vue' // 分类采购项目数量

export default {
  inject: ['crudObj'],
  components: {
    procStatisticsSearch, // 采购项目统计-搜索条件
    statisticsCrud, // 统计分析-总汇组件
    completeProjectChart, // 完成项目
    conventionalChart, // 完成项目节资率
    industrialZoneProjectChart, // 各工业区当月招标采购完成项目数量和项目金额
    procurementCompletionProject, // 采购系统完成项目及成交金额
    variousCumulativeCompletion, // 各工业区招标采购累计完成情况
    procurementProjectClassNum // 分类采购项目数量
  },
  data() {
    return {
      // echarts 高度换算
      heightData: {
        search_h: '2.6875rem', // 搜索条件的高度
        statisticsCrud_h: '4.75rem', // 总汇组件高度
        h_p: '1.875rem', // 间距
        completeProjectChart_h: '', // 完成项目统计
        conventionalChart_h: '', // 完成项目节资率
        procurementCompletionProject_h: '', // 采购系统完成项目及成交金额
        variousCumulativeCompletion_h: '', // 各工业区招标采购累计完成情况
        industrialZoneProjectChart_h: '', // 各工业区当月招标采购完成项目数量和项目金额
        procurementProjectClassNum_h: '' // 分类采购项目数量
      },
      // 统计汇总
      crudList: [],
      // 获取有权限的角色
      roleOfData: []
    }
  },
  created() {
    this.initHeightData()// 高度计算
    this.initRole() // 获取有权限的角色接口
  },
  methods: {
    // 高度计算
    initHeightData() {
      // 计算content一减去头部的高度
      let bidAndProcMapCharts_h = ''
      if (this.crudObj.height_default) {
        bidAndProcMapCharts_h = this.crudObj.height_default
      } else {
        bidAndProcMapCharts_h = 'calc( ' +
            this.crudObj.height + ' - ' +
            this.crudObj.header_H + ' - ' +
            this.heightData.search_h + ' - ' +
            this.heightData.h_p + ' - ' +
            this.heightData.statisticsCrud_h + ')'
      }
      // 完成项目节资率
      this.heightData.conventionalChart_h = `calc((${bidAndProcMapCharts_h} - .625rem) / 2)`
      // 完成项目统计
      this.heightData.completeProjectChart_h = this.heightData.conventionalChart_h
      // 采购系统完成项目及成交金额
      this.heightData.procurementCompletionProject_h = this.heightData.conventionalChart_h
      // 各工业区当月招标采购完成项目数量和项目金额
      this.heightData.industrialZoneProjectChart_h = this.heightData.conventionalChart_h
      // 分类采购项目数量
      this.heightData.procurementProjectClassNum_h = this.heightData.conventionalChart_h
    },
    initRole() {
      // 获取有权限的角色接口
      getRolesOfCheckBuyers().then(res => {
        this.roleOfData = res.data.split(',')
      })
    },
    /**
     * 获取平台运营情况信息数据
     *  @param {searchData} Object 查询条件
     */
    initChart(searchData) {
      const data = {
        ...searchData
      }
      getProcurementProjectInfoNumber(data).then(res => {
        this.crudData(res.data)// 统计汇总
      })
    },
    roleFlag() {
      /*
        项目经理 11
        采购人 10
        工业区领导：buyerleader
        审计监督：sjjd
        平台运营: operation
        股份领导:gufenleader
      */
      this.roleCode = this.$store.getters.info.currentRol.roleCode // 角色code
      // 是否包含当前角色 若是不展示此模块 否 展示此模块
      if (this.roleOfData.includes(this.roleCode)) {
        return false
      } else {
        return true
      }
    },
    // 统计汇总
    crudData(data) {
      this.crudList = [
        {
          name: '已发布项目总数',
          value: addChineseUnit(data.projectTotalNumber),
          suffix: '个',
          width: '20%',
          code: '00'
        },
        {
          name: '进行中项目',
          value: addChineseUnit(data.projectInProgressNumber),
          suffix: '个',
          width: '20%',
          code: '00'
        },
        {
          name: '已完成项目',
          value: addChineseUnit(data.projectEndedNumber),
          suffix: '个',
          width: '20%', // 隐藏已归档前width 15%
          code: '00'
        },
        // {
        //   name: '已归档',
        //   value: addChineseUnit(data.projectArchivedNumber),
        //   suffix: '个',
        //   width: '15%',
        //   code: '00'
        // },
        {
          name: '已流标',
          value: addChineseUnit(data.projectLosedNumber),
          suffix: '个',
          width: '20%', // 隐藏已归档前width 15%
          code: '00'
        },
        {
          name: '成交金额',
          value: addChineseUnit(data.transactionMoney),
          suffix: '元',
          width: '20%', // 隐藏已归档前width 15%
          code: '00'
        }
        // {
        //   name: '节资金额(不包含未填写预算金额的项目)',
        //   value: addChineseUnit(data.savingAmount),
        //   suffix: '元',
        //   width: '22%',
        //   code: '00'
        // }
      ]
    }
  }
}
</script>
<style lang="less" scoped>
</style>
