<!--
  @description: 保证金退还审批-项目信息、退款明细
  @Modifier: sunxinman/haofengxian
  @routerPath: /work/bailfee/bailfeeRefundAudit-detail
  @date: 2020/04/03-15:01
-->
<template>
  <div :class="flowStatus?'mb10': ''">
    <p class="page-title">
      1、项目信息
    </p>
    <table class="tableData">
      <tr>
        <td>项目名称</td>
        <td>{{ formData.tenderName }}</td>
        <td>项目编号</td>
        <td>{{ formData.tenderNo }}</td>
      </tr>
      <tr>
        <td>标段（包）名称</td>
        <td>{{ formData.packNo }}</td>
        <td>标段（包）编号</td>
        <td>{{ formData.packNo }}</td>
      </tr>
    </table>
    <div style="line-height: 36px">
      <span class="page-title">2、退款明细 </span>
      <p style="display: inline-block">
        一共<span>{{ paginationData.total }}</span>条，总计退款
        <span class="red-star">{{ totalMoney }}</span>元
      </p>
    </div>
    <section>
      <el-table
        ref="smallTable"
        :data="tableData"
        width="100%"
      >
        <el-table-column
          type="index"
          label="序号"
          width="60px"
          align="center"
        />
        <!-- 投标人  -->
        <el-table-column

          header-align="center"
          prop="supplierName"
          label="投标人"
          min-width="300"
        />
        <!-- 是否中标 -->
        <el-table-column
          :formatter="formatWinStatus"
          header-align="center"
          label="是否中标"
          prop="winStatus"
          align="center"
          width="80"
        />
        <!-- 退款申请人 -->
        <el-table-column
          header-align="center"
          prop="createUserName"
          label="退款申请人"
          align="center"
          min-width="150"
        />
        <!-- 退款金额小写（元） -->
        <el-table-column
          header-align="center"
          prop="refundAmount"
          label="退款金额小写（元）"
          width="150"
          align="right"
        />
        <!-- 保证金余额（元） -->
        <el-table-column
          header-align="center"
          label="保证金余额（元）"
          prop="accountBlance"
          align="right"
          min-width="150"
        />
        <!-- 错误来款 -->
        <el-table-column
          :formatter="formatErrorStatus"
          header-align="center"
          prop="errorStatus"
          label="错误来款"
          align="center"
          min-width="80"
        />
        <!-- 备注 -->
        <el-table-column
          label="备注"
          prop="remark"
          header-align="center"
          min-width="300"
        />
        <!-- 说明 -->
        <!--          <el-table-column
            label="说明"
            prop="remark"
            align="center"
            min-width="110"/>-->
        <!-- 驳回理由 -->
        <el-table-column
          label="驳回理由"
          prop="auditReason"
          align="center"
          min-width="220"
        />
        <!-- 操作 -->
        <el-table-column
          header-align="center"
          align="center"
          fixed="right"
          label="操作"
          width="120"
        >
          <template slot-scope="scope">
            <el-link
              v-if="scope.row.refundStatus!=='02' && auditStatus === '00'"
              type="primary"
              @click="reject(scope.row)"
            >
              [驳回]
            </el-link>
            <el-link
              type="primary"
              @click="viewDetail(scope.row)"
            >
              [查看]
            </el-link>
          </template>
        </el-table-column>
      </el-table>
      <!--分页组件-->
      <pagination :pagination-data="paginationData" @change="loadData" />
    </section>
    <!-- 保证金退换审批-输入驳回原因 -->
    <rejectReason ref="rejectReason" @loadData="loadData" />
    <!-- 查看退款明细 -->
    <refundDetail :dialog-data-refund="dialogDataRefund" />
  </div>
</template>
<script>
/* 接口*/
import { queryTotalRefundAmount, queryWaiteAuditDetailInfoList } from '@api/fee/bailfee'
/* 公用方法*/
import { moneyFormat } from '@/assets/js/utils'// 常用方法
/* 混合开发方法-参数字段*/
import { ListMixin } from '@/mixins/ListMixin'// 分页
import { cashDepositMixin } from '../mixins/cashDepositMixin'
import { cashDepositGroupMixin } from '../mixins/cashDepositGroupMixin'
/* 组件*/
import pagination from '@comp/common/pagination/pagination'// 分页
import rejectReason from './rejectReason-dialog' // 保证金退换审批-输入驳回原因
import refundDetail from './refund-detail' // 查看退款明细弹框
export default {
  name: 'BailfeeRefundAuditDetail',
  components: {
    pagination, // 分页
    rejectReason, // 驳回原因
    refundDetail // 查看退款明细
  },
  mixins: [ListMixin, cashDepositMixin, cashDepositGroupMixin],
  props: {
    // 审核状态
    auditStatus: {
      type: String,
      default: function() {
        return ''
      }
    }
  },
  data() {
    return {
      flowStatus: this.$route.query.flowStatus, // 01 工作流进入驳回编辑
      refundId: '', // 退款主表id
      totalMoney: 0.00, // 退款金额统计
      tableData: [],
      // 项目信息
      formData: {
        packName: '', // 标段名称
        packNo: '', // 标段编号
        tenderName: '', // 项目名称
        tenderNo: ''// 项目编号
      },
      // 查看退款明细
      dialogDataRefund: {
        dialog: false, // 查看退款明细弹框
        refundDetailId: ''// 退款明细id
      }
    }
  },
  created() {
    // flowStatus true为工作流进入
    if (this.flowStatus) {
      this.refundId = this.$route.query.bizId
    } else {
      this.refundId = this.$route.params.refundId
    }
    this.cashDepositRefundAuditAddData.bizId = this.refundId // 主键id
    // 获取列表信息
    this.loadData()
    // 查询金额统计
    this.getTotalMoney()
  },
  methods: {
    // 查询金额统计
    getTotalMoney() {
      queryTotalRefundAmount(this.refundId).then(res => {
        this.totalMoney = res.data ? moneyFormat(Number(res.data).toFixed(2)) : moneyFormat(this.totalMoney)
      })
    },
    // 获取数据
    loadData() {
      const params = {
        refundId: this.refundId,
        pageNo: this.paginationData.pageNo,
        pageSize: this.paginationData.pageSize
      }
      queryWaiteAuditDetailInfoList(params).then(response => {
        this.tableData = response.data.records
        this.tableData.forEach(item => {
          item.accountBlance = item.accountBlance ? moneyFormat(Number(item.accountBlance).toFixed(2)) : 0.00// 保证金余额转千分位
          item.refundAmount = item.refundAmount ? moneyFormat(Number(item.refundAmount).toFixed(2)) : 0.00// 退款金额转千分位
        })
        this.paginationData.total = response.data.total
        // 取项目信息
        this.formData = this.tableData[0] || this.formData
      }).catch(() => {
      })
    },
    // 驳回
    reject(row) {
      this.$refs.rejectReason.openDialog(row.refundDetailId)
    },
    // 查看
    viewDetail(row) {
      this.dialogDataRefund.dialog = true
      this.dialogDataRefund.refundDetailId = row.refundDetailId
    }
  }
}
</script>
<style lang="less" scoped>

</style>
