<!--
  @description: 待收取服务费弹框
  @Modifier: haofengxian
  @routerPath:
  @date: 2021-3-10-15:43
-->
<template>
  <el-dialog
    :visible.sync="visibleDialog"
    :close-on-click-modal="false"
    :lock-scroll="false"
    title="选择待收服务费"
    width="1080px"
    custom-class="el-dialog__body-p8 el-dialog_table"
    append-to-body
  >
    <el-table
      ref="smallTable"
      :data="tableData"
      select-on-indeterminate
      :row-key="getRowKeys"
      @selection-change="selectionChange"
    >
      <el-table-column
        type="selection"
        width="55"
        align="center"
      />
      <el-table-column type="index" label="序号" align="center" width="60" />
      <el-table-column
        prop="orderCode"
        label="订单编号"
        align="center"
        width="160"
      />
      <el-table-column
        :formatter="formatterOrderTotalMoney"
        prop="taxOrderTotalMoney"
        label="订单含税金额（元）"
        align="right"
        width="130"
        header-align="center"
      />
      <el-table-column
        :formatter="formatterOrderTotalMoney"
        prop="shouldChargeMoney"
        label="服务费金额（元）"
        align="right"
        width="120"
        header-align="center"
      />
      <el-table-column
        prop="supplierName"
        label="供应商名称"
        header-align="center"
        min-width="180"
      />
      <el-table-column
        prop="tenderNo"
        label="采购单结果"
        header-align="center"
      />
      <el-table-column
        :formatter="formatterIfRelief"
        prop="ifRelief"
        label="有无减免"
        align="center"
        header-align="center"
      />
      <el-table-column
        prop="remark"
        label="减免原因"
        header-align="center"
      />
    </el-table>
    <span slot="footer" class="dialog-footer">
      <el-button type="primary" @click="ensure('formData')">
        确 定
      </el-button>
      <el-button @click="visibleDialog=false">取 消</el-button>
    </span>
    <!--分页组件-->
    <pagination :pagination-data="paginationData" @change="getExcepPayment" />
  </el-dialog>
</template>

<script>
import { getPageServiceFeeList } from '@/api/procurement/procurementOrder'
/* 混合开发方法-参数字段*/
import { ListMixin } from '@/mixins/ListMixin' // 分页
import { orderServeFeeMixins } from '../../mixins/orderServeFeeMixins'
/* 组件*/
import pagination from '@comp/common/pagination/pagination' // 分页
export default {
  name: 'ServiceOrderCollectedDialog',
  components: {
    pagination // 分页
  },
  mixins: [ListMixin, orderServeFeeMixins],
  data() {
    return {
      visibleDialog: false,
      tableData: [],
      selectionList: [], // 已选择数据
      serviceIDs: [], // 服务单
      serviceFeeParams: {}
    }
  },
  methods: {
    // 打开弹框
    openDialog(data, tableData) {
      const serviceIDs = []
      if (tableData.length > 0) {
        tableData.map((item) => {
          serviceIDs.push(item.id)
        })
      }
      this.serviceIDs = serviceIDs
      this.serviceFeeParams = data
      this.visibleDialog = true
      this.getExcepPayment(data, serviceIDs)
    },
    getExcepPayment() {
      const params = {
        ...this.paginationData,
        status: '00',
        supplierId: this.serviceFeeParams.supplierId,
        serviceIDs: this.serviceIDs
      }
      getPageServiceFeeList(params).then(res => {
        this.tableData = res.data.records
        this.paginationData.total = res.data.total
      }).catch(() => {
      })
    },
    // 确定
    ensure() {
      if (this.selectionList.length > 0) {
        this.$emit('selectedServiceOrder', this.selectionList)
        this.visibleDialog = false
      } else {
        this.$message.warning('请选择')
      }
    },
    // 选择批量待确认收费的数据
    selectionChange(val) {
      this.selectionList = val
    },
    // 获取row的key值优化表格的渲染
    getRowKeys(row) {
      return row.planDetailId
    }
  }
}
</script>

<style scoped>

</style>
