<!--
  @description: 报表统计-价格统计
  @Modifier：肖文龙
  @routerPath:
  @date：  2021/01/29
-->

<template>
  <div>
    <div class="reportChart-content">
      <!-- 统计分析-价格统计-搜索条件 -->
      <priceTrendChartSearch @getPurchaseData="getPurchaseData" />
      <el-row :gutter="crudObj.gutter" class="el-row-x-1">
        <!-- 设备/物资价格走势图 -->
        <el-col>
          <priceTrendChart reportchart="reportChart" :height="heightData.priceTrendChart_h" :purchase-data="purchaseData" />
        </el-col>
      </el-row>
      <el-row v-if="roleFlag()" :gutter="crudObj.gutter" class="el-row-x-1">
        <!-- 设备/物资价格走势图 -->
        <el-col>
          <priceAndProcVolumeContrast reportchart="reportChart" :height="heightData.priceAndProcVolumeContrast_h" />
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script>
/* api */
import { getRolesOfCheckBuyers } from '@api/statisticalAnalysis/reportChart.js'
/* 公共方法*/
import { addChineseUnit } from '@/assets/js/utils' // 为数字加上单位：万或亿
/* 组件 */
import priceTrendChartSearch from './priceTrendChartSearch.vue' // 统计分析-价格统计-搜索条件
import priceTrendChart from './../priceTrendChart/priceTrendChart.vue' // 设备/物资价格走势图
import priceAndProcVolumeContrast from '../priceAndProcVolumeContrast/priceAndProcVolumeContrast.vue' // 物料价格及采购量对比

export default {
  inject: ['crudObj'],
  components: {
    priceTrendChartSearch, // 价格统计-搜索条件
    priceTrendChart, // 设备/物资价格走势图
    priceAndProcVolumeContrast // 物料价格及采购量对比
  },
  data() {
    return {
      // echarts 高度换算
      heightData: {
        search_h: '2.6rem', // 搜索条件的高度
        h_p: '1.35rem', // 间距
        priceTrendChart_h: '', // 设备/物资价格走势图
        priceAndProcVolumeContrast_h: '18rem' // 物料价格及采购量对比
      },
      // 统计汇总
      crudList: [],
      roleCode: '', // 角色code
      // 已选物料
      purchaseData: [],
      // 获取有权限的角色
      roleOfData: []
    }
  },
  created() {
    this.initHeightData()// 高度计算
  },
  methods: {
    // 高度计算
    initHeightData() {
      // 计算content一减去头部的高度
      const bidAndProcMapCharts_h = 'calc( ' +
        this.crudObj.height + ' - ' +
        this.crudObj.header_H + ' - ' +
        this.heightData.search_h + ' - ' +
        this.heightData.h_p + ' - ' +
        this.heightData.priceAndProcVolumeContrast_h + ')'
      // 设备/物资价格走势图
      this.heightData.priceTrendChart_h = bidAndProcMapCharts_h
      // 获取有权限的角色接口
      getRolesOfCheckBuyers().then(res => {
        this.roleOfData = res.data.split(',')
      })
    },
    // 已选物资
    getPurchaseData(data) {
      this.purchaseData = 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
      }
    },
    /**
     * 获取平台运营情况信息数据
     *  @param {searchData} Object 查询条件
    */
    initChart(searchData) {
      // const data = {
      //   ...searchData
      // }
      this.crudList = [
        {
          name: '供应商总数',
          value: addChineseUnit(23340.00),
          suffix: '个',
          width: '25%',
          code: '00'
        },
        {
          name: '合格供应商数量',
          value: addChineseUnit(2330.00),
          suffix: '个',
          width: '25%',
          code: '00'
        },
        {
          name: '不合格供应商数量',
          value: 20.00,
          suffix: '个',
          width: '25%',
          code: '00'
        },
        {
          name: '合格率',
          value: 33.03,
          suffix: '%',
          width: '25%',
          code: '00'
        }
      ]
    }
  }
}
</script>
<style lang="less" scoped>
</style>
