<!--
  @description: 子账号信息
  @Modifier: sunxinman
  @routerPath: /fee/subAccountInfo
  @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">
      <div>
        <div class="page-title">
          标段（包）信息
        </div>
        <table class="tableData">
          <tr>
            <td>招标项目编号</td>
            <td>{{ formData.tenderNo }}</td>
            <td>招标项目名称</td>
            <td>{{ formData.tenderName }}</td>
          </tr>
          <tr>
            <td>标段（包）编号</td>
            <td>{{ formData.packNo }}</td>
            <td>标段（包）名称</td>
            <td>{{ formData.packName }}</td>
          </tr>
          <tr>
            <td>项目经理</td>
            <td>{{ formData.tenderManager }}</td>
            <td />
            <td />
          </tr>
          <tr>
            <td>
              保证金余额（元）
              <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>
            </td>
            <td>{{ formData.totalBalance }}</td>
            <td>
              可用余额（元）
              <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>
            </td>
            <td>{{ formData.availableBalance }}</td>
          </tr>
        </table>
      </div>
      <div>
        <div class="page-title">
          子账号信息
        </div>
        <deposit-account-list />
      </div>
    </section>
  </div>
</template>
<script>
/* 接口*/
import { queryDepositPackinfoList } from '@api/fee/bailfee'
/* 混合开发方法-参数字段*/
import { ListMixin } from '@/mixins/ListMixin'
import { cashDepositGroupMixin } from '../../mixins/cashDepositGroupMixin'
/* 组件*/
import depositAccountList from './depositAccount-list'

export default {
  name: 'SubAccountInfoList',
  components: {
    'deposit-account-list': depositAccountList
  },
  mixins: [ListMixin, cashDepositGroupMixin],
  data() {
    return {
      // 标段（包）信息
      formData: {
        tenderName: '', // 项目名称
        tenderNo: '', // 项目编号
        packNo: '', // 标段包编号
        packName: '', // 标段包名称
        tenderManager: '' // 项目经理
      }
    }
  },
  created() {
    // 获取子账号标包信息
    this.getDepositPackInfo()
  },
  methods: {
    // 获取子账号标包信息
    getDepositPackInfo() {
      const params = {
        packId: this.$route.params.packId // 标段id
      }
      queryDepositPackinfoList(params).then(response => {
        this.formData = response.data.records.length > 0 && response.data.records[0]
      }).catch(() => {

      })
    },
    // 返回 保证金管理列表
    back() {
      this.$router.push({
        name: 'CashDepositManageList'
      })
    }
  }
}
</script>
<style lang="less" scoped>
</style>
