<template>
  <!--  随意分-->
  <div class="content">
    <div style="width: 100%">
      <van-form label-width="25%" @submit="onSubmit">
        <mobile-input
          :formatter="formatter"
          size="100"
          format-trigger="reset"
          v-model="loanMoney"
          :required="true"
          :rules="[{ validator: validatorFloatNum, message: '输入有误,请输入' }]"
          type="number"
          label="贷款金额(元)"
          placeholder="请输入贷款金额"
        />
        <d-select
          label="还款方式"
          :rules="[{ required: true, message: '还款方式不能为空' }]"
          placeholder="请选择"
          :required="true"
          border="true"
          @input="selectSYFRate"
          v-model="Repayment"
          sfield="Repayment"
          size="small"
        ></d-select>
        <d-select
          label="手续费收取方式"
          :rules="[{ required: true, message: '手续费收取方式不能为空' }]"
          placeholder="请选择"
          :required="true"
          border="true"
          v-model="brokerage"
          sfield="brokerage"
          size="small"
        ></d-select>
        <mobile-input
          :formatter="formatter"
          format-trigger="reset"
          readonly
          v-model="yearRate"
          :rules="[{ validator: validatorRules, message: '输入有误,请输入' }]"
          :label="label1"
        />
        <mobile-input
          :formatter="formatter"
          format-trigger="reset"
          readonly
          v-model="AllRate"
          :rules="[{ validator: validatorRules, message: '输入有误,请输入' }]"
          :label="label2"
        />
        <mobile-input
          :formatter="formatter"
          format-trigger="reset"
          v-model="yearRate_yh"
          :required="true"
          label="优惠折扣"
          placeholder="请输入"
          :rules="[{ validator: validatorRules, message: rateMsg }]"
        />
        <d-select
          v-if="Repayment == '1'"
          name="NUM"
          label="期数(月)"
          placeholder="请选择期数"
          :rules="[{ required: true, message: '期数不能为空' }]"
          border="true"
          sfield="NUM"
          :required="true"
          v-model="NUMS" />
        <mobile-input
          v-if="Repayment == '2'"
          :formatter="formatter"
          format-trigger="reset"
          v-model="NUMS2"
          :required="true"
          type="digit"
          :rules="[{ validator: validatorNumber, message: '期数必须小于等于730' }]"
          label="期数(天)"
        />

        <div style="margin: 16px; display: flex; justify-content: space-around">
          <van-button
            @click="reset"
            style="width: 40%"
            round
            color="#999999"
            native-type="button"
            plain
          >重置
          </van-button
          >
          <van-button style="width: 40%" round type="info" native-type="submit"
          >提交
          </van-button
          >
        </div>
      </van-form>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Watch } from "vue-property-decorator";
import nettyApi from "@/constants/api/ms-netty/netty.api.ts";
import IF from "@/public/factory/InterFaceFactory";
import { NativeUI } from "@/public/ts/NativeUI";
import systemApi from "@/constants/api/ms-system/system.api.ts";

/**
 *@description: 随意分还款试算
 *@author: wanghang
 *@date: 2022-02-16
 */

@Component({
  name: "RepaymentTrial"
})
export default class RepaymentTrial extends Vue {
  title = "随意分还款试算";
  columns1 = ["每月1日", "每月2日", "每月3日", "每月4日", "每月5日"];
  showPicker1 = false;
  showPicker2 = false;
  loanMoney: any = "";
  yearRate: any = "";
  yearRate_yh: any = ""; //优惠卷利率
  NUMS: any = ""; //选择的期数,月
  NUMS2: any = ""; //手写的期数,天
  Repayment: any = "";
  brokerage: any = "";
  resInfo: any[] = [];
  pattern: any = /^[1-9]\d*$/; //整数校验
  rateMsg: any = "请填写正确的折扣";
  inrateType: any = "aytxbj_inrate"; //随意分类别
  AllRate: any = "";
  label1: any = "年利率(%)";
  label2: any = "总费率(%)";
  largeDay: any = 0; //利率请求默认天数
  smallDay: any = 1000; //利率请求默认天数

  formatter() {
  }

  onSubmit() {
    this.selectSYFInfo();
  }

  reset() {
    this.loanMoney = "";
    this.yearRate = "";
    this.yearRate_yh = ""; //优惠卷利率
    this.NUMS = "";
    this.Repayment = "";
    this.AllRate = "";
    this.NUMS2 = "";
    this.brokerage = "";
  }

  selectSYFInfo() {
    const param: any = {
      tc: "MCEP",
      AMT: this.loanMoney,
      inRate: this.yearRate,
      inRate_YH: this.Repayment == "1" ? this.yearRate_yh / 100 : this.yearRate_yh / 10000,
      NUMS: this.Repayment == "1" ? this.NUMS : this.NUMS2,
      Repayment: this.Repayment,
      brokerage: this.brokerage
    };
    NativeUI.showWaiting("正在查询...");
    return IF.transferDataInter(systemApi.SYFLoanmoneyComputed, param).then((res: any) => {
      NativeUI.closeWaiting();
      if (res.code == 1) {
        this.resInfo = res.data.LIST;
        this.$store.commit("setEmpty");
        this.$store.commit("setCalculateRes", this.resInfo);
        this.$router.push({
          path: "/RepaymentTrialDetail"
        });
      } else {
        NativeUI.toast(res.message);
      }
    });
  }

  //查询随意分利率
  selectSYFRate(val: any) {
    if (val == 1) { //按月付款
      this.largeDay = 1;
      this.smallDay = 1000;
    } else if (val == 2) {
      if (this.NUMS2 == "" || this.NUMS2 == 0 || (this.NUMS2 >= 1 && this.NUMS2 <= 365)) {
        this.largeDay = 1;
        this.smallDay = 365;
      } else {
        this.largeDay = 366;
        this.smallDay = 1000;
      }
    }
    const param = {
      capitalType: val,
      largeDay: this.largeDay,
      smallDay: this.smallDay,
      pageNum: "1",
      pageSize: "10"
    };
    return IF.transferDataInter(systemApi.SYFLoanRateSelect, param).then((res:any) => {
      if (res.code == 1) {
        //查询回来利率
        this.yearRate = res.data.records[0].rate;
      } else {
        NativeUI.toast(res.msg);
      }
    });
  }

  //浮点校验规则
  validator(val: any) {
    return /^(-?\d+)(\.\d+)?$/.test(val);
  }

  //输入内容进行校验
  validatorRules(val: any) {
    let reg = new RegExp("^d{1,2}$|^\\d{1,2}");
    if (!reg.test(val)) {
      return false;
    } else if (val > 100) {
      return false;
    }
    return true;
  }

  //验证非负两位浮点数
  validatorFloatNum(val: any) {
    let reg = new RegExp("^(([0-9]+\\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\\.[0-9]+)|([0-9]*[1-9][0-9]*))$");
    if (!reg.test(val)) {
      return false;
    }
    return true;
  }

  validatorNumber(val: any) {
    console.log(val);
    let reg = new RegExp("^[1-9]\\d*$");
    if (!reg.test(val)) {
      return false;
    } else if (val > 730) {
      return false;
    } else {
      return true;
    }
  }

  activated() {
    this.$router.beforeEach((to, from, next) => {
      if (from.path == "/main/workbench") {
        this.loanMoney = "";
        this.yearRate = "";
        this.yearRate_yh = ""; //优惠卷利率
        this.AllRate = "";
        this.NUMS = "";
        this.NUMS2 = "";
        this.Repayment = "";
        this.brokerage = "";
      }
      next();
    });
  }
  @Watch("yearRate")
  yearRateFunction(val:any) {
    if (this.Repayment == "1") {
      let payoff = this.yearRate_yh;
      if (payoff == "") {
        this.AllRate = ((this.NUMS * val) / 12).toFixed(2).toString();
      } else {
        this.AllRate = ((this.NUMS * val * payoff / 100) / 12).toFixed(2).toString();
      }
    } else if (this.Repayment == "2") {
      // this.selectSYFRate("2");
      let payoff = this.yearRate_yh;
      if (payoff == "") {
        this.AllRate = ((this.NUMS2 * val) / 100).toFixed(2).toString();
      } else {
        this.AllRate = ((this.NUMS2 * val * payoff / 100) / 100).toFixed(2).toString();
      }
    }
  }

  @Watch("yearRate_yh")
  yearRate_yhFunction(val:any) {
    if (this.yearRate_yh < 0) {
      this.rateMsg = "折扣不能为负";
    } else {
      this.rateMsg = "请填写正确的折扣";
    }
    if (this.Repayment == "1") {
      let payoff = val;
      if (payoff == "") {
        this.AllRate = ((this.NUMS * this.yearRate) / 12).toFixed(2).toString();
      } else {
        this.AllRate = ((this.NUMS * this.yearRate * payoff / 100) / 12).toFixed(2).toString();
      }
    } else if (this.Repayment == "2") {
      let payoff = val;
      if (payoff == "") {
        this.AllRate = ((this.NUMS2 * this.yearRate) / 100).toFixed(2).toString();
      } else {
        this.AllRate = ((this.NUMS2 * this.yearRate * payoff / 100) / 100).toFixed(2).toString();
      }
    }
  }

  @Watch("NUMS2")
  NUMS2Function(val: any) {
    this.selectSYFRate("2");
    let payoff = this.yearRate_yh;
    if (payoff == "") {
      this.AllRate = ((val * this.yearRate) / 100).toFixed(2).toString();
    } else {
      this.AllRate = ((val * this.yearRate * payoff / 100) / 100).toFixed(2).toString();
    }
  }


  @Watch("NUMS")
  NUMSFunction(val: any) {
    if (this.Repayment == "1") {
      let payoff = this.yearRate_yh;
      if (payoff == "") {
        this.AllRate = ((val * this.yearRate) / 12).toFixed(2).toString();
      } else {
        this.AllRate = ((val * this.yearRate * payoff / 100) / 12).toFixed(2).toString();
      }
    }
  }

  @Watch("Repayment")
  RepaymentFunction(val: any) {
    if (val == "1") {
      this.label1 = "年利率(%)";
      this.label2 = "总费率(%)";
    } else if (val == "2") {
      this.label1 = "天利率(万分)";
      this.label2 = "总费率(%)";
    }
  }

}
</script>

<style scoped>
.content {
  width: 60%;
  padding-top: 10%;
  margin: 0 auto;
}

::v-deep .d-form-field .van-field {
  align-items: center;
}

::v-deep .van-cell::after {
  border: 0;
}

::v-deep .van-button--info {
  background-color: #fd5065;
  border: 1px solid #fd5065;
}

::v-deep .van-button__text {
  font-size: 16px;
}
</style>