<!--
 * @Author: wangliang
 * @date 20220727
-->
<template>
  <div>
    <div class="rarle">
      <!--上部分-->
      <div style="width:100%;height: calc(35vh);background: linear-gradient(90deg, #76befa 0%, #3672f1 99%);">
        <tatle-bar :tatle="titleName" :tatleflag="titleflag" >
        </tatle-bar>
        <div class="bar">
          <van-row>
            <van-col span="12" style="text-align: center;line-height: 31px;border-radius: 4px 0px 0px 4px;margin-top: 1px" :class="flagA?'white':'green'" @click="chooseA">存款利息试算</van-col>
            <van-col span="12" style="text-align: center;line-height: 31px;border-radius: 0px 4px 4px 0px;margin-top: 1px" :class="flagB?'white':'green'" @click="chooseB">贷款利息试算</van-col>
          </van-row>
        </div>
      </div>
      <div class="card" v-if="flag" :model="test">
        <div class="d-flex" style="margin-top: 6%;margin-left: 5%">存款金额(元)<van-field v-model="test.depositAmt" placeholder="请输入存款金额" style="width: 50%;margin-top: -4%;margin-left: auto;"></van-field></div>
        <div class="d-flex" style="margin-top: 6%;margin-left: 5%">存款利息(%)<van-field v-model="test.depositRate" placeholder="请输入存款利息" style="width: 50%;margin-top: -4%;margin-left: auto;"></van-field></div>
        <div class="d-flex" style="margin-top: 6%;margin-left: 5%">存入日期<van-field v-model="test.putDate" placeholder="请输入存入日期" style="width: 50%;margin-top: -4%;margin-left: auto"></van-field></div>
        <div class="d-flex" style="margin-top: 6%;margin-left: 5%;margin-bottom: 6%">取出日期<van-field v-model="test.getDate" placeholder="请输入取出日期" style="width: 50%;margin-top: -4%;margin-left: auto"></van-field></div>
      </div>
      <div class="card" v-if="!flag" :model="test2">
        <div class="d-flex" style="margin-top: 6%;margin-left: 5%">贷款金额(元)<van-field v-model="test2.loanAmt" placeholder="请输入贷款金额" style="width: 50%;margin-top: -4%;margin-left: auto;"></van-field></div>
        <div class="d-flex" style="margin-top: 6%;margin-left: 5%">贷款期限(月)<van-field v-model="test2.loanTime" placeholder="请输入贷款期限" style="width: 50%;margin-top: -4%;margin-left: auto"></van-field></div>
<!--        <div class="d-flex" style="margin-top: 6%;margin-left: 5%;margin-bottom: 6%">计划月还款(元)<van-field placeholder="请输入计划月还款" style="width: 50%;margin-top: -4%;margin-left: auto"></van-field></div>-->
        <div class="d-flex" style="margin-top: 6%;margin-left: 5%">贷款利率(%)<van-field v-model="test2.loanRate" placeholder="请输入贷款利率" style="width: 50%;margin-top: -4%;margin-left: auto;"></van-field></div>
<!--        <div class="d-flex" style="margin-top: 6%;margin-left: 5%">贷款种类<van-field placeholder="请选择贷款种类" style="width: 50%;margin-top: -4%;margin-left: auto" is-link arrow-direction="down"/></div>-->
<!--        <div class="d-flex" style="margin-top: 6%;margin-left: 5%;margin-bottom: 6%">还款方式<van-field placeholder="请选择还款方式" style="width: 50%;margin-top: -4%;margin-left: auto" is-link arrow-direction="down"/></div>-->
        <div class="d-flex" style="margin-top: 6%;margin-left: 5%;margin-bottom: 6%">还款方式<a-select :v-model="choice" @change="handleChoiceChange" placeholder="请选择还款方式" style="width: 50%;margin-top: -2%;margin-left: auto">
          <a-select-option v-for="(item, index) in choices" :key="index" :value="item">
            {{item}}
          </a-select-option>
        </a-select></div>
<!--        <div class="d-flex" style="margin-top: 6%;margin-left: 5%;margin-bottom: 6%">还款方式-->
<!--          <div style="width: 50%;margin-top: -4%;margin-left: auto">-->
<!--            <van-dropdown-menu>-->
<!--              <van-dropdown-item :value="value1" :options="option1" />-->
<!--            </van-dropdown-menu>-->
<!--          </div>-->
<!--        </div>-->
      </div>
      <div v-if="flag">
      <van-button style="width: 90%;margin-left: 5%;background-color: #1890ff;position: absolute;margin-top: 86%;height: 6%;border-radius: 5px;" type="primary" @click="countA">计算</van-button>
      <van-button style="width: 90%;margin-left: 5%;position: absolute;margin-top: 102%;height: 6%;border-radius: 5px;border-color: #1890ff" @click="clearData"><span style="color: #1890ff">清除</span></van-button>
      </div>
      <div v-if="!flag">
        <van-button style="width: 90%;margin-left: 5%;background-color: #1890ff;position: absolute;margin-top: 86%;height: 6%;border-radius: 5px;" type="primary" @click="countB">计算</van-button>
        <van-button style="width: 90%;margin-left: 5%;position: absolute;margin-top: 102%;height: 6%;border-radius: 5px;border-color: #1890ff"><span style="color: #1890ff">清除</span></van-button>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import {Component, Vue} from "vue-property-decorator";
import {Test} from "@/views/DepositInterestTrial/Test";
@Component({
  name: "DepositInterestTrial",
})
export default class DepositInterestTrial extends Vue{
  choices: string[] = ["利随本清","等额本金","等额本息"];
  choice = "";
  test2: any = {
    loanAmt: "",
    loanTime: "",
    loanRate: "",
  };
  // value1 = 0;
  // option1 = [
  //   { text: '请选择还款方式', value: 0 },
  //   { text: '利随本清', value: 1 },
  //   { text: '等额本金', value: 2 },
  //   { text: '等额本息', value: 3 },
  // ]
  test: Test = new Test();//测试数据
  flag:boolean=true;
  flagA=true;
  flagB=false;
  titleName:any ="存款利息试算";
  titleflag:boolean=true;
  chooseA() {
    this.flag = true;
    this.titleName="存款利息试算";
    this.flagA=true;
    this.flagB=false;
  }
  chooseB() {
    this.flag = false;
    this.titleName="贷款利息试算";
    this.flagA=false;
    this.flagB=true;
  }
  countA() {
    let result = 0;
    let yearA = parseInt(this.test.putDate.substring(0,4));
    let yearB = parseInt(this.test.getDate.substring(0,4));
    let monthA = parseInt(this.test.putDate.substring(4,6));
    let monthB = parseInt(this.test.getDate.substring(4,6));
    let dayA = parseInt(this.test.putDate.substring(6));
    let dayB = parseInt(this.test.getDate.substring(6));
    result = parseInt(this.test.depositAmt)+ parseInt(this.test.depositAmt)*parseInt(this.test.depositRate)*((yearB-yearA)*365+(monthB-monthA)*30+(dayB-dayA))/36500;
    console.log(result);
    this.$router.push({
      name: "CountResultB",
      params: {
        countResult: result.toString(),
        depositAmt: this.test.depositAmt,
        depositTime: (((yearB-yearA)*365+(monthB-monthA)*30+(dayB-dayA))/30).toString(),
        depositRate: this.test.depositRate,
      }
    })
  }
  countB() {
    let result = 0;
    result = parseInt(this.test2.loanAmt)+parseInt(this.test2.loanAmt)*parseInt(this.test2.loanRate)*parseInt(this.test2.loanTime)/100;
    console.log(result);
    console.log("**********"+JSON.stringify(this.choice));
    this.$router.push({
      name: "CountResult",
      params: {
        result: result.toString(),
        loanAmt: this.test2.loanAmt,
        loanRate: this.test2.loanRate,
        loanTime: this.test2.loanTime,
        choice: this.choice,
      }
    })
  }
  clearData() {
    this.test = new Test();
  }
  handleChoiceChange(value:any) {
    this.choice = value;
  }
}
</script>

<style scoped lang="scss">
.bar{
  margin: 0px auto;
  width: 90%;
  height: 14%;
  background-color: #ffffff;
  margin-top: 4%;
  border-radius: 4px;
}
.white{
  background-color: #ffffff;
  color: #0073ff;
}
.green{
  background-color: #409eff;
  color: #ffffff;
}
.card{
  position: absolute;
  background-color: #ffffff;
  width: 90%;
  margin-left: 5%;
  margin-top: -30%;
}
::v-deep .ant-select-selection {
      border: none;
    }
</style>
