<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" >
          <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`,{
        clientNo: this.clientNo,
        bizType: this.bizType
      }).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() {
        var return_hash = {
          loanNo: this.ruleForm.loanNo,
          bizType: this.ruleForm.bizType,
          creator: localStorage.getItem("userName"),
          bankAccount: this.ruleForm.bankAccount,
          backAmt: this.ruleForm.remainAmt,
          rePayType: 'BYONE',
        };
        return return_hash;
      },

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

<style scoped>

</style>
