<template>
  <div>
    <group v-show="!showPayPage">



      <cell >
         <span slot="title">计算方式
           <div class="scoped-ops">
             <div :class="curType === 'totalPrice' ? 'op cur' : 'op'" @click="tpyeHandle('totalPrice')">按房屋总价</div>
             <div :class="curType === 'loanPrice' ? 'op cur' : 'op'" @click="tpyeHandle('loanPrice')">按贷款总额</div>
           </div>
         </span>
      </cell>

      <div v-if="curType === 'totalPrice' ">
        <x-input type="number" title="房款总价" v-model="totalPrice">
          <span slot="right">万元</span>
        </x-input>
        <cell is-link @click.native="showPayPage=true">
          <span slot="title"><span>首付比例</span>&nbsp;&nbsp;&nbsp;&nbsp;<span>{{payPercent}}</span></span>
        </cell>
        <cell value="万元">
          <span slot="title"><span>贷款总额</span>&nbsp;&nbsp;&nbsp;&nbsp;<span>{{loanMoney}}</span></span>
        </cell>
      </div>
      <div v-else>
        <x-input type="number" title="贷款总额" v-model="loanPrice">
          <span slot="right">万元</span>
        </x-input>
      </div>
      <popup-picker title="按揭年数" :data="loanYearsList"  v-model="loanYear" value-text-align="left">

      </popup-picker>
      <cell is-link @click.native="showRatePage=true">
        <span slot="title"><span>利&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;率</span>&nbsp;&nbsp;&nbsp;&nbsp;<span>{{showRate}}</span></span>
      </cell>
      <x-button style="margin: 20px auto; width: 95%;" type="primary" :style="'background: #0259e7;'" @click.native="caculateLoan">开始计算</x-button>
    </group>
    <PayRate v-show="showPayPage" class="payRate" @submit="submit" ></PayRate>
    <MoneyRate v-show="showRatePage" class="payRate" @submit="RateSubmit" :baseRate="baseRate"></MoneyRate>
  </div>
</template>
<script>
import PayRate from "../components/PayRate";
import MoneyRate from "../components/MoneyRate";
import { PopupPicker, XInput, Group, Cell, XButton } from "vux";
export default {
  components: {
    MoneyRate,
    PopupPicker,
    PayRate,
    XInput,
    Group,
    Cell,
    XButton
  },
  mounted() {
    let initalLoanYears = [];
    for (let i = 1; i < 31; i++) {
      initalLoanYears.push(i + "年" + "(" + i * 12 + "期)");
    }
    this.loanYearsList.push(initalLoanYears);
  },
  data() {
    return {
      curType: 'totalPrice',
      loanPrice: 70,
      isUnique: true,
      loanYearsList: [],
      loanYear: ["20年(240期)"],
      totalPrice: 100,
      payRate: 0.3,
      payMoney: 0,
      loanYears: "",
      moneyRate: "",
      // baseRate: 4.1 / 100,
      actRate: 3.55 / 100,
      // showRate: "4.1%",
      payRateLabel: "三成",
      showPayPage: false,
      showRatePage: false
    };
  },
  computed: {
    baseRate () {
      if (this.years <= 1) {
        return 4.35 / 100
      } else if (this.years <= 5) {
        return 4.75 / 100
      }

      return 3.55 / 100
    },
    years () {
      const month = this.loanYear[0].match(/\((\S*)\)/);
      return parseInt(month[1].substr(0,month[1].length-1) / 12);
    },
    showRate () {
      return (this.actRate * 100).toFixed(2) + '%'
    },
    loanMoney() {
      return (this.totalPrice * (1 - this.payRate)).toFixed(2);
    },
    payPercent() {
      if (!this.payRateLabel) {
        this.payMoney = this.payRate;
        return this.payRate + "万";
      } else {
        this.payMoney = (this.totalPrice * this.payRate).toFixed(2);
        return (
          this.payRateLabel +
          "(" +
          (this.totalPrice * this.payRate).toFixed(2) +
          "万" +
          ")"
        );
      }
    }
  },
  watch: {
    loanPrice: function () {
      this.totalPrice = (this.loanPrice / (1 - this.payRate)).toFixed(2)
      console.log(this.loanPrice / (1 - this.payRate))
    }
  },
  methods: {
    tpyeHandle (str) {
      console.log(str)
      this.curType = str
    },
    caculateLoan() {
      let month = this.loanYear[0].match(/\((\S*)\)/);
      let months = month[1].substr(0,month[1].length-1);
      this.$router.push({
        path: "/payment",
        query: { totalPrice: this.totalPrice,
        loanMoney: this.curType === 'totalPrice' ? this.loanMoney : this.loanPrice,
        months:months,
        rate:this.actRate,
        payMoney:this.curType === 'totalPrice' ? this.payMoney : '-' }
      });
    },
    submit(payRate, label) {
      this.payRateLabel = label;
      this.showPayPage = false;
      this.payRate = payRate;
    },
    RateSubmit(showValue, actRate) {
      this.showRatePage = false;
      this.actRate = actRate;
      // this.showRate = showValue;
    }
  }
};
</script>
<style>
.payRate {
  position: absolute;
  top: 0;
  bottom: 0;
  background-color: #ffffff;
}
.vux-popup-picker-value{
  padding-left:20px!important;
}

.scoped-ops {
  display: inline-block;
}
.scoped-ops .op {
  display: inline-block;
  vertical-align: middle;
  margin-left: 10px;
  font-size: 14px;
  padding: 4px 10px;
  border-radius: 6px;
}
.scoped-ops .op.cur {
  background: #0259e7;
  color: #fff;
}
</style>
