<template>
  <div class="cooperation-survey">
    <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>
    <cy-comm-table
      ref="commTable"
      v-loading="loading"
      :columns="columns"
      :data="tableData"
      :count="count"
    />
  </div>
</template>

<script>
import { getCooperationSurveyList } from '@/api/capitalManage/cooperationSurvey'
import { parseTime, formatMoney } from '@/utils'
export default {
  data() {
    return {
      search: {
        institutionName: ''
      },
      deepSearch: {},
      columns: [
        {
          label: '序号',
          index: true
        },
        {
          label: '资方名称',
          prop: 'institutionName',
          showTooltip: true
        },
        {
          label: '业务类型',
          showTooltip: true,
          prop: 'businessType'
        },
        {
          label: '适用产品',
          showTooltip: true,
          prop: 'cooperationProduct'
        },
        {
          label: '客户经理',
          showTooltip: true,
          prop: 'manager'
        },
        {
          label: '授信生效日',
          showTooltip: true,
          prop: 'creditEffectiveDate'
        },
        {
          label: '授信到期日',
          showTooltip: true,
          prop: 'creditExpiryDate'
        },
        {
          label: '授信金额',
          showTooltip: true,
          prop: 'creditAmount',
          render: (h, row) => {
            return <span>{ formatMoney(row.creditAmount) } { row.currency }</span>
          }
        },
        {
          label: '用信金额',
          showTooltip: true,
          prop: 'useCreditAmount',
          render: (h, row) => {
            return <span>{ formatMoney(row.useCreditAmount) } { row.currency }</span>
          }
        },
        {
          label: '可用金额',
          showTooltip: true,
          prop: 'useCreditAmount',
          render: (h, row) => {
            return <span>{ formatMoney(row.availableAmount) } { row.currency }</span>
          }
        },
        {
          label: '授信状态',
          showTooltip: true,
          prop: 'creditStatus'
        }
      ],
      loading: false,
      tableData: [],
      count: 0
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    fetchData(type) {
      if (type === 'search') {
        this.deepSearch = JSON.parse(JSON.stringify(this.search))
        this.page = 1
        this.size = 10
      }
      if (Object.keys(this.deepSearch).length !== 0) {
        this.search = JSON.parse(JSON.stringify(this.deepSearch))
      }

      this.loading = true
      const params = {
        page: this.page || 1,
        rows: this.size || 10,
        ...this.search
      }
      getCooperationSurveyList(params).then((data) => {
        const { rows, records } = data
        this.loading = false
        this.tableData = rows.map(item => {
          item.creditEffectiveDate = parseTime(item.creditEffectiveDate, 'y-m-d')
          item.creditExpiryDate = parseTime(item.creditExpiryDate, 'y-m-d')
          return item
        })
        this.count = records
      })
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
