
<!--
  @description:采购结果-表格组件
  @Modifier:肖文龙/hdk
  @routerPath:
  @date:2020/08/1
-->
<template>
  <div style="position: relative;" class="mb16">
    <el-table
      ref="smallTable"
      :data="reviewList"
      :max-height="tableHeight"
      :row-class-name="rowSetClass"
      class="tableLimit lineItemList"
      border
      @selection-change="handleSelectionChange"
    >
      <el-table-column
        v-if="!resultData.isButton"
        :selectable="selectable"
        header-align="center"
        type="selection"
        width="55"
        fixed
        align="center"
      />
      <el-table-column header-align="center" align="center" type="index" fixed width="60px" label="序号" />
      <el-table-column header-align="center" align="left" prop="productNo" min-width="300" fixed label="物料编码" />
      <el-table-column header-align="center" align="left" prop="purchaseDesc" min-width="300" fixed label="产品描述" />
      <el-table-column align="center" prop="purchaseNo" width="150px" label="行项目编号" />
      <el-table-column header-align="center" align="left" prop="purchaseDepartment" min-width="300" label="采购单位" />
      <el-table-column header-align="center" align="right" prop="unitBudget" min-width="150px" label="预算单价（元）">
        <template slot-scope="scope">
          {{ moneyFormat(scope.row.unitBudget) }}
        </template>
      </el-table-column>
      <el-table-column header-align="center" align="center" prop="taxRate" min-width="150px" label="历史报价">
        <template slot-scope="scope">
          <el-link
            type="primary"
            @click.stop="historicalQuotation(scope.row)"
          >
            查看
          </el-link>
        </template>
      </el-table-column>
      <el-table-column header-align="center" align="left" min-width="120px" label="税率(%)">
        <template slot-scope="scope">
          <span v-if="scope.row.taxRate">{{ filterDictText(taxRateList,scope.row.taxRate.toString() ) }}</span>
        </template>
      </el-table-column>
      <el-table-column header-align="center" align="right" width="80px" prop="quantity" label="数量" />
      <el-table-column header-align="center" align="left" min-widht="200px" prop="unit" label="计量单位">
        <template slot-scope="scope">
          <span>{{ filterDictText(purchaseUnitList,scope.row.unit ) }}</span>
        </template>
      </el-table-column>
      <!-- 供应商 -->
      <el-table-column
        v-for="(item,index) in supplierList"
        :key="index"
        min-width="300px"
        align="center"
      >
        <template slot="header" slot-scope="scope">
          <p>
            <el-checkbox v-model="item.checkbox" :disabled="resultData.tableIsEdit" />
            <span>{{ item.supplierName }}</span>
          </p>
        </template>
        <template>
          <el-table-column align="center">
            <template slot="header" slot-scope="scope">
              <p class="h2-size">
                <span class="procurement_span-width">不含税总价（元）：</span>
                <span class="procurement_orange-color">{{ item.offerTotal }}</span>
                <!-- <el-button type="text" size="mini" @click="responseClick(item)">应答文件</el-button> -->
                <!-- <el-button type="text" size="mini" @click="otherFileClick(item)">其他文件</el-button> -->
              </p>
              <p class="h2-size">
                <span class="procurement_span-width"> 报&nbsp;&nbsp;价&nbsp;&nbsp;单&nbsp;&nbsp;号：</span>
                <el-link type="primary" size="mini" @click="offerSingleClick(item)">
                  {{ item.negRecordCode }}
                </el-link>
              </p>
            </template>
            <template>
              <!-- 单选框 -->
              <el-table-column v-if="!resultData.isButton" align="center" width="35">
                <template slot="header" slot-scope="scope">
                  <el-radio v-model="item.supplierRadio" :disabled="!resultData.isEdit" :label="item.prop" @change.native="supplierRadio(item)">
                    {{ '' }}
                  </el-radio>
                </template>
                <template slot-scope="scope">
                  <el-radio v-model="scope.row.radio" :disabled="disabledData(scope.row )" :label="item.prop" @change.native="currentRadio(item)">
                    {{ '' }}
                  </el-radio>
                </template>
              </el-table-column>
              <!-- 不含税单价(元) -->
              <el-table-column header-align="center" min-width="150" align="right">
                <template slot="header">
                  <p>不含税单价  <span class="procurement_currency">（元）</span></p>
                </template>
                <template slot-scope="scope">
                  <!-- {{ scope.row }} -->
                  <div :class="checkedRadioStatus(scope,item)?'bg-opt':''">
                    {{ moneyFormat(scope.row.offerData[item.prop].taxUnitPrice) }}
                  </div>
                </template>
              </el-table-column>
              <!-- 不含税总价（元） -->
              <el-table-column header-align="center" min-width="150" align="right">
                <template slot="header" slot-scope="scope">
                  <p>不含税总价<span class="procurement_currency">（元）</span></p>
                </template>
                <template slot-scope="scope">
                  <div :class="checkedRadioStatus(scope,item)?'bg-opt':''">
                    {{ moneyFormat(scope.row.offerData[item.prop].singleTotalOfferPrice) }}
                  </div>
                </template>
              </el-table-column>
              <!-- 数量 -->
              <!--              <el-table-column v-if="!resultData.isButton" header-align="center" min-width="150" align="right">
                <template slot="header" slot-scope="scope">
                  <p>成交数量</p>
                </template>
                <template slot-scope="scope">
                  <div :class="checkedRadioStatus(scope,item)?'bg-opt':''">
                    &lt;!&ndash;            <money
                      v-if="resultData.isEdit"
                      :unit-fixed="0"
                      :money-value="scope.row.offerData[item.prop]"
                      size="mini"
                      width="auto"
                      name="distributionNumber"
                      @input="distributionNumVerification(scope.row, scope.row.offerData[item.prop])"
                    />&ndash;&gt;
                    <div>
                      {{ moneyFormat(scope.row.offerData[item.prop].distributionNumber) }}
                    </div>
                  </div>
                </template>
              </el-table-column>
              &lt;!&ndash; 成交单价(元) &ndash;&gt;
              <el-table-column v-if="!resultData.isButton" header-align="center" min-width="150" align="right">
                <template slot="header">
                  <p>成交单价<span class="procurement_currency">（元）</span></p>
                </template>
                <template slot-scope="scope">
                  <div :class="checkedRadioStatus(scope,item)?'bg-opt':''">
                    &lt;!&ndash;     <money
                      v-if="resultData.isEdit"
                      :unit-fixed="0"
                      :money-value="scope.row.offerData[item.prop]"
                      size="mini"
                      width="auto"
                      name="transactionBudget"
                      @input="transactionBudgetChange(scope.row.offerData[item.prop])"
                    />&ndash;&gt;
                    <div>
                      {{ moneyFormat(scope.row.offerData[item.prop].transactionBudget) }}
                    </div>
                  </div>
                </template>
              </el-table-column>
              &lt;!&ndash; 成交总价（元） &ndash;&gt;
              <el-table-column v-if="!resultData.isButton" header-align="center" min-width="150" align="right">
                <template slot="header" slot-scope="scope">
                  <p>成交总价<span class="procurement_currency">（元）</span></p>
                </template>
                <template slot-scope="scope">
                  <div :class="checkedRadioStatus(scope,item)?'bg-opt':''">
                    {{ moneyFormat(scope.row.offerData[item.prop].distributionTotalMoney) }}
                  </div>
                </template>
              </el-table-column>-->
              <!-- 品牌/生产厂家 -->
              <el-table-column v-if="!resultData.isButton" header-align="center" min-width="150" align="center">
                <template slot="header" slot-scope="scope">
                  <p>品牌/生产厂家</p>
                </template>
                <template slot-scope="scope">
                  <div :class="checkedRadioStatus(scope,item)?'bg-opt':''">
                    {{ scope.row.offerData[item.prop].offerRemarks }}
                  </div>
                </template>
              </el-table-column>
              <!-- 最快交货日期-暂时取消 -->
              <!-- <el-table-column header-align="center" label="最快交货日期" width="110" align="center">
                <template slot-scope="scope">
                  {{ scope.row.offerData[item.prop].fastestDeliveryDate }}
                </template>
              </el-table-column> -->
            </template>
          </el-table-column>
        </template>
      </el-table-column>
    </el-table>
    <historicalQuotationDialog :dialog-data="historyDialogData" />
  </div>
</template>

<script>
/* 常用方法 */
import { mathSort, moneyFormat, filterDictText } from '@assets/js/utils'
import { procurementGroupMixins } from '../mixins/procurementGrounpMixins'
/* 组件 */
import money from '@comp/common/money/money' // 金额
import historicalQuotationDialog from './historicalQuotation-dialog.vue' // 历史报价弹窗
export default {
  name: 'ProcurementResultTableComp',
  components: {
    money, // 金额
    historicalQuotationDialog // 历史报价弹窗
  },
  mixins: [procurementGroupMixins],
  props: {
    // 表格渲染数据
    tableData: {
      type: Object,
      default: function() {
        return []
      }
    },
    // 其他辅助参数
    resultData: {
      type: Object,
      default: function() {
        return {
          tableIsEdit: false, // 表头是否可编辑 false 可以编辑 true 不可以编辑
          isEdit: true, // 是否可编辑 false 可以编辑 true 不可以编辑
          isButton: false, // 是否隐藏 操作按钮 默认 不隐藏 false 不隐藏 true隐藏
          auditStatus: ''// 审核状态  null 未提交 00 已提交  01审核通过   02审核驳回
        }
      }
    },
    // 报价单点击事件（supplier 供应商信息）
    offerSingleClick: {
      type: Function,
      default: function(supplier) {}
    },
    // 应答文件点击事件（supplier 供应商信息）
    responseClick: {
      type: Function,
      default: function(supplier) {}
    },
    // 其他文件点击事件（supplier 供应商信息）
    otherFileClick: {
      type: Function,
      default: function(supplier) {}
    },
    /*
       * 选择行项目多选框事件
       * data(选择行项目id结合)
       * */
    materialsChange: {
      type: Function,
      default: function(data) {}
    }
  },
  data() {
    return {
      // 历史报价弹窗数据
      historyDialogData: {
        dialog: false,
        productNo: '', // 行项目编号
        productName: '' // 物资名称
      },
      // 供应商列表
      supplierList: [],
      // 投标报价列表
      reviewList: [],
      // 提交投标中选列表
      submitReviewList: [],
      // 选择供应商
      supplierCheckList: [],
      tableHeight: window.innerHeight * 0.63 // 固定表头高度
    }
  },
  mounted() {
    // 查询项目字典
    this.initWebTypeGroup()
    this.initData()
  },
  methods: {
    moneyFormat, // 千分位
    filterDictText, // 数据字典查询
    // 初始化
    initData() {
      const { tableData, tableList } = JSON.parse(JSON.stringify(this.tableData))
      const reviewList = []// 指标信息
      console.log(tableList, 'tableList')
      // 遍历指标
      tableList.forEach((reviewData) => {
        const { goOfferHallDetailVoList: supplierReviewList } = reviewData
        let data = {}
        // 遍历供应商投标信息
        supplierReviewList.forEach(supplierReview => {
          // 遍历供应商-表头
          tableData.forEach(supplier => {
            // 遍历供应商报价信息和供应商进行匹配
            if (supplier.id === supplierReview.offerId) {
              // 不含税总价
              supplier.offerTotal = supplier.offerTotal && Number(supplier.offerTotal).toFixed(2)
              // 设置表头prop
              supplier.prop = supplierReview.offerId
              // 设置复选框初始值
              supplier.checkbox = false
              // 供应商单选框状态初始化
              supplier.supplierRadio = ''
              // 表格展示数据
              data = {
                // 投标信息
                ...reviewData,
                radio: '', // 单选框状态初始化
                isRadio: true, // 表格是否可编辑
                checkbox: false, // 表格头部复选框是否选中
                offerData: {
                  ...data.offerData,
                  // 供应商投标信- 设置表格展示数据
                  [supplierReview.offerId]: {
                    isNotChoice: supplierReview.isNotChoice, // 01 中标 00 未中标
                    sureId: supplierReview.id, // 报价明细id
                    supplierId: supplier.supplierId, // 供应商id
                    supplierName: supplier.supplierName, // 供应商名称
                    offerId: supplierReview.offerId, // 供应商报价id
                    taxUnitPrice: supplierReview.taxUnitPrice && Number(supplierReview.taxUnitPrice).toFixed(2), // 不含税单价(保留两位小数)
                    singleTotalOfferPrice: supplierReview.singleTotalOfferPrice && Number(supplierReview.singleTotalOfferPrice).toFixed(2), // 不含税总价(保留两位小数)
                    fastestDeliveryDate: supplierReview.fastestDeliveryDate && this.$Moment(supplierReview.fastestDeliveryDate).format(this.momentDate), // 最快交货日期
                    distributionNumber: supplierReview.distributionNumber, // 采购数量
                    offerRemarks: supplierReview.offerRemarks, // 品牌/生产厂家
                    transactionBudget: supplierReview.transactionBudget, // 成交单价金额（默认是供应商的不含税单价）
                    distributionTotalMoney: (supplierReview.distributionNumber * supplierReview.transactionBudget).toFixed(2) // 实际成交总额（默认供应商的不含税总价）
                  }
                }
              }
              // 删除不需要的参数
              delete data.goOfferHallDetailVoList
            }
          })
        })
        reviewList.push(data)
      })
      // 渲染数据
      this.supplierList = tableData// 供应商列表
      this.reviewList = reviewList// 投标报价列表
      this.initSelectData()// 初始化-选中状态
      this.currentRadio()// 设置表头选中状态
    },
    // 初始化-选中状态
    initSelectData() {
      // 遍历报价信息
      this.reviewList.forEach(reviewData => {
        Object.keys(reviewData.offerData).forEach(key => {
          const offer = reviewData.offerData[key]// 获取供应商报价信息
          // 判断是否中标-设置初始值 01 中标 00 未中标
          if (offer.isNotChoice === '01') {
            reviewData.radio = offer.offerId // 报价id，设置选中radio
          }
        })
      })
    },
    // 点击表头radio
    supplierRadio(supplier) {
      // 遍历投标/报价信息
      this.reviewList.forEach(reviewData => {
        // 只有未释放或退回的项目才可被选中
        if (this.commonSubjectMatterStatus(reviewData)) {
          // 设置选中状态
          reviewData.radio = supplier.supplierRadio
        }
      })
      this.currentRadio()// 设置表头选中状态
    },
    // 点击报价信息radio/设置表头选中状态
    currentRadio() {
      // 遍历供应商-表头
      this.supplierList.forEach(supplier => {
        let sum = 0 // 计数器》判断当前供应商下的报价是否选中 选中一个则加1
        // 遍历报价信息
        this.reviewList.forEach(reviewData => {
          // 判断当前供应商下的报价是否选中
          if (reviewData.radio === supplier.prop && this.commonSubjectMatterStatus(reviewData)) {
            sum++
          }
        })
        // 筛选出未释放或者未被退回的行项目长度用来判断表头全选按钮状态
        const noReleaseReviewLis = this.reviewList.filter(reviewData => this.commonSubjectMatterStatus(reviewData)).length
        // sum的数量等于供应商下的报价数量就等于是全选，则就把表头上的单选框选中,否则就清空
        if (sum === noReleaseReviewLis) {
          supplier.supplierRadio = supplier.prop
        } else {
          supplier.supplierRadio = ''
        }
      })
    },
    // 按条目自动选择最低报价
    selectLowestPrice() {
      // 遍历报价信息 冒泡排序
      this.reviewList.forEach(reviewData => {
        // 释放和退回的行项目不可选中 useStatus 01 非释放非退回
        if (this.commonSubjectMatterStatus(reviewData)) {
          const keys = Object.keys(reviewData.offerData)// 取得供应商报价信息的对象key
          const offerData = {}
          for (const key in reviewData.offerData) {
            // 排除零
            if (reviewData.offerData[key].taxUnitPrice !== 0) {
              offerData[key] = reviewData.offerData[key]
            }
          }
          if (Object.keys(offerData).length) {
            // 取最小值
            const data = mathSort({
              type: 'min',
              arr: keys,
              key: 'singleTotalOfferPrice',
              data: offerData
            })
            // 选择最低报价
            reviewData.radio = data
          }
        }
      })
      this.currentRadio()// 设置表头选中状态
    },
    // 成交总价计算
    transactionBudgetChange(data) {
      data.distributionTotalMoney = (data.distributionNumber * data.transactionBudget).toFixed(2)
    },
    // 历史报价弹窗
    historicalQuotation(row) {
      this.historyDialogData.productNo = row.productNo // 行项目编号
      this.historyDialogData.productName = row.productName // 物资名称
      this.historyDialogData.dialog = true
    },
    // 保存或提交时 组装数据然后返回
    assemblyData() {
      const winningList = []
      // 校验各行项目数量
      if (this.verification()) {
        // auditStatus 00 待审核 01 审核通过 02审核不通过 03 变更中选  03是有作为的行项目
        if (this.resultData.isEdit) {
          this.submitReviewList = this.reviewList.filter(pitchData => {
            return this.commonSubjectMatterStatus(pitchData)
          })
        }
        // 判断未被释放的行项目有无选中
        const isAllPitchOn = this.submitReviewList.every(isPitch => {
          return isPitch.radio !== '' && this.commonSubjectMatterStatus(isPitch)
        })
        // 全部选中 返回数据
        if (isAllPitchOn) {
          this.submitReviewList.forEach(reviewData => {
          // 取得选中的供应商报价信息&& useStatus 01未被释放或退回 02已释放或退回 未被释放的项目才可选中
            if (reviewData.radio && this.commonSubjectMatterStatus(reviewData)) {
              const data = {
                subjectMatterId: reviewData.id, // 物料ID
                quantity: reviewData.quantity, // 行项目总数量
                supplierWinningSureDetailList: [] // 中标供应商报价信息
              }
              const offerData = reviewData.offerData[reviewData.radio]
              data.supplierWinningSureDetailList.push({
                offerId: offerData.offerId, // 供应商报价id
                supplierId: offerData.supplierId, // 供应商id
                supplierName: offerData.supplierName, // 供应商名称
                sureId: offerData.sureId, // 供应商报价明细id
                taxUnitPrice: Number(offerData.taxUnitPrice), // 不含税单价
                distributionNumber: Number(offerData.distributionNumber), // 分配数量
                transactionBudget: Number(offerData.transactionBudget) // 成交单价金额（默认是供应商的不含税单价）
              })
              winningList.push(data)
            }
          })
          // 返回
          return {
            winningList
          }
        }
      } else {
        return false
      }
      // 未全部选中返回空数组
      return {
        winningList
      }
    },
    // 禁用已释放的行项目复选框
    selectable(row, index) {
      /*
        isEdit 采购结果审核是否可编辑 布尔值
        useStatus行项目是否释放   01 否 02 是
        subjectMatterStatus行项目是否作废  00 是 其他值否
        采购结果编辑与不可编辑的情况:
        提交后待审核状态不可编辑
        审核通过不可编辑
        行项目释放过后不可编辑
        审核不通过可编辑
        行项目作废后可编辑
        **/
      if (!this.resultData.isEdit) {
        return false
      }
      if (row.subjectMatterStatus === '00' || row.subjectMatterStatus === null) {
        return true
      }

      //  return false
    },
    // 行项目释放退回
    handleSelectionChange(val) {
      // 获取物资ids
      const data = []
      // 获取选中数据的物资id放道新数组中做参数
      val.forEach(materials => {
        data.push(materials.id)
      })
      // 选择的行项目id集合
      const materialsIds = data.toString()
      this.materialsChange(materialsIds)
    },
    // 导出时用的参数
    getExportSupplier() {
      const supplierList = this.supplierList.filter(supplier => supplier.checkbox)// 取得已选中的报价供应商
      const offerIds = []// 供应商报价id
      supplierList.forEach(supplier => {
        offerIds.push(supplier.id)
      })
      return {
        offerIds, // 供应商报价id
        supplierList// 已选中的报价供应商
      }
    },
    // 监听行项目禁用方法
    disabledData(row) {
      // 调用复选框可编辑方法 取反
      return !this.selectable(row, 0)
    },
    rowSetClass({ row }) {
      if (row.subjectMatterStatus === '02') {
        return 'released'
      }
    },
    /*
    判断页面按钮单选复选框编辑方法
    reviewData 行数据
    */
    commonSubjectMatterStatus(reviewData) {
      // true可编辑
      if (reviewData.subjectMatterStatus === null || reviewData.subjectMatterStatus === '00') {
        return true
      }
      // 默认不可编辑
      return false
    },
    /*
    判断页面只读中选审核方法 加高亮bg
    reviewData 行数据
    */
    checkedRadioStatus(reviewData, item) {
      // true加class
      // 可编辑的也加上颜色高亮
      // && !this.resultData.isEdit
      if (reviewData.row.radio !== '' && reviewData.row.radio === item.prop) {
        return true
      }
      // 默认没有class
      return false
    },
    // 输入数量校验行项目数量 单行校验
    distributionNumVerification(row, inputVal) {
      if (inputVal) {
        this.transactionBudgetChange(inputVal)
      }
      let quantitySum = 0
      // 循环供应商
      for (const item in row.offerData) {
        if (row.radio.indexOf(item) !== -1) {
          // 选中未填写
          if ((!row.offerData[item].distributionNumber || row.offerData[item].distributionNumber === '0') && !inputVal) {
            this.$elAlert(`${row.purchaseDesc}选中供应商请填写数量`, 'warning')
            return false
          }
          if ((!row.offerData[item].transactionBudget || row.offerData[item].transactionBudget === '0') && !inputVal) {
            this.$elAlert(`${row.purchaseDesc}选中供应商请填写成交单价`, 'warning')
            return false
          }
          // 选中行项目金额和
          quantitySum += Number(row.offerData[item].distributionNumber)
        }
      }
      // 大于总数量
      if (quantitySum > row.quantity) {
        this.$elAlert(`${row.purchaseDesc}选中供应商采购数量总和不能大于总数量`, 'warning')
        // 置空对应输入框
        if (inputVal) {
          inputVal.distributionNumber = ''
        }
        return false
      } else { // 小于总数量
        return true
      }
    },
    // 校验各行项目数量
    verification() {
      // 循环行项目
      for (let i = 0; i < this.reviewList.length; i++) {
        // 单行校验
        if (!this.distributionNumVerification(this.reviewList[i])) {
          return false
        }
      }
      return true
    }
  }
}
</script>

<style lang="less" scoped>
  /deep/ .el-table .cell{
    line-height: 16px;
  }
  .procurement_currency{
    color: #999;
  }
  /deep/.el-button+.el-button {
    margin-left: 0px;
  }
  /deep/.lineItemList .is-leaf.el-table-column--selection .cell .el-checkbox{
    margin-top: 30px;
    position:relative;
  }
  /deep/.lineItemList .el-table-column--selection .cell .el-checkbox::before{
    content: "退回";
    position: absolute;
    top: -25px;
    left: -8px;
  }
  /deep/.lineItemList .released .el-checkbox__input.is-disabled .el-checkbox__inner {
    background-color: #F56C6C;
    border-color: #F56C6C;
    opacity: 0.5;
    cursor: not-allowed;
  }
  .bg-opt{
    background-color:#8cd9f7;
    color: #000;
    opacity: 0.5;
    font-weight: bolder;
    min-height: 30px;
    line-height: 30px;
    /deep/input{
      background: none;
      border: none;
    }
  }
</style>
