<template>
  <el-dialog class="contact-dialog"
             title="贷款计算器" :visible.sync="dialogVisible" width="60%" :before-close="handleClose">


    <div class="input">
      <table>
        <tr>
          <th>客户名称：</th>
          <td>{{client.clientName}}</td>
          <th>客户证件号：</th>
          <td>{{client.certNo}}</td>
        </tr>
        <tr>
          <th>利率：</th>
          <td>{{client.rate*100}}%</td>
        </tr>
        <tr>
          <th>借款金额：</th>
          <td colspan="5">
            <el-input placeholder="借款金额" v-model="loanAmt" style="width: 20%" @change="calculatAmount"/>
            <el-input placeholder="到账金额" v-model="backAmt" style="width: 20%"/>
            <el-input placeholder="利息" v-model="rateAmt" style="width: 20%"/>
            <el-input placeholder="服务费" v-model="serviceAmt" style="width: 20%"/>
          </td>
        </tr>
        <tr>
          <th>起息日期：</th>
          <td>
            <el-date-picker type="date" placeholder="起息日期" v-model="startDate"
                            @change="dateChange"/>
          </td>
          <th>期限：</th>
          <td>
            <el-select v-model="loanLife" placeholder="借款期限" style="width: 80%" @change="dateChange">
              <el-option v-for="item in loanLifeOpts" :key="item.value" :label="item.name"
                         :value="item.value"></el-option>
            </el-select>
            天
          </td>
        </tr>
        <tr>
          <th>业务组</th>
          <td>
            <el-select v-model="bizGroup" placeholder="请选择" style="width: 100%" @change="bizGroupsChange">
              <el-option v-for="item in bizGroups" :key="item.value" :label="item.label"
                         :value="item.value"></el-option>
            </el-select>
          </td>
        </tr>
        <tr>
          <td colspan="5">
            <br>
            <span id="loanText">

                借           条   <br>
                 
                今日由于个人财务紧张从{{lendCard}}处借到{{backAmt}}元，借款期限{{loanLife}}天，利息{{rateAmt}}元，服务费{{serviceAmt}}元，到期应还款合计{{loanAmt}}元，人民币（大写）_{{bigAmt}}。  <br>
                  <br>
                如到期当日未还款，将按日收取逾期客户管理费。  <br>
                  <br>
                借款日期： {{startDateText}} <br>
                还款日期： {{endDateText}} <br>
                  <br>
                借款人： <br>
                身份证：{{client.certNo}} <br>
                日期：{{nowDateText}} <br>
            </span>
          </td>
        </tr>
      </table>
    </div>
    <div slot="footer">
      <el-button @click="handleClose">关 闭</el-button>
      <el-button type="primary" @click="calculatAmount">计 算</el-button>
    </div>
  </el-dialog>
</template>

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


  export default {
    name: 'CalculateDialog',
    props: {
      dialogVisible: {
        type: Boolean
      },
      client: {
        type: Object,
        required: true
      }
    },
    data() {
      return {
        startDate: new Date(),
        endDate: '',
        nowDateText: moment(new Date(), 'YYYY-MM-DD').format('YYYY年MM月DD日'),
        startDateText: '',
        endDateText: '',
        lendCard: '',
        bigAmt: '',
        loanAmt: '',
        backAmt: '',
        rateAmt: '',
        bizGroup: '',
        bizGroups: [{value: '', lable: '', dataName: '', dataId: ''}],
        serviceAmt: '',
        loanText: '',
        loanLife: '15',
        loanLifeOpts: [{value: 28, name: 28},{value: 23, name: 23},{value: 20, name: 20},{value: 18, name: 18},{value: 15, name: 15}, {value: 10, name: 10}, {value: 7, name: 7}],
        visible: this.$props.dialogVisible,
      }
    },
    created: function () {
      //初始化业务组
      this.$$get(`/card/lendList`)
        .then(res => {
          if (res.data.code < 1)
            throw res.data.msg;
          var array = []
          res.data.data.forEach((item, index) => {
            array[index] = {value: item.relationNo, lable: item.relationNo, dataName: item.ownerName, dataId: item.id}
          })
          this.bizGroups = array;
        })
        .catch(err => this.$$msg.err(err))

      this.dateChange();
    },
    methods: {
      calculatAmount() {
        this.$$get(`/loanRecord/getAmtInfo/` + this.client.clientNo + `/` + this.loanAmt + `/` + this.loanLife)
          .then(res => {
            if (res.data.code < 1)
              throw res.data.msg;
            this.loanAmt = res.data.data.loanAmt;
            this.backAmt = res.data.data.backAmt;
            this.rateAmt = res.data.data.rateAmt;
            this.serviceAmt = res.data.data.serviceAmt;

            this.bigAmt = this.digitUppercase(this.loanAmt)


          })
          .catch(err => this.$$msg.err(err))
      },

      dateChange() {
        var date = this.startDate;
        var endDate = moment(date, 'YYYY-MM-DD').add(this.loanLife - 1, 'days').format('YYYY-MM-DD');
        this.endDate = endDate;

        this.startDateText = moment(date, 'YYYY-MM-DD').format('YYYY年MM月DD日');
        this.endDateText = moment(endDate, 'YYYY-MM-DD').format('YYYY年MM月DD日');

      },

      bizGroupsChange() {
        var bizGroup = ''
        this.bizGroups.forEach((item, index) => {
          if (item.lable === this.bizGroup) {
            this.lendCard = item.dataName
            this.lendCardId = item.dataId
            bizGroup = item.dataId
          }
        })

      },


      /** 关闭处理 */
      handleClose() {
        this.visible = false;
        setTimeout(() => {
          this.$emit('update:dialogVisible', false)
        }, 100);
        // window.location.reload();
      },

      digitUppercase(n) {
        var fraction = ['角', '分'];
        var digit = [
          '零', '壹', '贰', '叁', '肆',
          '伍', '陆', '柒', '捌', '玖'
        ];
        var unit = [
          ['圆', '万', '亿'],
          ['', '拾', '佰', '仟']
        ];
        var head = n < 0 ? '欠' : '';
        n = Math.abs(n);
        var s = '';
        for (var i = 0; i < fraction.length; i++) {
          s += (digit[Math.floor(n * 10 * Math.pow(10, i)) % 10] + fraction[i]).replace(/零./, '');
        }
        s = s || '整';
        n = Math.floor(n);
        for (var i = 0; i < unit[0].length && n > 0; i++) {
          var p = '';
          for (var j = 0; j < unit[1].length && n > 0; j++) {
            p = digit[n % 10] + unit[1][j] + p;
            n = Math.floor(n / 10);
          }
          s = p.replace(/(零.)*零$/, '').replace(/^$/, '零') + unit[0][i] + s;
        }
        return head + s.replace(/(零.)*零圆/, '圆')
          .replace(/(零.)+/g, '零')
          .replace(/^整$/, '零圆整');
      }

    }
  }
</script>
<style lang="stylus" rel="stylesheet/stylus">

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

</style>
