<template>
  <div class="relation-disburse-details">
    <ol class="breadcrumb" style="margin-top:0;">
      <i class="icon-chevron-sign-left newBackBtn" @click="() => { $router.go(-1) }"></i>
      <li>关联支用</li>
      <li>详情</li>
    </ol>
    <div class="tempalte-content">
      <p class="details-title">详情</p>
      <div class="multiple-form" style="margin: 20px 0px;">
        <div>
          <div class="required">出资方：</div>
          <div>
            <el-input placeholder="请输入出资方" v-model="ruleForm.name" disabled></el-input>
          </div>
        </div>
      </div>
      <div class="table-box">
        <el-table v-loading="loading"  :data="tableData" height="calc(100vh - 0.85rem - 220px)">
          <el-table-column type="index" label="序号"  width="50"></el-table-column>
          <el-table-column prop="creditSubjectName" label="授信主体" width="200">
            <template slot-scope="{row}">
              <el-tooltip effect="dark" :content="row.creditSubjectName" placement="top">
                <span class="one-ellipsis">{{ row.creditSubjectName }}</span>
              </el-tooltip>
            </template>
          </el-table-column>
          <el-table-column prop="projectManager" label="项目经理"></el-table-column>
          <el-table-column prop="businessNo" label="业务编号" width="150">
            <template slot-scope="{row}">
              <el-tooltip effect="dark" :content="row.businessNo" placement="top">
                <span class="one-ellipsis">{{ row.businessNo }}</span>
              </el-tooltip>
            </template>
          </el-table-column>
          <el-table-column prop="contractNo" label="合同编号" width="100">
            <template slot-scope="{row}">
              <el-tooltip effect="dark" :content="row.contractNo" placement="top">
                <span class="one-ellipsis">{{ row.contractNo }}</span>
              </el-tooltip>
            </template>
          </el-table-column>
          <el-table-column prop="quotaDisburseBatch" label="批次号"></el-table-column>
          <el-table-column prop="loadRecordList" label="放款金额" width="200">
            <template slot-scope="{row}">
              <div v-for="(item, index) in row.loanInfoVo.loanRecordList" :key="index"> {{ calcMoney(item.loanAmount) }} {{ item.currencyCode }}</div>
            </template>
          </el-table-column>
          <el-table-column prop="loadRecordList" label="放款日期" width="120">
            <template slot-scope="{row}">
              <div v-for="(item, index) in row.loanInfoVo.loanRecordList" :key="index"> {{item.loanDate}}</div>
            </template>
          </el-table-column>
          <el-table-column prop="loanInfoVo.expireDate" label="到期日" width="120"></el-table-column>
          <el-table-column  label="操作" >
            <template slot-scope="scope">
              <el-button v-power="'deleteEnterprise'"  type="text"  @click="modifyClick(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div v-if="count" class="pagination">
        <el-pagination
          :page-sizes="[10, 20, 30, 50]"
          :page-size="size"
          :total="count"
          :current-page="page"
          layout="slot, total, sizes, prev, pager, next, jumper"
          background
          @current-change="handleCurrentChange"
          @size-change="handleSizeChange"
        >
        </el-pagination>
      </div>
      <!-- <div class="submit-btn">
        <el-button type="primary" @click="onSubmit" style="width: 150px;">确定</el-button>
        <el-button @click="() => { $router.go(-1) }" style="width: 150px;">取消</el-button>
      </div> -->
    </div>
  </div>
</template>

<script>
module.exports = {
  data() {
    return {
      loading: false,
      page: 1,
      size: 10,
      count: 0,
      ruleForm: {
        name: '',
      },
      tableData: []
    }
  },
  created() {
    this.getDetails()
  },
  computed: {
    calcMoney() {
      return function (val) {
        return this.$utils.formatMoney(val)
      }
    },
  },
  methods: {
    getDetails() {
      const { id, institutionName } = this.$route.query
      this.ruleForm.name = institutionName
      this.loading = true
      const params = {
        institutionId: id,
        page: this.page,
        rows: this.size
      }
      this.$api.capitalManage.getRelationDisburseDetails(params).then(({ data: { rows, records } }) => {
        this.loading = false
        this.tableData = rows
        this.count = records
      })
    },
    modifyClick(row) {
      this.$confirm('确认删除该绑定关系么？', '删除', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
      }).then(() => {
        const { relationCustomerId, relationCustomerDisburseId } =  row
        const params = {
          Loading: true,
          relationCustomerId: relationCustomerId || '',
          relationCustomerDisburseId: relationCustomerDisburseId || ''
        }
        this.$api.capitalManage.relationDisbursDetailsDele(params).then(() => {
          this.getDetails()
          this.$message.success('删除该绑定关系成功')
        })
      })
    },
    onSubmit() {

    },
    handleSizeChange(val) {
      // 公共分页每页显示条数
      this.size = val
      this.page = 1
      this.fetchData()
    },
    handleCurrentChange(val) {
      // 公共分页页码事件
      this.page = val
      this.fetchData()
    },
  },
}
</script>

<style scoped>

</style>
