<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="$routeGo()" >
        <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 v-model="money" type="number" placeholder="请输入支付金额" />
              <!-- <div @click="createOrder">
                <img src="@/assets/payment/into.png" >
              </div> -->
            </div>
          </div>
        </div>
        <div class="write">
          <div class="box">
            <span>备注</span>
            <textarea placeholder="请输入您的备注……" />
          </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="toPayEntry(money)">支&nbsp;&nbsp;付</tab-button>
    </bottom-tab>
  </h-view>
</template>

<script>
import CurrencyInput from '../../../components/currencyInput'

export default {
  components: {
    CurrencyInput,
  },
  data () {
    return {
      money: 0,
      default: 0,
    }
  },
  beforeRouteEnter (to, from, next) {
    next(vm => {
    })
  },
  computed: {},
  watch: {},
  methods: {

    toPayEntry (money) {
      this.$router.push({
        name: 'PayEntry',
        params: {
          money,
        },
      })
    },

  },
}
</script>
<style lang='less' >
#first-pay {
  .write {
    width: 96%;
    height: 172px;
    background-color: #fff;
    margin-top:10px;
    box-shadow: 0 1px 3px 2px rgba(168, 168, 168, 0.14);
    span {
      font-family: PingFangSC-Regular;
      font-size: 14px;
      color: #656464;
      letter-spacing: 0;
    }
    .box {
      width: 343px;
      margin: 0 auto;
      padding-top: 8px;
      textarea {
        width: 343px;
        height: 119px;
        margin-top: 12.5px;
        font-family: PingFangSC-Regular;
        font-size: 13px;
        letter-spacing: 0;
      }
    }
  }
   .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;
    flex-flow: row wrap;
    .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;
          line-height: 37px;
          height: 100%;
          display: flex;
          align-items: center;
        }

        input {
          flex: 3;
          text-align: right;
          padding-right: 5px;
        }

        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>