<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>{{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>
            <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 colspan="3">
            <div style="display: inline-block">
              <el-date-picker type="date" placeholder="借款日期" v-model="startDate" style="width: 30%" :disabled="true"
                              @change="dateChange"/>
              <el-input placeholder="还款日期" :disabled="true" v-model="endDate" style="width: 30%"/>
              <el-input :disabled="true" v-model="loanLife" style="width: 30%"/>
            </div>
          </td>
        </tr>
        <tr>
          <th>客户资料：</th>
          <td colspan="5">
            <template v-for="userAttach in userAttachs">
              <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>

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


    <div slot="footer">
      <el-button @click="handleClose">取 消</el-button>
      <el-button v-if="$permissionUtils.btnPermission('refuseLoan')" type="primary" @click="rejectClick">驳回</el-button>
      <el-button v-if="$permissionUtils.btnPermission('passLoan')" type="primary" @click="submitClick">提交财务</el-button>
    </div>
  </el-dialog>
</template>

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

  import * as moment from "moment";

  export default {
    name: 'LoanCheckDialog',
    props: {
      dialogVisible: {
        type: Boolean
      },
      loanRecord: {
        type: Object
      }
    },
    data() {
      return {
        shortAccountName: '',
        shortBank: '',
        shortAccountNo: '',
        loanRaiseUrl: '',
        userAttachs: [],
        loanAttachs: [],
        raiseCardName: '',
        raiseCard: '',
        raiseCards: [],
        startDate: this.loanRecord.startDate,
        endDate: moment(this.loanRecord.endDate, 'YYYY-MM-DD').format('YYYY-MM-DD'),
        loanLife: this.loanRecord.loanLife,
        visible: this.$props.dialogVisible,
        formRules: {
          contactName: [{required: true, message: '请输入联系人姓名', trigger: 'blur'}],
          cell: [{required: true, message: '请输入联系号码', trigger: 'blur'}]
        },
        value: {},
        loanRaiseImgs: [],
        memo: ""
      }
    },

    created() {

      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}
      }

      //初始化 放款银行卡
      this.$$get(`/card/raiseList`)
        .then(res => {
          if (res.data.code < 1)
            throw res.data.msg;
          var array = []
          res.data.data.forEach((item, index) => {
            var value = item.ownerName + '_' + item.bankAccount
            array[index] = {value: value, lable: item.bankAccount,}
            if (item.useFlag == 'YES') {
              this.raiseCardName = value
              this.raiseCard = item.bankAccount
            }
          })
          this.raiseCards = array;
        })
        .catch(err => this.$$msg.err(err))
    },
    methods: {
      querySearchAsync(queryString, cb) {
        var raiseCards = this.raiseCards;
        var results = queryString ? raiseCards.filter(this.createStateFilter(queryString)) : raiseCards;
        cb(results);
      },
      createStateFilter(queryString) {
        return (state) => {
          return (state.value.toLowerCase().search(queryString.toLowerCase()) > 0);
        };
      },
      handleSelect(item) {
        this.raiseCard = item.lable;
      },

      submitClick() {
        this.$$post('/loanRecord/pass', 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()
        })

      },
      rejectClick() {
        this.$$post('/loanRecord/refuse', 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()
        })
      },
      /** 关闭处理 */
      handleClose() {
        this.visible = false;
        setTimeout(() => {
          this.$emit('update:dialogVisible', false)
        }, 100);
      },
      dateChange() {
        var date = this.startDate;
        var endDate = moment(date, 'YYYY-MM-DD').add(this.loanLife - 1, 'days').format('YYYY-MM-DD');
        this.endDate = endDate;
      },
      buildPostParam() {
        return {
          loanNo: this.loanRecord.loanNo,
          clientNo: this.clientNo,
          startDate: moment(this.startDate, 'YYYY-MM-DD').format('YYYY-MM-DD'),
          endDate: this.endDate,
          loanLife: this.loanLife,
          memo: this.memo,
          raiseAttachList: this.loanRaiseImgs,
          raiseCard: this.raiseCard
        }
      }
    }
  }
</script>
<style lang="stylus" rel="stylesheet/stylus">

  .client-contact-dialog {
    .input {
      width 60%
      margin auto
    }
  }

</style>