<!--
  @description:子账户信息页面-包组下子账户列表-项目经理
  @Modifier: haofengxian
  @routerPath:
  @date: 2020-6-9-17:40
-->
<template>
  <div>
    <el-table
      ref="smallTable"
      v-loading="loading"
      :data="tableData"
    >
      <el-table-column
        type="index"
        label="序号"
        width="60px"
        align="center"
      />
      <!-- 投标人姓名 -->
      <el-table-column
        prop="supplierName"
        label="投标人姓名"
        min-width="160"
      />
      <!-- 子账号 -->
      <el-table-column
        header-align="center"
        label="子账号"
        prop="accountNo"
        align="left"
        width="200"
      />
      <!-- 子账号状态 -->
      <el-table-column
        header-align="center"
        label="子账号状态"
        prop="accountStatus"
        align="left"
        width="100"
      >
        <template slot-scope="scope">
          <span v-if="scope.row.accountStatus==='00'">未创建</span>
          <span v-if="scope.row.accountStatus==='01'">已创建</span>
        </template>
      </el-table-column>
      <!-- 账号余额（元）-->
      <el-table-column
        header-align="center"
        prop="totalBalance"
        align="right"
        width="150"
      >
        <template slot="header" slot-scope="scope">
          账号余额（元）
          <el-popover
            placement="top-start"
            popper-class="hint"
            offset="5"
            trigger="hover"
            style="margin-left:5px;"
            content="保证金子账号中账户余额，包括锁定金额与可用余额"
          >
            <el-button slot="reference" type="info" class="prompt">
              <i class="iconfont icon-qm" />
            </el-button>
          </el-popover>
        </template>
      </el-table-column>
      <!-- 可用余额（元） -->
      <el-table-column
        header-align="center"
        prop="availableBalance"
        align="right"
        width="150"
      >
        <template slot="header" slot-scope="scope">
          可用余额（元）
          <el-popover
            placement="top-start"
            popper-class="hint"
            offset="5"
            trigger="hover"
            style="margin-left:5px;"
            content="保证金子账号中可以用来扣除招标代理服务费、可以用来退款的金额"
          >
            <el-button slot="reference" type="info" class="prompt">
              <i class="iconfont icon-qm" />
            </el-button>
          </el-popover>
        </template>
      </el-table-column>
      <template v-if="bailShowShielding">
        <!-- 锁定金额（元） -->
        <el-table-column
          header-align="center"
          prop="lockedAmount"
          width="150"
          align="right"
        >
          <template slot="header" slot-scope="scope">
            锁定金额（元）
            <el-popover
              placement="top-start"
              popper-class="hint"
              offset="5"
              trigger="hover"
              style="margin-left:5px;"
              content="包含招标代理服务费锁定金额、退款锁定金额和异常供应商锁定金额"
            >
              <el-button slot="reference" type="info" class="prompt">
                <i class="iconfont icon-qm" />
              </el-button>
            </el-popover>
          </template>
        </el-table-column>
        <!-- 待确认金额（元） -->
        <el-table-column
          header-align="center"
          prop="undefinedAmount"
          align="right"
          width="160"
        >
          <template slot="header" slot-scope="scope">
            待确认金额（元）
            <el-popover
              placement="top-start"
              popper-class="hint"
              offset="5"
              trigger="hover"
              style="margin-left:5px;"
              content="汇款账户名称和投标人名称不一致时，需要项目经理到收款记录手动确认的金额"
            >
              <el-button slot="reference" type="info" class="prompt">
                <i class="iconfont icon-qm" />
              </el-button>
            </el-popover>
          </template>
        </el-table-column>
      </template>
      <el-table-column
        header-align="center"
        label="操作"
        width="250"
      >
        <template slot-scope="scope">
          <!--lockStatus 锁定状态-->
          <el-link
            v-if="bailShowShielding"
            type="primary"
            @click.stop="lookDetail(scope.row)"
          >
            [查看]
          </el-link>
          <el-link
            v-if="scope.row.accountStatus==='00'"
            type="primary"
            @click.stop="createSubaccount(scope.row)"
          >
            [创建子账号]
          </el-link>
          <el-link
            v-if="scope.row.lockStatus==='00' && bailShowShielding"
            type="primary"
            @click.stop="lockBidder(scope.row)"
          >
            [锁定投标人]
          </el-link>
          <el-link
            v-if="scope.row.lockStatus==='01' && bailShowShielding"
            type="primary"
            @click.stop="unlockbidder(scope.row)"
          >
            [解锁投标人]
          </el-link>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
/* 接口*/
import { queryDepositAccountList, applyBailfeeVirtualAccount } from '@api/fee/bailfee'
import { depositSystemConfig } from '../../mixins/depositSystemConfig'
export default {
  name: 'DepositAccountList',
  mixins: [depositSystemConfig],
  data() {
    return {
      loading: true,
      tableData: [],
      searchForm: {
        accountNo: '', // 虚拟账户
        packId: '',
        pageNo: 1,
        pageSize: 999,
        stageId: '', // 阶段ID
        supplierId: '', // 供应商id
        tenderId: '' // 项目id
      }
    }
  },
  created() {
    // 获取列表信息
    this.loadData()
  },
  methods: {
    // 获取数据
    loadData() {
      this.searchForm.packId = this.$route.params.packId // 包组ID
      queryDepositAccountList(this.searchForm).then(response => {
        this.loading = false
        this.tableData = response.data.records
      }).catch(() => {

      })
    },
    // 查看详情
    lookDetail(row) {
      this.$router.push({
        path: '/fee/subAccountInfoDetail',
        name: 'SubAccountInfoDetail',
        params: {
          ...this.$route.params,
          accountId: row.accountId // 保证金账户id
        }
      })
    },
    // 锁定投标人
    lockBidder(row) {
      this.$router.push({
        path: '/fee/lockBidder',
        name: 'LockBidderAdd',
        params: {
          ...this.$route.params,
          accountId: row.accountId
        }
      })
    },
    // 解锁投标人
    unlockbidder(row) {
      this.$router.push({
        path: '/fee/unlockSupplier',
        name: 'UnlockSupplierAdd',
        params: {
          ...this.$route.params,
          accountId: row.accountId
        }
      })
    },
    // 创建子账号
    createSubaccount(row) {
      applyBailfeeVirtualAccount(row.accountId).then(response => {
        this.$message({
          type: 'success',
          message: '创建成功'
        })
      }).catch(() => {
      })
    }
  }
}
</script>

<style scoped>

</style>
