<template>
  <h-view id="first-pay" class="public-style">
    <h-header :proportion="[5,1,1]" :has-border="false" class="bar-custom">
      <div slot="left" class="h-header-btn">
        <img src="@/assets/userBind/arrow.png" @click="goHome" >
        <span>首付款支付</span>
      </div>
    </h-header>
    <h-content style="margin-top:-1px;">
      <div class="top-head">
        <div class="center">
          <div class="now-pay">
            <div class="title">当前应付</div>
            <div class="data">
              <span>￥</span>
              {{ money |currency }}
            </div>
          </div>
        </div>
      </div>

      <section class="pay-content">
        <div class="pos">
          <div class="pay-money">
            <div class="pay-icon">
              <img src="@/assets/payment/first-pay.png" >首付款支付
            </div>
            <div class="pay-input">
              <span>应还首付款</span>
              <CurrencyInput ref="payInput" v-model="money" class="currencyInput" placeholder="请输入支付金额" />
              <div @click="createOrder">
                <img src="@/assets/payment/into.png" >
              </div>
            </div>
          </div>
        </div>
      </section>
      <div class="prompt">
        <div>
          <img src="@/assets/payment/prompt.png" alt >
        </div>
        <div>
          <p>温馨提示</p>
          <p>推荐使用农行卡，农行卡支付免收手续费！</p>
        </div>
      </div>
    </h-content>
    <bottom-tab>
      <tab-button class="footer" @click.native="pay">提交订单</tab-button>
    </bottom-tab>
  </h-view>
</template>

<script>
import CurrencyInput from '../../../components/currencyInput'
export default {
  name: 'FirstPay',
  components: {
    CurrencyInput,
  },
  data () {
    return {
      money: 0,
      default: 0,
    }
  },
  beforeRouteEnter (to, from, next) {
    next(vm => {
      if (from.name === 'MyInfo') {
        vm.getDownPayment()
      } else if (from.name === 'Success') {
        vm.money =
          parseInt(vm.default) - parseInt(window.localStorage.getItem('money'))
        vm.default = vm.money
      }
    })
  },
  watch: {
    'money': {
      handler (newVal, oulVal) {
        if (newVal === null) {
          this.money = 0
        }
      },
    },
  },
  methods: {
    initPayInput () {
      let obj = this.$refs.payInput
    },
    getDownPayment () {
      let vm = this
      let url = process.env.basePath + 'initial_payment_query'
      let param = {
        phone: window.localStorage.getItem('user_phone'),
      }
      hlsPopup.showLoading('请稍候')
      vm.$post(url, param).then(function (res) {
        vm.hlsPopup.hideLoading()
        if (res.result === 'S') {
          vm.money = parseFloat(res.info.down_payment).toFixed(2)
          vm.default = parseFloat(res.info.down_payment).toFixed(2)
        } else {
          hlsPopup.showLongCenter(res.message)
        }
      })
    },
    goHome () {
      this.$router.replace({
        name: 'MyInfo',
      })
    },
    pay () {
      // this.payProtocol()
      let money = parseFloat(this.money)
      let theDefault = parseFloat(this.default)
      if (money > 0 && money <= theDefault) {
        this.payProtocol()
      } else if (money > theDefault) {
        hlsPopup.showLongCenter('当前支付金额超出应还金额！')
      } else if (money === 0) {
        hlsPopup.showLongCenter('当前支付金额为0元，无需支付！')
      }
    },
    payProtocol () {
      let vm = this
      let url = process.env.basePath + 'create_order_0_amount'
      let param = {
        info: {
          bp_id: window.localStorage.getItem('bp_id'),
          amount: vm.money,
        },
      }
      hlsPopup.showLoading('请稍候')
      vm.$post(url, param).then(function (res) {
        vm.hlsPopup.hideLoading()
        if (res.result === 'S') {
          let e = res.order_id
          vm.toPayEntry(e)
        } else {
          hlsPopup.showLongCenter(res.message)
        }
      })
    },
    toPayEntry (e) {
      this.$router.push({
        name: 'PayEntry',
        params: {
          money: this.money,
          order_id: e,
        },
      })
    },
    createOrder () {
      let vm = this
      let url = process.env.basePath + 'do_order_0_prj'
      let param = {
        info: {
          bp_id: window.localStorage.getItem('bp_id'),
        },
      }
      hlsPopup.showLoading('请稍候')
      vm.$post(url, param).then(function (res) {
        vm.hlsPopup.hideLoading()
        if (res.result === 'S') {
          window.localStorage.setItem('order_id', res.order_id)
          vm.toContractRecord(vm.money)
        } else {
          hlsPopup.showLongCenter(res.message)
        }
      })
    },
    toContractRecord (money) {
      this.$router.push({
        name: 'ContractRecord',
        params: {
          money,
        },
      })
    },
  },
}
</script>
<style lang='less' >
#first-pay {
  .top-head {
    width: 100%;
    height: 142px;
    background: url("../../../assets/payment/back1.png");
    background-size: 100% 142px;
    .now-pay {
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-flow: column wrap;
      .title {
        font-family: PingFangSC-Regular;
        font-size: 14px;
        color: #ffffff;
        margin-top: 20px;
      }
      .data {
        font-family: Verdana-Bold;
        font-size: 24px;
        color: #ffffff;
        letter-spacing: 0;
        line-height: 18px;
        text-align: center;
        margin-top: 16px;
      }
    }
  }
  .pay-content {
    position: relative;
    top: -57px;
    width: 100%;
    height: 94px;
    display: flex;
    justify-content: center;
    .pos {
      width: 96%;
      height: 100%;
      background: #ffffff;
      box-shadow: 0 1px 3px 2px rgba(168, 168, 168, 0.14);
    }
    .pay-money {
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      flex: 1;
      background-color: #fff;
      padding-left: 16px;
      .pay-icon {
        height: 50%;
        display: flex;
        align-items: center;
        font-family: PingFangSC-Regular;
        font-size: 14px;
        color: #1d3fff;

        img {
          width: 30px;
          display: block;
          float: left;
          margin-right: 9px;
        }
      }

      .pay-input {
        height: 44px;
        display: flex;
        align-items: center;
        flex: 1;
        font-family: PingFangSC-Regular;
        font-size: 14px;
        color: #656464;
        img {
          width: 15px;
          height: 17px;
        }
        span {
          flex: 2;
          text-align: left;
          height: 100%;
          display: flex;
          align-items: center;
        }
        .currencyInput {
          flex: 3;
          text-align: right;
          padding-right: 5px;
          height: 37px;
          line-height: 37px;
          display: flex;
          align-items: center;
        }

        div {
          display: flex;
          height: 100%;
          align-items: center;
          justify-content: center;
          flex: 1;
          text-align: center;
          background: rgba(0, 70, 156, 0.08);

          i {
            color: #00469c;
            font-size: 16px;
          }
        }

        input::placeholder {
          font-family: PingFangSC-Regular;
          font-size: 14px;
          color: #b4b4b5;
        }
      }
    }
  }

  .prompt {
    background: rgba(142, 195, 30, 0.1);
    height: 77px;
    display: flex;
    position: absolute;
    width: 100%;
    bottom: 0;
    div:first-child {
      flex: 1;
      padding: 16px 0 0 16px;

      img {
        width: 16px;
        height: 16px;
      }
    }

    div:last-child {
      flex: 12;

      p:first-child {
        padding-top: 16px;
        font-family: PingFangSC-Semibold;
        font-size: 14px;
        color: #8ec31e;
        letter-spacing: 0.5px;
      }

      p:last-child {
        padding-top: 15px;
        font-family: PingFangSC-Regular;
        font-size: 12px;
        color: rgba(101, 100, 100, 0.8);
        letter-spacing: 0.37px;
      }
    }
  }

  .footer {
    background-color: @headerColor;
    color: #fff;
  }
}
</style>
