<!--
 * @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%">储蓄方式
          <a-select v-model:value="test.saveType" :options="saveTypes" placeholder="请选择" style="width: 50%;margin-top: -2%;margin-left: auto">
          </a-select>
        </div> -->


          <van-row type="flex" class="layoutName">
            <van-col span="24">
<!--              <van-field  is-link readonly :value="this.typeValue" label="储蓄方式" input-align="right" placeholder="请选择储蓄方式"  @click="showTypes = true" />-->
              <van-field  is-link readonly :value="test.saveType" label="储蓄方式" input-align="right" placeholder="请选择储蓄方式"  @click="showTypes = true" />
              <van-popup v-model="showTypes" round position="bottom">
                <van-picker
                  show-toolbar
                  :columns="saveTypes"
                  @cancel="showTypes = false"
                  @confirm="onConfirmTypes"
                />
              </van-popup>
            </van-col>
          </van-row>




        <!-- <div class="d-flex" style="margin-top: 6%;margin-left: 5%">定期类型
          <a-select v-model:value="test.timeType" :options="timeTypes" placeholder="请选择" style="width: 50%;margin-top: -2%;margin-left: auto">
          </a-select>
        </div> -->


            <van-row type="flex" class="layoutName">
            <van-col span="24">
<!--              <van-field  is-link readonly :value="timeTypeValue" label="定期类型" input-align="right" placeholder="请选择定期类型"  @click="showTimeTypes = true"/>-->
              <van-field  is-link readonly :value="test.timeType" label="定期类型" input-align="right" placeholder="请选择定期类型"  @click="showTimeTypes = true"/>
                    <van-popup v-model="showTimeTypes" round position="bottom">
                <van-picker
                  show-toolbar
                  :columns="timeTypes"
                  @cancel="showTimeTypes = false"
                  @confirm="onConfirmTimeTypes"
                />
              </van-popup>
            </van-col>
          </van-row>




        <!-- <div class="d-flex" style="margin-top: 6%;margin-left: 5%">期限
          <a-select v-model:value="test.time" :options="times" placeholder="请选择" style="width: 50%;margin-top: -2%;margin-left: auto">
          </a-select>
        </div> -->


               <van-row type="flex" class="layoutName">
            <van-col span="24">
<!--              <van-field  is-link readonly :value="timeValue" label="期限" input-align="right" placeholder="请选择期限"  @click="showTimes = true"/>-->
              <van-field  is-link readonly :value="test.time" label="期限" input-align="right" placeholder="请选择期限"  @click="showTimes = true"/>
                    <van-popup v-model="showTimes" round position="bottom">
                <van-picker
                  show-toolbar
                  :columns="times"
                  @cancel="showTimes = false"
                  @confirm="onConfirmTimes"
                />
              </van-popup>
            </van-col>
          </van-row>







        <div class="d-flex" style="margin-top: 6%;margin-left: 5%">年利率(%)<van-field v-model="test.yearRate" placeholder="请输入" style="width: 50%;margin-top: -4%;margin-left: auto" input-align="right"></van-field></div>
        <div class="d-flex" style="margin-top: 6%;margin-left: 5%;margin-bottom: 6%">存入金额(元)<van-field v-model="test.depositAmt" placeholder="请输入" style="width: 50%;margin-top: -4%;margin-left: auto" input-align="right"></van-field></div>
      </div>
<!--      <div v-if="flag" style="margin-top: 160px; text-align: right; margin-right: 10px; font-size: 12px; color: #3672F1" @click="toDepositRate">-->
<!--        查看基准存款利率-->
<!--      </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;" input-align="right"></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" input-align="right"></van-field></div>
<!--        <div class="d-flex" style="margin-top: 6%;margin-left: 5%">计划月还款(元)<van-field v-model="test2.planMonthRepay" 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;" input-align="right"></van-field></div>
<!--        <div class="d-flex" style="margin-top: 6%;margin-left: 5%">贷款种类-->
<!--          <a-select v-model:value="test2.loanType" :options="loanTypes" placeholder="请选择贷款种类" style="width: 50%;margin-top: -2%;margin-left: auto">-->
<!--          </a-select>-->
<!--        </div>-->
        <!-- <div class="d-flex" style="margin-top: 6%;margin-left: 5%;margin-bottom: 6%">还款方式
          <a-select v-model:value="test2.repayType" :options="choices" placeholder="请选择还款方式" style="width: 60%;margin-top: -2%;margin-left: auto">
          </a-select>
        </div> -->


          <van-row type="flex" class="layoutName">
            <van-col span="24">
              <van-field style="color: red;" is-link readonly :value="choiceValue" label="还款方式" input-align="right" placeholder="请选择还款方式"  @click="showChoices = true"/>
                    <van-popup v-model="showChoices" round position="bottom">
                <van-picker
                  show-toolbar
                  :columns="choices"
                  @cancel="showChoices = false"
                  @confirm="onConfirmChoices"
                />
              </van-popup>
            </van-col>
          </van-row>




      </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: 100%;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" @click="clearDataB"><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{
  loanTypes: any[] = [
    {
      value : "有抵押",
      label : "有抵押",
    },{
      value : "无抵押",
      label : "无抵押",
    }
  ];
  typeValue:any= "";
  showTypes:any=false;
  // saveTypes: any[] = [
  //   {
  //   value : "定期",
  //   label : "定期",
  //   },{
  //   value : "非定期",
  //   label : "非定期",
  //   }
  // ];
   saveTypes: any[] = [
     "定期","非定期",
  ];

    onConfirmTypes(typeValue: string) {
    this.test.saveType = typeValue;
    this.showTypes = false;
  }
  // choices: any[] = [
  //   {
  //     value : "利随本清",
  //     label : "利随本清",
  //   },{
  //     value : "等额本金",
  //     label : "等额本金",
  //   },{
  //     value : "等额本息",
  //     label : "等额本息",
  //   },
  //   {
  //     value : "按季结息(到期一次性还本)",
  //     label : "按季结息(到期一次性还本)",
  //   },{
  //     value : "按月结息(到期一次性还本)",
  //     label : "按月结息(到期一次性还本)",
  //   },{
  //     value : "按年结息(到期一次性还本)",
  //     label : "按年结息(到期一次性还本)",
  //   }
  // ];

  choiceValue:any= "";
  showChoices:any=false;

    choices: any[] = [
    "利随本清",
"等额本金",
"等额本息",
 "按季结息(到期一次性还本)",
"按月结息(到期一次性还本)",
"按年结息(到期一次性还本)",
  ];

      onConfirmChoices(choiceValue: string) {
    this.choiceValue = choiceValue;
    this.showChoices = false;
  }
  // timeTypes: any[] = [
  //   {
  //     value : "定存整取",
  //     label : "定存整取",
  //   },{
  //     value : "零存整取",
  //     label : "零存整取",
  //   },{
  //     value : "整存整取",
  //     label : "整存整取",
  //   }
  // ];
    timeTypeValue:any= "";
  showTimeTypes:any=false;
    timeTypes: any[] = [
     "定存整取",
    "零存整取",
     "整存整取",
  ];
  onConfirmTimeTypes(timeTypeValue: string) {
    this.test.timeType = timeTypeValue;
    this.showTimeTypes = false;
  }


   timeValue:any= "";
  showTimes:any=false;
  // times: any[] = [
  //   {
  //     value : "1",
  //     label : "一年",
  //   },{
  //     value : "2",
  //     label : "两年",
  //   },{
  //     value : "3",
  //     label : "三年",
  //   }
  // ];
    times: any[] = [
     "一年",
     "两年",
    "三年",
  ];


   onConfirmTimes(timeValue: string) {
    this.test.time = timeValue;
    this.showTimes = false;
  }
  test2: any = {
    loanAmt: "",
    loanTime: "",
    //planMonthRepay : "",
    loanRate: "",
    //loanType: undefined,
    repayType: undefined,
  };
  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;
    result = parseInt(this.test.depositAmt)*parseInt(this.test.yearRate)/100*parseInt(this.test.time=="一年"?"1":this.test.time=="两年"?"2":"3");
    if(){
      this.$router.push({
        name: "CountResultB",
        params: {
          saveType: this.test.saveType || "0",
          timeType: this.test.timeType || "0",
          time: this.test.time=="一年"?"1":this.test.time=="两年"?"2":"3",
          yearRate: this.test.yearRate,
          depositAmt: this.test.depositAmt,
          result: result.toString(),
        }
      })
    }else{
      alert("请输入数据");
    }
  }
  countB() {
    let result = 0;
    result = parseInt(this.test2.loanAmt)*parseInt(this.test2.loanRate)/100*parseInt(this.test2.loanTime)/12;
    console.log()
    this.$router.push({
      name: "CountResult",
      params: {
        routeName: "aaa",
        loanAmt: this.test2.loanAmt,
        loanTime: this.test2.loanTime,
        planMonthRepay: this.test2.planMonthRepay,
        loanRate: this.test2.loanRate,
        loanType: this.test2.loanType,
        repayType: this.test2.repayType,
        result: result.toString(),
      }
    })
  }
  clearData() {
    this.test = new Test();
  }
  clearDataB() {
    this.test2.loanAmt="";
    this.test2.loanTime="";
    this.test2.repayType=undefined;
    this.test2.loanRate="";
  }
  handleChoiceChange(value:any) {
    this.test2.repayType = value;
  }
  toDepositRate() {
    this.$router.push({
      name: "DepositRate"
    });
  }
}
</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%;
}
.layoutName {
  font-family: "Arial Normal", "Arial";

  font-weight: 400;
  font-style: normal;
  font-size: 13px;
  color: rgba(0, 0, 0, 0.65);
}
::v-deep .ant-select-selection {
      border: none;
    }
::v-deep  .van-field__label {
    color:#000000A6;
}
</style>
