<!--
  @description:供应商-异常缴费处理-列表
  @Modifier: 王俊楠
  @routerPath:
  @date: 2020-11-18-14:12
-->
<template>
  <div>
    <el-table
      ref="smallTable"
      v-loading="loading"
      :data="tableData"
    >
      <el-table-column
        type="index"
        label="序号"
        align="center"
        width="60"
      />
      <el-table-column
        prop="bankno"
        label="收款账号"
        min-width="180"
        header-align="center"
      />
      <el-table-column
        prop="supplierName"
        label="供应商名称"
        min-width="180"
        header-align="center"
      />
      <template v-if="status==='04'">
        <el-table-column
          :formatter="formatterOrderTotalMoney"
          prop="payMoney"
          label="到账金额(元)"
          min-width="110"
          header-align="center"
          align="right"
        />
        <el-table-column
          :formatter="formatterOrderTotalMoney"
          prop="surplusMoney"
          label="需处理异常金额(元)"
          min-width="150"
          header-align="center"
          align="right"
        />
      </template>
      <el-table-column
        v-if="status==='06'"
        :formatter="formatterOrderTotalMoney"
        prop="proceAmount"
        label="处理金额(元)"
        min-width="150"
        header-align="center"
        align="right"
      />
      <el-table-column
        prop="createTime"
        label="到账时间"
        min-width="150"
        header-align="center"
        align="right"
      />
      <el-table-column
        prop="payeracctname"
        label="打款银行账户名"
        min-width="150"
        header-align="center"
      />
      <el-table-column
        prop="payeracctno"
        label="打款账号"
        min-width="150"
        header-align="center"
      />
      <el-table-column
        v-if="status==='06'"
        :formatter="processingTypeStatus"
        prop="status"
        label="处理类型"
        min-width="150"
        header-align="center"
      />
      <el-table-column
        header-align="center"
        label="操作"
        align="center"
        width="200"
        fixed="right"
      >
        <template slot-scope="scope">
          <template v-if="status==='04' && isShowBtn">
            <el-link type="primary" @click.stop="associatedWithOrder(scope.row)">
              [关联订单]
            </el-link>
            <el-link type="primary" @click.stop="handleAbnormal(scope.row)">
              [处理异常订单]
            </el-link>
          </template>
          <template v-if="status==='06'">
            <el-link type="primary" @click.stop="particulars(scope.row)">
              [详情]
            </el-link>
            <!--<el-link
              v-if="scope.row.auditStatus"
              type="primary"
              @click="handleDetail(scope.row.changeBulletinId)"
            >
              [流程追踪]
            </el-link>-->
          </template>
        </template>
      </el-table-column>
    </el-table>
    <!-- 关联订单-异常订单缴费处理弹窗 -->
    <orderReceiptAbnormal ref="receiptAbnormal" />
    <!--处理异常订单-异常缴费处理-->
    <serviceOrderAbnormalPayProcessingDialog ref="serviceOrderAbnormalPayProcessing" />
    <!--流程追踪查看弹框-->
    <flow-detail-dialog ref="tracingFlow" />
    <!--详情-->
    <serviceChargeDetailDialog ref="serviceChargeDetail" />
  </div>
</template>

<script>
/* 组件*/
import orderReceiptAbnormal from '../serveFeePayAbnormalOrders/orderReceiptAbnormal-dialog.vue' // 异常缴费单处理弹窗
import serviceOrderAbnormalPayProcessingDialog from '../serveFeeAbnormalPay/serviceOrderAbnormalPayProcessing-dialog' // 异常缴费处理
import flowDetailDialog from '@views/work/process/flowDetail-dialog' //  流程追踪组件
import serviceChargeDetailDialog from '../procurementOrderServeFeeReceive/serviceChargeDetail-dialog'
import { orderServeFeeMixins } from '../../mixins/orderServeFeeMixins'

export default {
  name: 'CanceledCollectionList',
  components: {
    serviceChargeDetailDialog, // 查看详情弹框
    flowDetailDialog, // 流程追踪组件
    orderReceiptAbnormal, // 异常缴费处理弹窗
    serviceOrderAbnormalPayProcessingDialog // 异常处理
  },
  mixins: [orderServeFeeMixins],
  props: {
    tableData: {
      type: Array,
      default: function() {
        return [{}]
      }
    },
    loading: {
      type: Boolean,
      default: false
    },
    // 当前选中tab页 区分异常缴费处理04 异常处理记录06
    status: {
      type: String,
      default: ''
    },
    // 是否显示操作列按钮
    isShowBtn: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      // 异常缴费处理弹框
      abnormalPayProcessingDialog: {
        dialog: false,
        voucherId: ''
      }
    }
  },
  methods: {
    // 关联订单
    associatedWithOrder(row) {
      this.$refs.receiptAbnormal.openOrderReceiptAbnormal(row)
    },
    // 处理异常
    handleAbnormal(row) {
      this.$refs.serviceOrderAbnormalPayProcessing.openAbnormalPayDialog(row)
    },
    onClose() {
      this.$emit('onClose')
    },
    // 详情
    particulars(row) {
      this.$refs.serviceChargeDetail.openDialogDetail(row, '01')
    },
    // 流程追踪详情
    handleDetail(id) {
      this.$refs.tracingFlow.openDialogInitData(id)
    }
  }
}
</script>

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