<template>
  <el-dialog class="common-dialog"
             title="回款确认" :visible.sync="dialogVisible" width="60%" :before-close="handleClose">

    <div class="content-table">
      <table>
        <tr>
          <th>借条编号：</th>
          <td>{{loanRecord.loanNo}}</td>
          <th>类型 ：</th>
          <td>{{this.$enumUtils.toMsg('LoanTypeEnum',loanRecord.loanType)}}</td>
          <th>借条状态：</th>
          <td>{{this.$enumUtils.toMsg('LoanStatusEnum',loanRecord.status)}}</td>
        </tr>
        <tr>
          <th>结转方式：</th>
          <td>{{this.$enumUtils.toMsg('LoanBackTypeEnum',loanRecord.backType)}}</td>
          <th>出借人：</th>
          <td>{{loanRecord.lendCardBean.ownerName}}</td>
        </tr>
        <tr>
          <th>客户姓名：</th>
          <td>{{loanRecord.clientBean.clientName}}</td>
          <th>证件号码：</th>
          <td>{{loanRecord.clientBean.certNo}}</td>
          <th>手机号码：</th>
          <td>{{loanRecord.clientBean.clientCell}}</td>
        </tr>
        <tr>
          <th>合同金额：</th>
          <td>{{loanRecord.loanAmt}} 元</td>
          <th>放款金额：</th>
          <td>{{loanRecord.backAmt}} 元</td>
          <th>利息/服务费：</th>
          <td>{{loanRecord.rateAmt}} / {{loanRecord.serviceAmt}} 元</td>
        </tr>
        <tr>
          <th>借款日：</th>
          <td>{{dateFormatText(loanRecord.startDate)}}</td>
          <th>还款日：</th>
          <td>{{dateFormatText(loanRecord.endDate)}}</td>
          <th>借款天数：</th>
          <td>{{loanRecord.loanLife}}</td>
        </tr>
        <tr>
          <th>回款账户：</th>
          <td><span style="color:red;font-weight: bold;">{{repayBacked.accountName}}</span></td>
          <th>回款银行卡：</th>
          <td><span style="color:red;font-weight: bold;">{{repayBacked.accountCard}}</span></td>
          <th>业务组：</th>
          <td>{{loanRecord.bizGroup}}</td>
        </tr>
        <tr>
          <th>还款时间：</th>
          <td><span style="color:red;font-weight: bold;">{{repayBacked.repayDate}}</span></td>
          <th>本次回款金额：</th>
          <td><span class="important_text"> {{repayBacked.repayAmt}} </span> 元</td>
        </tr>
        <tr>
          <th>操作意见：</th>
          <td colspan="5">{{loanRecord.memo}}</td>
        </tr>

        <tr>
          <th>客户资料：</th>
          <td colspan="5">
            <template v-for="userAttach in userAttachs">
              <a :href="userAttach.attachPath" target="_blank">
                <img :src="userAttach.attachPath" width="150px" height="200px"/>
              </a>
            </template>
          </td>
        </tr>
        <tr>
          <th>借款资料：</th>
          <td colspan="5">
            <template v-for="loanAttach in loanAttachs">
              <a :href="loanAttach.attachPath" target="_blank">
                <img :src="loanAttach.attachPath" width="150px" height="200px"/>
              </a>
            </template>
          </td>
        </tr>
      </table>
    </div>

    <h2>
      操作意见
    </h2>
    <el-input type="textarea" v-model="memo"></el-input>

    <div slot="footer">
      <el-button @click="handleClose">取 消</el-button>
      <el-button type="primary" @click="rejectClick">驳回</el-button>
      <el-button type="primary" @click="submitClick">回款确认</el-button>
    </div>
  </el-dialog>
</template>

<script type="text/ecmascript-6">


  import * as moment from "moment";

  export default {
    name: 'LoanInfoDisposeDialog',
    props: {
      dialogVisible: {
        type: Boolean
      },
      loanRecord: {
        type: Object
      }
    },
    data() {
      return {
        memo: '',
        repayBacked: {
          accountName: '',
          accountCard: '',
          repayDate: '',
          repayTime: '',
        },
        visible: this.$props.dialogVisible,
        value: {},
        userAttachs: [],
        loanAttachs: []
      }
    },
    mounted: function () {

      for (var i in  this.loanRecord.userAttachList) {
        this.userAttachs[this.userAttachs.length] = {attachPath: this.loanRecord.userAttachList[i].attachPath}
      }

      for (var i in  this.loanRecord.loanAttachList) {
        this.loanAttachs[this.loanAttachs.length] = {attachPath: this.loanRecord.loanAttachList[i].attachPath}
      }

      for (var i in this.loanRecord.raiseAttachList
        ) {
        this.loanAttachs[this.loanAttachs.length] = {attachPath: this.loanRecord.raiseAttachList[i].attachPath}
      }

      for (var i in  this.loanRecord.backAttachList) {
        this.loanAttachs[this.loanAttachs.length] = {attachPath: this.loanRecord.backAttachList[i].attachPath}
      }


    },
    methods: {
      rejectClick() {
        this.$$post('/loanRecord/back', this.buildPostParam()).then(res => {
          if (res.data.code < 1) {
            this.$message.error(res.data.msg);
            return
          }
          this.$message({message: '回退成功', type: 'success'});
          this.handleClose();
          window.location.reload();
        })
      }
      ,
      submitClick() {
        this.$$post('/loanRecord/confirm', this.buildPostParam()).then(res => {
          if (res.data.code < 1) {
            this.$message.error(res.data.msg);
            return
          }
          this.$message({message: '操作成功', type: 'success'});
          this.handleClose();
          window.location.reload();
        })
      }
      ,
      buildPostParam() {
        return {
          loanNo: this.loanRecord.loanNo,
          memo: this.memo
        }
      }
      ,
      /** 关闭处理 */
      handleClose() {
        this.visible = false;
        setTimeout(() => {
          this.$emit('update:dialogVisible', false)
        }, 100);
      }
      ,
      dateFormatText: function (param) {
        return moment(param).format("YYYY-MM-DD");
      }
    }
  }
</script>
<style lang="stylus" rel="stylesheet/stylus">

  .common-dialog {
    .input {
      width 80%
      margin auto
    }
  }

</style>
