<template>
  <el-dialog class="client-data-dialog" :visible.sync="visible" :before-close="handleClose">

    <div>
      <h2 style="float:left">还款计划</h2>
      <br/><br/><br/>
      <el-row :gutter="20" :data="ruleForm" style="margin-left:50px">
        <el-col :span="6">
          <div class="grid-content bg-purple">应还总金额：{{ this.ruleForm.planAmt }}</div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content bg-purple">计划还款本金：{{ this.ruleForm.planBen }}</div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content bg-purple">服务费：{{ this.ruleForm.planFu }}</div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content bg-purple">利息：{{ this.ruleForm.planXi }}</div>
        </el-col>
      </el-row>
      <br/>
      <el-row :gutter="20" :data="ruleForm" style="margin-left:50px">
        <el-col :span="6">
          <div class="grid-content bg-purple">已还本金：{{ this.ruleForm.backedBen }}</div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content bg-purple">已还利息：{{ this.ruleForm.backedXi }}</div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content bg-purple">已还服务费：{{ this.ruleForm.backedFu }}</div>
        </el-col>
      </el-row>

      <el-divider></el-divider>

      <h2>还款情况</h2>
      <br/>
      <el-table :data="loanBackedList" stripe style="width: 100%;">
        <el-table-column prop="backedNo" label="还款编号"></el-table-column>
        <el-table-column prop="backedAmt" label="还款金额"></el-table-column>
        <el-table-column prop="backedType" label="还款类型" :formatter="backedTypeFormat"></el-table-column>
        <el-table-column prop="result" label="还款单状态" :formatter="statusFormat"></el-table-column>
        <el-table-column prop="cardOwnerName" label="银行账户主名"></el-table-column>
        <el-table-column prop="cardOwnerMobile" label="银行卡电话号码"></el-table-column>
        <el-table-column prop="cardBankAccount" label="银行卡号"></el-table-column>
        <el-table-column prop="backedDate" label="还款时间" :formatter="dateFormat"></el-table-column>
        <el-table-column prop="confirmDesc" label="确认意见"></el-table-column>
      </el-table>
    </div>

  </el-dialog>
</template>

<script type="text/ecmascript-6">
import * as moment from "moment";

export default {
  name: 'readDetail',
  props: {
    dialogVisible: {
      type: Boolean,
      required: true
    },
    planNo: {
      type: String
    },
    planIndex: {
      type: Number
    },
    planAmt: {
      type: Number
    },
    backedBen: {
      type: Number
    },
    backedXi: {
      type: Number
    },
    planXi: {
      type: Number
    },
    loanLimit: {
      type: Number
    },
    planFu: {
      type: Number
    },
    backedFu: {
      type: Number
    },
    planBen: {
      type: Number
    },


  },
  data() {
    return {
      ui: {
        submitLoading: false
      },
      visible: this.$props.dialogVisible,
      loanBackedList: [],
      ruleForm: {
        planNo: '',
        planIndex: '',
        planAmt: '',
        planBen: '',
        planFu: '',
        planXi: '',
        backedBen: '',
        backedFu: '',
        backedXi: '',
        loanLimit: '',
      },
    }
  },
  created() {
    console.log(this)
    this.ruleForm = {
      dialogVisible: this.dialogVisible,
      planNo: this.planNo,
      planIndex: this.planIndex,
      planAmt: this.planAmt,
      backedBen: this.backedBen,
      backedFu: this.backedFu,
      planXi: this.planXi,
      planBen: this.planBen,
      planFu: this.planFu,
      backedXi: this.backedXi,
      loanLimit: this.loanLimit,
    }
  },
  methods: {
    /** 提交点击 */
    readDetail(ruleForm) {
      this.$$post('/repayRemind/getByhBackedList', {
        bizNo: this.ruleForm.planNo,
        current: 1,
        size: 10,
      })
          .then(res => {
            if (res.data.code < 1) {
              this.$message.error(res.data.msg);
              return
            }
            this.loanBackedList = res.data.data.records;
          })
    },
    /*日期*/
    dateFormat: function (row, column) {
      var date = row[column.property]
      if (date == undefined) {
        return ''
      }
      return moment(date).format("YYYY-MM-DD")
    },

    //还款单状态
    statusFormat: function (row, column) {
      var status = row['result'];
      return this.$enumUtils.toMsg('ServiceDetail', status);
    },
    //还款类型
    backedTypeFormat: function (row, column) {
      var status = row['backedType'];
      return this.$enumUtils.toMsg('backedType', status);
    },
    /** 关闭处理 */
    handleClose() {
      this.visible = false;
      setTimeout(() => {
        this.$emit('update:dialogVisible', false)
      }, 300);
    }
  },
  mounted: function () {
    this.readDetail(this.ruleForm.planNo);
  }
}
</script>

<style>

</style>
