<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><span v-if="loanRecord.lendCardBean !=null">
          {{loanRecord.lendCardBean.ownerName}}
          </span></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>
            <span v-if="loanRecord.cardBean !=null">
              {{loanRecord.cardBean.openBankName}}
            </span>
          </td>
          <th>银行卡号：</th>
          <td>
          <span v-if="loanRecord.cardBean !=null">
          {{loanRecord.cardBean.bankAccount}}
          </span>
          </td>
        </tr>
        <tr>
          <th>开户行：</th>
          <td colspan="3">
           <span v-if="loanRecord.cardBean !=null">
            {{loanRecord.cardBean.openSubBankName}}
           </span>
          </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>{{loanRecord.loanExtBean.dutyDesc}}</td>
          <th>业务组：</th>
          <td><span style="color:red;font-weight: bold;">{{loanRecord.bizGroup}}</span></td>
        </tr>
        <tr>
          <th>还款账户：</th>
          <td><span v-if="loanRecord.lendCardBean !=null">
          {{loanRecord.lendCardBean.ownerName}}
          </span></td>
          <th>还款银行卡：</th>
          <td>
          </td>
        </tr>
        <tr>
          <th>客户资料：</th>
          <td colspan="5">
            <template v-for="userAttach in userAttachs" id="xx">
              <a :href="userAttach.attachUrl" target="_blank">
                <img :src="userAttach.attachUrl" width="150px" height="200px"/>
              </a>
            </template>
          </td>
        </tr>
        <tr>
          <th>借款资料：</th>
          <td colspan="5">
            <template v-for="loanAttach in loanAttachs">
              <a :href="loanAttach.attachUrl" target="_blank">
                <img :src="loanAttach.attachUrl" width="150px" height="200px"/>
              </a>
            </template>
          </td>
        </tr>
      </table>
    </div>

    <div slot="footer">
      <el-button type="primary" @click="handleClose">关 闭</el-button>
    </div>
  </el-dialog>
</template>

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

  import * as moment from "moment";

  export default {
    name: "LoanInfoShowDialog",
    props: {
      dialogVisible: {
        type: Boolean
      },
      loanRecord: {
        type: Object
      }
    },
    data() {
      return {
        userAttachs: [],
        loanAttachs: [],
      }
    },
    created: function () {

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

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


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


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

    },
    methods: {
      /** 关闭处理 */
      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
    }
  }

  .content-text {
    width: 95%;
    margin: auto;
  }

  .content-text h2 {
    margin: 10px 0 0.8em;
    padding-bottom: 0.7em;
    border-bottom: 1px solid #ddd;
    color: #47484b;
  }

  .content-table label {
    font-size: 20px;
    color: #64656f;
  }

  .content-table table {
    width: 95%;
    border-spacing: 0px 15px;
  }

  .content-table table th {
    color: #64656f;
    text-align: right;
    font-size: 18px;
  }

  .content-table table td {
    color: #64656f;
    text-align: left;
    font-size: 18px;
  }

</style>
