<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.periodNo }}期</div>
        </el-col>
        <el-col :span="8">
          <div class="grid-content bg-purple">计划还款金额：{{ this.ruleForm.planAmt }}</div>
        </el-col>
      </el-row>
      <br/>
    </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.remainAmt" 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="protocolOne('ruleForm')">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  name: "ProtocolSettledOne",
  props: {
    dialogVisible: {
      type: Boolean,
      required: true
    },
    loanNo: {
      type: String
    },
    bizType: {
      type: String
    },
    clientNo: {
      type: String
    },
    periodNo: {
      type: Number
    },
    remainAmt: {
      type: Number
    },
    planAmt: {
      type: Number
    },
  },

  data() {
    return {
      ui: {
        submitLoading: false
      },
      visible: this.$props.dialogVisible,

      ruleForm: {
        periodNo: '',
        orderNo: '',
        loanNo: '',
        creator: '',
        remainAmt: '',
        planFu: '',
        planAmt: '',
        planBen: '',
        planXi: '',
        attach: '',
        planNo: '',
        bankAccount: '',
        bankOwner: '',
        backedAmt: '',
        memo: '',
      },
      rules: {
        bankAccount: [{required: true, message: '支付银行卡不能为空', trigger: 'blur'}],
        backAmt: [{required: true, message: "扣款金额不能为空", trigger: 'blur'}],
      },
      loginName: '',
      cardList: [],
    }
  },

  created() {

    this.ruleForm = {
      loanNo: this.loanNo,
      bizType: this.bizType,
      clientNo: this.clientNo,
      periodNo: this.periodNo,
      remainAmt: this.remainAmt,
      planAmt: this.planAmt,
    };

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

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

  methods: {
    /** 提交点击 */
    protocolOne() {
      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.ruleForm.bizType,
        creator: localStorage.getItem("userName"),
        bankAccount: this.ruleForm.bankAccount,
        backAmt: this.ruleForm.remainAmt,
        rePayType: 'BYONE',
        periodNo: this.ruleForm.periodNo,
      };
    },

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

<style lang="stylus" rel="stylesheet/stylus">
.select-bank-card {
  width: 50%
}

</style>
