<!--
  @description:异常订单缴费处理（关联订单）详情
  @Modifier: haofengxian
  @routerPath:
  @date: 2021-3-12-17:57
-->
<template>
  <div>
    <table class="tableData mb10">
      <tr>
        <td>收款单号</td>
        <td>{{ formData.voucherCode }}</td>
        <td>供应商名称</td>
        <td>{{ formData.supplierName }}</td>
      </tr>
      <tr>
        <td>入账银行账号</td>
        <td>
          {{ formData.bankno }}
        </td>
        <td>入账时间</td>
        <td>{{ formData.createTime }}</td>
      </tr>
      <tr>
        <td>入账金额(元)</td>
        <td>
          {{ numFilter(formData.payMoney) }}
        </td>
        <td>本次确认缴费金额(元)</td>
        <td>  {{ numFilter(formData.thisHandMoney) }}</td>
      </tr>
      <tr>
        <td>未处理金额(元)</td>
        <td>
          {{ numFilter(formData.surplusMoney) }}
        </td>
        <td>已处理金额(元)</td>
        <td>
          {{ numFilter(formData.useMoney) }}
        </td>
      </tr>
      <tr>
        <td>异常原因</td>
        <td colspan="3">
          {{ formData.remarks }}
        </td>
      </tr>
      <tr>
        <td>说明文件</td>
        <td colspan="3">
          <downloadFile :data="upLoadData" />
        </td>
      </tr>
    </table>
    <el-table
      ref="singleTable"
      :data="tableData"
    >
      <el-table-column
        type="index"
        label="序号"
        align="center"
        width="50"
      />
      <el-table-column
        prop="orderCode"
        label="订单编号"
        align="center"
        width="160"
      />
      <el-table-column
        :formatter="formatterOrderTotalMoney"
        prop="orderTotalMoney"
        label="订单金额（元）"
        min-width="120"
        header-align="center"
        align="right"
      />
      <el-table-column
        :formatter="formatterOrderTotalMoney"
        prop="shouldChargeMoney"
        label="服务费金额（元）"
        min-width="120"
        header-align="center"
        align="right"
      />
      <el-table-column
        :formatter="formatterOrderTotalMoney"
        prop="paidMoney"
        label="已缴金额（元）"
        min-width="120"
        header-align="center"
        align="right"
      />
      <el-table-column
        :formatter="formatterOrderTotalMoney"
        prop="confirmMoney"
        label="确认缴费金额（元）"
        min-width="150"
        header-align="center"
        align="right"
      />
      <el-table-column
        :formatter="formatterOrderStatus"
        prop="status"
        label="缴费状态"
        min-width="100"
        header-align="center"
        align="center"
      />
    </el-table>
  </div>
</template>

<script>
/* api*/
import { payeeSingleExcepDetails, excepPayeeRelationDetailsInfo } from '@/api/procurement/procurementOrder'
/* 公用方法*/
import downloadFile from '@comp/common/updownload/downloadFile' // 获取附件信息 下载组件
import { orderServeFeeMixins } from '../../mixins/orderServeFeeMixins'
export default {
  name: 'ProcurementServeOrderReceiptSureDialog',
  components: {
    downloadFile // 文件下载
  },
  mixins: [orderServeFeeMixins],
  props: {
    orderReceiptInfo: {
      type: Object,
      default: () => {}
    },
    // 详情类型 00审核中服务费查看 01异常处理记录查看
    detailType: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      flowStatus: this.$route.query.flowStatus, // 工作流进入
      tableData: [],
      formData: {
        bankno: '', // 账号（入账账号）
        createTime: '', // 创建时间（入账时间）
        recordId: '', // 异常费用ID
        payMoney: 0, // 入账金额
        remarks: '', // 备注
        supplierId: '', // 供应商ID
        supplierName: '', // 供应商名称
        surplusMoney: '', // 剩余金额
        useMoney: '', // 已使用金额
        voucherCode: '', // 收款单编号
        voucherId: '', // 收款单ID
        thisHandMoney: '' // 待确认缴费
      },
      upLoadData: {
        bizId: '',
        fileType: 'excep_pay_handle'
      }
    }
  },
  mounted() {
    this.getGroupType()
    this.handleFlow()
  },
  methods: {
    // 工作流进入
    handleFlow() {
      let id = ''
      if (this.flowStatus) {
        id = this.$route.query.packId
        this.getPayeeSingleExcepDetails(id)
      } else {
        id = this.orderReceiptInfo.id
        if (this.detailType === '00') {
          this.getPayeeSingleExcepDetails(id)
        }
        if (this.detailType === '01') {
          this.getExcepPayeeHandDetailsInfo(id)
        }
      }
    },
    // 审批详情-- 异常缴纳关联订单
    getPayeeSingleExcepDetails(id) {
      payeeSingleExcepDetails(id).then(res => {
        this.formData = res.data
        this.tableData = res.data.listExceptionServiceFeeOrderInfoDtoList
      }).catch(() => {
      })
    },
    // 异常缴费处理记录详情
    getExcepPayeeHandDetailsInfo(id) {
      excepPayeeRelationDetailsInfo(id).then(res => {
        this.formData = res.data
        this.tableData = res.data.lists
      }).catch(() => {
      })
    }
  }
}
</script>

<style scoped lang="less">
</style>
