<!--
  @description: 查看子账号信息
  @Modifier: sunxinman
  @routerPath: /fee/subAccountInfoDetail
  @date: 2020/03/24-14:11
-->
<template>
  <div>
    <section class="title p0-16 clearfix">
      <!-- 返回 -->
      <div class="title-back pointer" @click="back()">
        <i class="iconfont icon-fanhui mr10" />查看子账号信息
      </div>
    </section>
    <section class="p0-16">
      <!-- 表格部分 -->
      <table class="tableData">
        <tr>
          <td>招标项目编号</td>
          <td>{{ formData.tenderNo }}</td>
          <td>招标项目名称</td>
          <td>{{ formData.tenderName }}</td>
        </tr>
        <tr>
          <td>项目经理</td>
          <td>{{ formData.tenderManager }}</td>
          <td>投标人</td>
          <td>{{ formData.supplierName }}</td>
        </tr>
        <tr>
          <td>联系电话</td>
          <td />
          <td>子账号</td>
          <td>{{ formData.accountNo }}</td>
        </tr>
        <tr>
          <td>子账号状态</td>
          <td>{{ formData.accountStatus | filterAccountStatus }}</td>
          <td>账户余额（元）</td>
          <td>{{ formData.totalBalance }}</td>
        </tr>
        <tr>
          <td>可用余额（元）</td>
          <td colspan="3">
            {{ formData.availableBalance }}
          </td>
        </tr>
      </table>
      <!-- 收款账号 -->
      <div class="page-title">
        收款账号
      </div>
      <div>
        <el-table
          ref="smallTable"
          :data="tableData"
        >
          <el-table-column
            type="index"
            label="序号"
            width="60px"
            align="center"
          />
          <!-- 付款账号 -->
          <el-table-column
            prop="payerNo"
            align="center"
            label="付款账号"
            width="160"
          />
          <!-- 付款账号名称 -->
          <el-table-column
            header-align="center"
            label="付款账号名称"
            prop="payerName"
            min-width="200"
          />
          <!-- 付款开户行名称 -->
          <el-table-column
            header-align="center"
            prop="payerBankName"
            label="付款开户行名称"
            min-width="150"
          />
          <!-- 交易金额（元） -->
          <el-table-column
            header-align="center"
            prop="amount"
            label="交易金额（元）"
            width="150"
            align="right"
          />
          <!-- 交易时间 -->
          <el-table-column
            header-align="center"
            label="交易时间"
            prop="inDate"
            align="center"
            width="140px"
          />
          <!-- 状态 -->
          <el-table-column
            :formatter="formatPayStatus"
            label="状态"
            prop="payStatus"
            align="center"
            width="100"
          />
        </el-table>
      </div>
    </section>
    <!--操作按钮-->
    <div class="but_footer">
      <div class="but_footer-h">
        <div class="but_footer-but">
          <el-button @click="back">
            关闭
          </el-button>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
/* 接口*/
// getVirtualAccountBills
import { getBailfeeVirtualAccountInfo, queryBillList } from '@api/fee/bailfee'
/* 混合开发方法-参数字段*/
import { cashDepositGroupMixin } from '../../mixins/cashDepositGroupMixin'

export default {
  name: 'SubAccountInfoDetail',
  filters: {
    filterAccountStatus(status) {
      const statusMap = {
        '00': '未创建',
        '01': '已创建'
      }
      return statusMap[status]
    }
  },
  mixins: [cashDepositGroupMixin],
  data() {
    return {
      accountId: this.$route.params.accountId, // 保证金账户id
      tableData: [],
      formData: {
        accountId: '',
        accountName: '',
        accountNo: '',
        accountStatus: '',
        availableBalance: 0,
        bankName: '',
        bankNo: '',
        lockStatus: '',
        lockedAmount: 0,
        packId: '',
        packName: '',
        packNo: '',
        payStauts: '',
        payType: '',
        receivableAmount: 0,
        stageId: '',
        supplierId: '',
        supplierName: '',
        tenderDepart: '',
        tenderId: '',
        tenderManager: '',
        tenderName: '',
        tenderNo: '',
        toRefundedAmount: 0,
        totalBalance: 0,
        undefinedAmount: 0
      }
    }
  },
  created() {
    // 获取列表信息
    this.loadData()
    this.getBillList()
  },
  methods: {
    // 招标项目信息
    loadData() {
      getBailfeeVirtualAccountInfo(this.accountId).then(res => {
        this.formData = res.data
      }).catch(() => {
      })
    },
    // 收款账号交易信息
    // getVirtualAccountBillsList() {
    //   getVirtualAccountBills(this.accountId).then(res => {
    //     this.getBillList()
    //   }).catch(() => {
    //   })
    // },
    // 获取账号交易信息详情列表
    getBillList() {
      const params = {
        packId: this.$route.params.packId, // 标段id
        accountId: this.$route.params.accountId // 保证金账户id
      }
      queryBillList(params).then(response => {
        this.loading = false
        this.tableData = response.data.records
        this.paginationData.total = response.data.total
      }).catch(() => {
      })
    },
    // 返回
    back() {
      this.$router.push({
        path: '/fee/subAccountInfo',
        name: 'SubAccountInfoList',
        params: {
          ...this.$route.params
        }
      })
    }
  }
}
</script>
<style lang="less" scoped>

</style>
