<template>
  <div class="cooperation-survey">
    <ol class="breadcrumb">
      <li>合作概况</li>
    </ol>
    <div class="tempalte-content">
      <div class="search">
        <div class="left"></div>
        <div class="right">
          <div>
            <el-input v-model="search.institutionName" placeholder="请输入资方名称" style="width: 200px" clearable></el-input>
          </div>
          <div class="leftBtn">
            <el-button type="primary" @click="fetchData('search')">查询</el-button>
          </div>
        </div>
      </div>
      <div class="table-box">
        <el-table v-loading="loading"  :data="tableData" height="calc(100vh - 0.85rem - 180px)">
          <el-table-column type="index" label="序号"  width="50" ></el-table-column>
          <el-table-column prop="institutionName" label="资方名称" width="200">
            <template slot-scope="scope">
              <el-tooltip class="item" effect="dark" :content="scope.row.institutionName" placement="top">
                <span class="one-ellipsis">{{ scope.row.institutionName }}</span>
              </el-tooltip>
            </template>
          </el-table-column>
          <el-table-column prop="businessType" label="业务类型" width="150"></el-table-column>
          <el-table-column prop="cooperationProduct" label="适用产品">
            <template slot-scope="scope">
              <el-tooltip class="item" effect="dark" :content="scope.row.cooperationProduct" placement="top">
                <span class="one-ellipsis">{{ scope.row.cooperationProduct }}</span>
              </el-tooltip>
            </template>
          </el-table-column>
          <el-table-column prop="manager" label="客户经理"></el-table-column>
          <el-table-column prop="creditEffectiveDate" label="授信生效日" width="140"></el-table-column>
          <el-table-column prop="creditExpiryDate" label="授信到期日" width="140"></el-table-column>
          <el-table-column prop="creditAmount" label="授信金额" width="180">
            <template slot-scope="scope">
              <span >{{calcMoney(scope.row.creditAmount)}} {{ scope.row.currency }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="useCreditAmount" label="用信金额" width="180">
            <template slot-scope="scope">
              <span >{{calcMoney(scope.row.useCreditAmount)}} {{ scope.row.currency }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="availableAmount" label="可用金额" width="180">
            <template slot-scope="scope">
              <span >{{calcMoney(scope.row.availableAmount)}} {{ scope.row.currency }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="creditStatus" label="授信状态"></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>
  </div>
</template>

<script>
module.exports = {
  name: 'CooperationSurvey',
  data() {
    return {
      search: {
        institutionName: '',
      },
      deepSearch: {},
      page: 1,
      size: 10,
      count: 10,
      loading: false,
      tableData: []
    }
  },
  computed: {
    calcMoney() {
      return function (val) {
        return this.$utils.formatMoney(val)
      }
    },
  },
  activated() {
    this.fetchData()
  },
  methods: {
    fetchData(type) {
      if(type === 'search') {
        this.deepSearch = JSON.parse(JSON.stringify(this.search))
      }
      if(Object.keys(this.deepSearch).length !== 0) {
        this.search = JSON.parse(JSON.stringify(this.deepSearch))
      }

      this.loading = true
      const params = {
        page: this.page,
        rows: this.size,
        ...this.search,
      }
      this.$api.capitalManage.getCooperationSurveyList(params).then(({ data }) => {
        const { rows, records } = data
        this.loading = false
        this.tableData = rows.map(item => {
          item.creditEffectiveDate = this.$utils.parseTime(item.creditEffectiveDate, 'y-m-d')
          item.creditExpiryDate = this.$utils.parseTime(item.creditExpiryDate, 'y-m-d')
          return item
        })
        this.count = records
      })
    },
    handleSizeChange(val) {
      // 公共分页每页显示条数
      this.size = val
      this.page = 1
      this.fetchData()
    },
    handleCurrentChange(val) {
      // 公共分页页码事件
      this.page = val
      this.fetchData()
    },
  },
}
</script>

<style scoped>

</style>
