<template>
  <div class="bill-record">
    <router-view />
    <template v-if="!$route.query.type">
      <div class="search">
        <div />
        <div class="right">
          <div>
            <el-input v-model="search.keyword" style="width: 210px;" placeholder="请输入借据编号/贷款编号" clearable></el-input>
          </div>
          <div>
            <el-input v-model="search.repaymentAccountNumber" placeholder="请输入还款帐号" clearable></el-input>
          </div>
          <div>
            <el-date-picker
              v-model="search.coreTransactionDate"
              value-format="yyyy-MM-dd"
              type="date"
              placeholder="选择核心交易日期"
            />
          </div>
          <div>
            <el-date-picker
              v-model="search.transactionDate"
              value-format="yyyy-MM-dd"
              type="date"
              placeholder="选择交易日期"
            />
          </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="total"
        :table-options="tableOptions"
      />
    </template>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { formatMoney } from '@/utils/index'
import { getCapitalAccountRecord } from '@/api/capitalFinancialManage/index'

export default {
  name: 'CapitalAuth',
  data() {
    return {
      loading: false,
      tableData: [],
      page: 1,
      size: 10,
      total: 0,
      search: {
        keyword: '',
        repaymentAccountNumber: '',
        coreTransactionDate: '',
        transactionDate: ''
      },
      tableOptions: {
        maxHeight: 'calc(100vh - 336px)',
        height: 'calc(100vh - 336px)'
      },
      columns: [
        {
          label: '序号',
          index: true
        },
        {
          label: '借据号',
          prop: 'dueBillNo',
          width: 150,
          showTooltip: true
        },
        {
          label: '贷款账号',
          prop: 'loanAccountNumber',
          width: 150,
          showTooltip: true
        },
        {
          label: '核心交易日期',
          showTooltip: true,
          width: 120,
          prop: 'coreTransactionDate'
        },
        {
          label: '应还日期',
          showTooltip: true,
          width: 120,
          prop: 'dueDate'
        },
        {
          label: '还款账号',
          showTooltip: true,
          prop: 'repaymentAccountNumber'
        },
        {
          label: '核心还款类型',
          showTooltip: true,
          width: 120,
          prop: 'repaymentType'
        },
        {
          label: '核心还款本金',
          showTooltip: true,
          width: 120,
          render: (h, row) => {
            return <div>{ row.repaymentPrincipal ? this.formatMoney(row.repaymentPrincipal) : '' }</div>
          }
        },
        {
          label: '核心还款利息',
          showTooltip: true,
          width: 120,
          render: (h, row) => {
            return <div>{ row.repaymentInterest ? this.formatMoney(row.repaymentInterest) : '' }</div>
          }
        },
        {
          label: '核心还款费用',
          showTooltip: true,
          width: 120,
          render: (h, row) => {
            return <div>{ row.repaymentFee ? this.formatMoney(row.repaymentFee) : '' }</div>
          }
        },
        {
          label: '核心还款罚息',
          showTooltip: true,
          width: 120,
          render: (h, row) => {
            return <div>{ row.repaymentDefaultInterest ? this.formatMoney(row.repaymentDefaultInterest) : '' }</div>
          }
        },
        {
          label: '核心还款罚金',
          showTooltip: true,
          width: 120,
          render: (h, row) => {
            return <div>{ row.repaymentFine ? this.formatMoney(row.repaymentFine) : '' }</div>
          }
        },
        {
          label: '核心交易流水号',
          prop: 'repaymentTransactionNumber',
          width: 150,
          showTooltip: true
        },
        {
          label: '交易日期',
          prop: 'transactionDate',
          showTooltip: true
        },
        {
          label: '交易流水',
          prop: 'transactionFlow',
          showTooltip: true,
          width: 120
        },
        {
          label: '核心还款复息',
          width: 120,
          showTooltip: true,
          render: (h, row) => {
            return <div>{ row.repaymentCompoundInterest ? this.formatMoney(row.repaymentCompoundInterest) : '' }</div>
          }
        }
      ]
    }
  },
  computed: {
    ...mapGetters([
      'constant'
    ]),
    formatMoney() {
      return (val) => {
        return formatMoney(val)
      }
    }
  },
  mounted() {
    this.fetchData()
  },
  methods: {
    async fetchData(type) {
      if (type === 'search') {
        this.page = 1
        this.size = 10
      }

      this.loading = true
      const params = {
        ...this.search,
        page: this.page || 1,
        rows: this.size || 10
      }

      const res = await getCapitalAccountRecord(params)

      this.loading = false
      if (res.success) {
        this.tableData = res.rows
        this.total = res.records
      }
    },
    getRepayStatus(status) {
      const map = {
        '01': '还款成功',
        '02': '还款失败',
        '03': '还款中'
      }

      return map[status] || ''
    }
  }
}
</script>

<style lang="scss" scoped>
.bill-record {

}
</style>
