<template>
  <el-dialog
    :append-to-body="true"
    class="client-data-dialog"
    title="分笔结清扣款"
    width="40%"
    :visible.sync="visible"
    :before-close="handleClose"
  >
    <div>
      <div style="margin-left: 50px">
        <el-row :gutter="20">
          <el-col :span="8">
            <div class="grid-content bg-purple">
              本金：{{ this.ruleForm.raiseAmt }}
            </div>
          </el-col>
          <el-col :span="8">
            <div class="grid-content bg-purple">
              起息日：{{ this.ruleForm.startDate | dateFilter }}
            </div>
          </el-col>
          <!-- <el-col :span="6">
              <div class="grid-content bg-purple">还款日：{{ this.ruleForm.planAmt }}</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-row>
        <br />
        <el-row :gutter="20">
          <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-col :span="8">
            <div class="grid-content bg-purple">
              融担金额：{{ this.ruleForm.burdenAmt }}
            </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="bankAccount">
          <el-select
            clearable
            v-model="ruleForm.bankAccount"
            class="select-bank-card"
            @clear="clearVal"
          >
            <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-item label="自定义扣款金额" prop="selfMoney">
          <el-col :span="12">
            <el-input
              v-model="selfMoney"
              placeholder="请输入自定义金额"
              clearable
            ></el-input>
          </el-col>
        </el-form-item>
      </el-form>
    </div>
    <div slot="footer" align="center">
      <el-button @click="handleClose">取 消</el-button>
      <el-button type="primary" @click="backedTransfer('ruleForm')"
        >确 定</el-button
      >
    </div>
  </el-dialog>
</template>

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

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

  data() {
    return {
      cardList: [],
      visible: this.$props.dialogVisible,
      ruleForm: {
        allAmt: "",
        backedAmt: "",
        loanNo: "",
        bizType: "",
        breakAmt: "",
        orderNO: "",
        clientNo: "",
        loanSign:'',
        derateAmt: "",
        interestAmt: "",
        loanAmt: "",
        overdueAmt: "",
        principleAmt: "",
        serviceAmt: "",
        settleAmt: "",
        startDate: "",
        userDay: "",
        userMonth: "",
        memo: "",
        attach: "",
        bankAccount: "",
        bankOwner: "",
        backAmt: "",
        raiseAmt:'',
        //自定义金额
        paymentChannel:'',
      },
      selfMoney: "",
      rules: {
        bankAccount: [
          {
            required: true,
            message: "请选择银行卡",
            trigger: "change",
          },
        ],
        paymentChannel: [{required: true, message: '支付渠道不能为空', trigger: 'blur'}],
        // selfMoney: [
        //   {
        //     required: true,
        //     message: "请输入扣款金额",
        //     trigger: "blur",
        //   },
        // ],
      },
      loginName: "",
      backedNo: "",
      channelList:[]
    };
  },

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

  created() {
    this.getMoney();
    // this.selfMoney=localStorage.getItem('selfMoney');
    // console.log(this.selfMoney,'1');
    // localStorage.removeItem('selfMoney');
    // console.log(this.selfMoney,'2');
    this.getData();
    this.getBankList();
    this.ruleForm = {
      loanNo: this.loanNo,
      bizType: this.bizType,
      clientNo: this.clientNo,
      selfMoney:this.selfMoney,
      loanSign:this.loanSign
    };
    this.bizTypeStr = this.bizType;
  },
  mounted() {
    this.loginName = localStorage.getItem("loginName");
  },

  methods: {
     clearVal(){
       this.ruleForm.paymentChannel="";
    },
    getData() {
      // 查询当前的基础数据
      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 || "网络异常，请稍后。。。");
        });
    },
      getMoney() {
      //获取挂账金额
      this.$$get(
        `/back/getRestingOrderAmt?loanNo=` + this.loanNo
      ).then((res) => {
        if (res.data.code != 200) {
          this.$message.error(res.data.message);
          this.handleClose();
        } else {
         this.selfMoney=res.data.result;
        }
      });
    },
    getBankList() {
      //获取银行卡列表
      this.$$post(`/back/bankCardList`, {
        clientNo: this.clientNo,
        bizType: this.bizType,
        loanNo: this.loanNo,
        loanSign:this.loanSign
      })
        .then((res) => {
          this.cardList = res.data.result;
        })
        .catch((error) => {
          this.$message.error(error || "网络异常，请稍后。。。");
        });
    },
    /** 提交点击 */
    backedTransfer() {
      // if (this.ruleForm.backAmt > this.selfMoney) {
      //   this.$message.error(
      //     "操作失败扣款金额已超出剩余应还款金额，请重新确认！"
      //   );
      //   this.selfMoney = "";
      //   return false;
      // }
      if(this.selfMoney==''){
        this.$message.error('请输入扣款金额');
        return false;
      }
    this.ruleForm.backAmt=this.selfMoney;
      this.$confirm("是否确认分笔扣款?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "primary",
      })
        .then(() => {
          this.$$post(`/back/createBackedSettle`, this.buildParam())
            .then((res) => {
              //   console.log(res, "确定按钮");
              if (res.data.code != 200) {
                this.$message.error(res.data.message);
                return;
              }
              this.$message({ message: "操作成功", type: "success" });
              this.handleClose();
              this.$emit("callback");
            })
            .catch((err) => {
              alert("error!");
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消",
          });
        });
    },
     //银行卡对应的支付渠道
    changeCard(val){
      console.log(this.channelList,'1');
      this.channelList=val.payChannelApiVOS;
       console.log(val.payChannelApiVOS,'12');
      if(val.payChannelApiVOS.length==0){
        this.ruleForm.paymentChannel="";
        
      }
     
    },
    //参数
    buildParam() {
      return {
        loanNo: this.ruleForm.loanNo,
        bizType: this.bizTypeStr,
        backAmt: this.selfMoney,
        creator: this.loginName,
        bankAccount: this.ruleForm.bankAccount,
        periodNo: this.ruleForm.userMonth,
        burdenAmt: this.ruleForm.burdenAmt,
        rePayType: "BYSTEP",
        restingOrderEnum: "YES",
        payChannelApi:this.ruleForm.paymentChannel
      };
    },
    /** 关闭处理 */
    handleClose() {
      this.visible = false;
      setTimeout(() => {
        this.$emit("update:dialogVisible", false);
      }, 300);
    },
  },
};
</script>

<style scoped>
</style>
