<template>
  <div>
    <h4 class="table_title">
      供应商采购参与指数
    </h4>
    <el-table ref="smallTable" v-loading="loading" :data="tableData">
      <el-table-column
        header-align="center"
        prop="areaIndustryCompany"
        label="采购参与度指数排名"
        min-width="170"
        align="center"
      />
      <el-table-column
        header-align="center"
        prop="buyersName"
        label="供应商sap编码"
        min-width="170"
      />
      <el-table-column
        header-align="center"
        prop="tenderNo"
        label="供应商名称"
        min-width="170"
      />
      <el-table-column
        header-align="center"
        prop="tenderName"
        label="采购参与度指数"
        min-width="170"
        align="right"
      />
      <el-table-column label="集采金额（万元）" header-align="center">
        <el-table-column
          header-align="center"
          prop="tenderName"
          label="金额"
          min-width="170"
          align="right"
        />
        <el-table-column
          header-align="center"
          prop="packName"
          label="排名"
          min-width="170"
          align="right"
        />
      </el-table-column>
      <el-table-column label="物料数量（种）" header-align="center">
        <el-table-column
          header-align="center"
          prop="tenderName"
          label="数量"
          min-width="170"
          align="right"
        />
        <el-table-column
          header-align="center"
          prop="packName"
          label="排名"
          min-width="170"
          align="right"
        />
      </el-table-column>
      <el-table-column label="供货工厂（家）" header-align="center">
        <el-table-column
          header-align="center"
          prop="tenderName"
          label="数量"
          min-width="170"
          align="right"
        />
        <el-table-column
          header-align="center"
          prop="packName"
          label="排名"
          min-width="170"
          align="right"
        />
      </el-table-column>
      <el-table-column label="订单数量（单）" header-align="center">
        <el-table-column
          header-align="center"
          prop="tenderName"
          label="数量"
          min-width="170"
          align="right"
        />
        <el-table-column
          header-align="center"
          prop="packName"
          label="排名"
          min-width="170"
          align="right"
        />
      </el-table-column>
    </el-table>
    <h4 class="table_title">
      采购参与供应商交易分析前十
    </h4>
    <el-table ref="smallTable" v-loading="loading" :data="tableData">
      <el-table-column label="订单金额（万元）" header-align="center">
        <el-table-column
          header-align="center"
          prop="tenderName"
          label="前十家集采金额"
          min-width="170"
          align="right"
        />
        <el-table-column
          header-align="center"
          prop="packName"
          label="约占集采物资总额"
          min-width="170"
          align="right"
        />
      </el-table-column>
      <el-table-column label="物资种类（种）" header-align="center">
        <el-table-column
          header-align="center"
          prop="tenderName"
          label="前十家集采物资种类"
          min-width="170"
          align="right"
        />
        <el-table-column
          header-align="center"
          prop="packName"
          label="约占集采物资种类"
          min-width="170"
          align="right"
        />
      </el-table-column>
      <el-table-column label="供货工厂（家）" header-align="center">
        <el-table-column
          header-align="center"
          prop="tenderName"
          label="前十家供货工厂"
          min-width="170"
          align="right"
        />
        <el-table-column
          header-align="center"
          prop="packName"
          label="约占集采供货工厂"
          min-width="170"
          align="right"
        />
      </el-table-column>
      <el-table-column label="采购方式（家数）" header-align="center">
        <el-table-column
          header-align="center"
          prop="tenderName"
          label="询价"
          min-width="90"
          align="right"
        />
        <el-table-column
          header-align="center"
          prop="packName"
          label="竞争性谈判"
          min-width="90"
          align="right"
        />
        <el-table-column
          header-align="center"
          prop="tenderName"
          label="单一来源"
          min-width="90"
          align="right"
        />
        <el-table-column
          header-align="center"
          prop="packName"
          label="招标"
          min-width="90"
          align="right"
        />
        <el-table-column
          header-align="center"
          prop="packName"
          label="框架协议"
          min-width="90"
          align="right"
        />
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
/* 公共方法*/
import { filterDictText, numFilter, moneyFormat } from '@/assets/js/utils' // 字典方法
export default {
  name: 'KeySupplierTransactionsTableComp',
  props: {
    tableData: {
      type: Array,
      default: () => []
    },
    loading: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      /* --------------字典----------------*/
      tender_methodList: [], // 采购方式
      collectionTypeList: [], // 是否集采
      purchaseUnitList: [], // 计量单位
      taxRateList: [], // 税率
      dictionaryType: ['tender_method', 'collectionType', 'purchaseUnit', 'taxRate'] // 字典请求参数
    }
  },
  created() {
    this.getGroupType() // 字典请求初始化
  },
  methods: {
    filterDictText, // 字典
    numFilter, // 金额
    moneyFormat, // 金额千分位
    // 字典请求
    getGroupType() {
      this.$store.dispatch('getGroupType', this.dictionaryType).then((data) => {
        // 遍历key存储相应的数据
        for (const key in data.bidTypeData) {
          /* 是否有数据*/
          if (data.bidTypeData[key]) {
            this[key] = data.bidTypeData[key]
          }
        }
      })
    }
  }
}
</script>

<style>
.table_title{
    text-align: center;
    margin: 16px 0 16px 0;
}
</style>
