<template>
  <el-dialog class="client-data-dialog" title="创建代扣提前结清" width="40%" :visible.sync="visible"
             :before-close="handleClose">
    <div style="margin-left:50px">
      <el-row :gutter="20">
        <el-col :span="8">
          <div class="grid-content bg-purple">本金：{{ this.ruleForm.principleAmt }}</div>
        </el-col>
        <el-col :span="8">
          <div class="grid-content bg-purple">起息日：{{ this.ruleForm.startDate  | dateFilter }}</div>
        </el-col>
      </el-row>
      <br/>
      <el-row :gutter="20" :center="true">
        <el-col :span="8">
          <div class="grid-content bg-purple">占用天数：{{ this.ruleForm.userDay }}</div>
        </el-col>
        <el-col :span="8">
          <div class="grid-content bg-purple">占用期数：{{ this.ruleForm.userMonth }}</div>
        </el-col>

      </el-row>
      <br/>

      <el-row :gutter="20">
        <el-col :span="8">
          <div class="grid-content bg-purple">还款本金：{{ this.ruleForm.principleAmt }}</div>
        </el-col>
        <el-col :span="8">
          <div class="grid-content bg-purple">利息：{{ this.ruleForm.interestAmt }}</div>
        </el-col>
        <el-col :span="8">
          <div class="grid-content bg-purple">服务费：{{ this.ruleForm.serviceAmt }}</div>
        </el-col>
        <el-col :span="8">
          <div class="grid-content bg-purple">违约金：{{ this.ruleForm.breakAmt }}</div>
        </el-col>
        <el-col :span="8">
          <div class="grid-content bg-purple">退款金额：{{ this.ruleForm.refundAmt }}</div>
        </el-col>
        <el-col :span="8">
          <div class="grid-content bg-purple">罚息：{{ this.ruleForm.overdueAmt }}</div>
        </el-col>
      </el-row>
      <br/>
      <el-row :gutter="20">
        <el-col :span="16">
          <div class="grid-content bg-purple">总应还金额：{{ this.ruleForm.settleAmt }}</div>
        </el-col>
      </el-row>
    </div>
    <br/>

    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="140px" class="demo-ruleForm">
      <el-form-item label="扣款金额" prop="backedAmt">
        <el-col :span="20">
          <el-input v-model="ruleForm.settleAmt" placeholder="扣款金额" disabled></el-input>
        </el-col>
      </el-form-item>
      <el-form-item label="选择银行卡" prop="bankAccount">
        <el-select clearable v-model="ruleForm.bankAccount" class="select-bank-card">
          <el-option v-for="item in this.cardList" :key="item.value"
                     :label="item.label" :value="item.value"></el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <div slot="footer">
      <el-button @click="handleClose">取 消</el-button>
      <el-button type="primary" @click="backedProtocol('ruleForm')">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import * as moment from "moment";

export default {
  name: "ProtocolSettled",
  props: {
    dialogVisible: {
      type: Boolean,
      required: true
    },
    loanNo: {
      type: String
    },
    bizType: {
      type: String
    },
    clientNo: {
      type: String
    },
  },

  data() {
    return {
      ui: {
        submitLoading: false
      },
      visible: this.$props.dialogVisible,
      cardList: [],
      ruleForm: {
        refundAmt: null,
        allAmt: '',
        bizType: '',
        backedAmt: '',
        loanNo: '',
        breakAmt: '',
        clientNo: '',
        derateAmt: '',
        interestAmt: '',
        loanAmt: '',
        overdueAmt: '',
        principleAmt: '',
        serviceAmt: '',
        settleAmt: '',
        startDate: '',
        userDay: '',
        userMonth: '',
        memo: '',
        attach: '',
        bankAccount: '',
        bankOwner: '',
      },
      bizTypeStr: '',
      rules: {
        backedAmt: [
          {required: true, message: "扣款金额不能为空", trigger: 'blur'}
        ],
        bankAccount: [
          {required: true, message: '支付银行卡不能为空', trigger: 'blur'}
        ],
      },
      loginName: '',
    }
  },

  filters: {

    dateFilter: function (row) {
      var date = row
      if (typeof (date) == undefined || typeof (date) == null) {
        return ''
      }
      return moment(date).format("YYYY-MM-DD")
    },

  },

  created() {
    this.ruleForm = {
      loanNo: this.loanNo,
      bizType: this.bizType,
      clientNo: this.clientNo,
    };
    this.bizTypeStr = this.bizType;

    // 查询当前的基础数据
    this.$$get('/back/countSettle?loanNo=' + this.loanNo).then(res => {
      if (res.data.code != 200) {
        this.$message.error(res.data.message);
        this.handleClose();
      } else {
        this.ruleForm = res.data.result;
      }

    }).catch(error => {
      this.$message.error(error || '网络异常，请稍后。。。');
    });

    //获取银行卡列表
    this.$$post(`/back/bankCardList`, {
      clientNo: this.clientNo,
      bizType: this.bizType,
      loanNo: this.loanNo
    }).then(res => {
      this.cardList = res.data.result;
    }).catch(error => {
      this.$message.error(error || '网络异常，请稍后。。。');
    });
  },

  mounted() {
    this.loginName = localStorage.getItem("loginName");
  },

  methods: {
    /** 提交点击 */
    backedProtocol() {
      this.$refs['ruleForm'].validate((valid) => {
        if (!valid) {
          return false
        }
        this.$$post(`/back/createBackedSettle`, this.buildParam()).then(res => {
          if (res.data.code != 200) {
            this.$message.error(res.data.message);
            return
          }
          this.$message({message: '操作成功', type: 'success'});
          this.handleClose();
          setTimeout(() => {
            window.location.reload();
          }, 1000);
        }).catch(err => {
          alert("error!")
        })

      })
    },

    //参数
    buildParam() {
      return {
        loanNo: this.ruleForm.loanNo,
        bizType: this.bizTypeStr,
        backAmt: this.ruleForm.settleAmt,
        creator: localStorage.getItem("userName"),
        bankAccount: this.ruleForm.bankAccount,
        rePayType: 'BYALL',
      };
    },

    /** 关闭处理 */
    handleClose() {
      this.visible = false;
      setTimeout(() => {
        this.$emit('update:dialogVisible', false)
      }, 300);
    },
  }
}
</script>

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

.select-bank-card {
  width 50%
}

</style>
