<!--
 * @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">
        <div class="d-flex" style="margin-top: 6%;margin-left: 5%">存款金额(元)<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 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>
      <div class="card" v-if="!flag">
        <div class="d-flex" style="margin-top: 6%;margin-left: 5%">贷款金额(元)<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 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: -2%;margin-left: 5%">贷款利率(%)<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 placeholder="请选择贷款种类" style="width: 50%;margin-top: -4%;margin-left: auto" is-link/></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/></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"><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";
@Component({
  name: "DepositInterestTrial",
})
export default class DepositInterestTrial extends Vue{
  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() {
    this.$router.push({
      name: "CountResultB",
    })
  }
  countB() {
    this.$router.push({
      name: "CountResult",
    })
  }
}
</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%;
}
</style>
