<template>
  <div class="page-com">
    <div class="tables">
      <!-- <block-header :title="title"></block-header> -->
      <el-table
          @filter-change="handleFilterChange"
          border
          size="mini"
          :highlight-current-row="true"
          :header-row-class-name="headerStyle"
          :data="data"
          stripe
          style="width: 100%;">
        <el-table-column align="center" prop="backedNo" label="还款编号"></el-table-column>
        <el-table-column align="center" prop="planIndex" label="期数"></el-table-column>
        <el-table-column align="center" prop="backedAmt" label="还款金额"></el-table-column>
        <el-table-column align="center" prop="backedTypeStr" label="还款方式"></el-table-column>
        <el-table-column align="center" prop="statusStr" label="还款单状态"></el-table-column>
        <el-table-column align="center" prop="cardOwnerName" label="银行账号户主名称"></el-table-column>
        <el-table-column align="center" prop="cardOwnerMobile" label="银行账号户主电话"></el-table-column>
        <el-table-column align="center" width="150" prop="cardBankAccount" label="银行账号" :formatter="cardBankFormat"></el-table-column>
        <el-table-column align="center" prop="bankAccount" label="还款银行账号"></el-table-column>
        <el-table-column align="center" prop="bankOwner" label="还款银行账户"></el-table-column>
        <el-table-column align="center" prop="backedDate" label="还款时间" :formatter="dateCompare"></el-table-column>
        <el-table-column align="center" prop="resultStr" label="还款结果" width="100" :formatter="resultBankFormat"
                         :filters="tableStatus"
                         column-key="status"
        >
        </el-table-column>
        <el-table-column align="center" prop="creator" label="创建人"></el-table-column>
        <el-table-column :show-overflow-tooltip="true"  align="center" prop="memo" label="备注"></el-table-column>
      </el-table>
    </div>
    <div class="pages">
      <el-pagination
          background
          @current-change="handleCurrentChange"
          @size-change="handleSizeChange"
          :current-page.sync="form.current"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="form.size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="form.total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import BlockHeader from "@/components/byh/componments/blockHeader";
import * as moment from "moment";

export default {
  name: 'RiskInfo',
  components: {
    BlockHeader
  },
  props: {
    title: {
      type: String,
      required: false,
    },
    params: {
      type: Object,
      required: true
    },
  },
  data() {
    return {
      tableStatus: [{text: '成功', value: "SUCCESS"}, {text: '失败', value: "FAIL"}],
      form: {
        total: 1,
        current: 1,
        size: 10,
        // result:''
      },
      updateQueDialog: {
        visible: false,
        feedNo: '',
        feedType: '',
        feedStatus: '',
        feedContent: '',
        clientNo: '',
        creater: '',
        finishContent: '',
      },
      data: [],
      backValue:null
    }
  },
  async created() {
    if(this.params){
      const params = this.params;
      // console.log(params,'哈哈3')
      this.form.bizNo = params.loanNo;
      await this.init()
    }

  },
  methods: {
    headerStyle() {
      return "tableHeaderStyle";
    },
    async init() {
      const parB={
        bizNo: this.form.bizNo,
        current: this.form.current,
        size: this.form.size,
        total: this.form.total,
        result:this.backValue
      }
      const res = await this.$$post('/back/detailPageList', parB );
      const {success, result} = res.data;
      if (success && result !== null) {
        const {data, total} = result;
        this.data = data;
        // console.log(this.data[0].backedNo,'data');
        this.form.total = total;
      }
    },
    // 还款结果
    resultBankFormat: function (row, column) {
      return row.resultStr + "(" + row.confirmDesc + ")";
    },
    // 合并日期
    dateCompare: function (row, column) {
      let date = row[column.property]
      if (date === undefined) {
        return ''
      }
      return moment(date).format("YYYY-MM-DD ") + row.backedTime
    },
    // 银行信息拼接
    cardBankFormat: function (row, column) {
      return row.cardBankAccount + "(" + row.cardBankName + ")";
    },
    /*日期*/
    dateFormats: function (row, column) {
      let date = row[column.property]
      if (date === undefined) {
        return ''
      }
      return moment(date).format("YYYY-MM-DD")
    },
    handleClose() {
      this.$emit("handleClose");
    },
    //客服状态
    serviceFormat: function (row, column) {
      let status = row['feedStatus'];
      return this.$enumUtils.toMsg('FeedStatus', status);
    },
    handleCurrentChange(e) {
      this.form.current = e;
      this.init();
    },
    handleSizeChange(e) {
      this.form.size = e
      this.form.current = 1;
      this.init();
    },
    //还款添加查询功能
    handleFilterChange: function (filters, value) {
      if (filters.status.length === 2) {
        this.backValue = null
      }
      else {
        this.backValue = filters.status[0]
      }
      this.init();
      // this.loanBackedData(this.loanNos)

    },
  }
}
</script>

<style>
.tables{
  margin-bottom: 20px;
}
.pages {
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
