<template>
  <el-dialog
      :append-to-body="true"
      class="client-data-dialog"
      title="创建当期代扣"
      width="40%"
      :visible.sync="visible"
      :before-close="handleClose">


    <el-form
        :model="ruleForm"
        label-suffix=":" size="small"
        :rules="rules" ref="ruleForm"
        label-width="140px"
        class="demo-ruleForm">
      <el-form-item label="期数">
        <span>第{{ ruleForm.periodNo }}期</span>
      </el-form-item>
      <el-form-item label="计划还款金额">
        <span>{{ ruleForm.planAmt }}</span>
      </el-form-item>

      <el-form-item label="扣款金额" prop="backedAmt">
        <el-input v-if="ruleForm.isCustomAmount" v-model="ruleForm.remainAmt"  placeholder="请输入转账金额" ></el-input>
        <el-input v-else v-model="ruleForm.remainAmt" placeholder="请输入转账金额" disabled></el-input>
      </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"
              @click.native="changeCard(item)"
              :label="item.label"
              :value="item.value"
              ></el-option>
        </el-select>
      </el-form-item>
       <el-form-item label="选择支付渠道" prop="paymentChannel">
        <el-select clearable v-model="ruleForm.paymentChannel" class="select-bank-card">
          <el-option
              v-for="item in this.channelList"
              :key="item.payChannelApi"
              :label="item.message"
              :value="item.payChannelApi"></el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <div slot="footer">
      <el-button size="small" @click="handleClose">取 消</el-button>
      <el-button size="small" 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
    },
    loanSign:{
      type:String
    },
    isCustomAmount:{
     type: Boolean,
    }
  },

  data() {
    return {
      ui: {
        submitLoading: false
      },
      visible: this.$props.dialogVisible,
      ruleForm: {
        periodNo: '',
        orderNo: '',
        loanNo: '',
        creator: '',
        remainAmt: '',
        planFu: '',
        planAmt: '',
        planBen: '',
        planXi: '',
        attach: '',
        planNo: '',
        bankAccount: '',
        paymentChannel:'',
        bankOwner: '',
        backedAmt: '',
        memo: '',
        loanSign:"",
        isCustomAmount:null
      },
      rules: {
        bankAccount: [{required: true, message: '支付银行卡不能为空', trigger: 'blur'}],
        paymentChannel: [{required: true, message: '支付渠道不能为空', trigger: 'blur'}],
        backAmt: [{required: true, message: "扣款金额不能为空", trigger: 'blur'}],
      },
      loginName: '',
      cardList: [],
        channelList:[]
    }
  },

  created() {
      console.log(this.$props,'9090909090');
    this.ruleForm = {
      loanNo: this.loanNo,
      bizType: this.bizType,
      clientNo: this.clientNo,
      periodNo: this.periodNo,
      remainAmt: this.remainAmt,
      planAmt: this.planAmt,
      loanSign:this.loanSign,
      isCustomAmount:this.isCustomAmount,
    };
    // console.log(this.$props,'hhhhhhhhhhh');
    //获取银行卡列表
    this.$$post(`/back/bankCardList`, {
      ...this.ruleForm
    }).then(res => {
      console.log(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) {
          this.$$post(`/back/createBackedSettle`, this.buildParam()).then(res => {
            if (res.data.code != 200) {
              this.$message.error(res.data.message);
              return
            }
            this.handleClose();
            this.$message({message: '操作成功', type: 'success'});
            this.$emit('callback')
          }).catch(err => {
            alert("error!")
          })
        }
      })
    },
    //银行卡对应的支付渠道
    changeCard(val){
      console.log(val.payChannelApiVOS,'12131232132');
      this.channelList=val.payChannelApiVOS;
      if(val.payChannelApiVOS.length==0){
        this.ruleForm.paymentChannel="";
      }
    },

    //参数
    buildParam() {
      return {
        loanNo: this.ruleForm.loanNo,
        bizType: this.ruleForm.bizType,
        creator: localStorage.getItem("userName"),
        bankAccount: this.ruleForm.bankAccount,
        backAmt: this.ruleForm.remainAmt,
        periodNo:this.ruleForm.periodNo,
        rePayType: 'BYONE',
        restingOrderEnum:'NO',
        payChannelApi:this.ruleForm.paymentChannel
      };
    },

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

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

</style>
