<template>
  <sail-page type="loading-view" title="缴纳定金">
    <div slot="content" class="bill-wrapper">
      <van-nav-bar
        title="缴纳定金"
        left-arrow
        @click-left="back"
      /> 
      <div class="save_infomation gradient-green">
        <p class="wait_time_icon">
          
        </p>
         <p class="wait_time_text">
         	<span class="wait_text">等待付款</span><br>
         	<span class="time_text">剩{{waitTime}}分自动关闭</span>
         </p>
      </div>
      <div class="prompt_info">
      	  <p class="prompt_top">
      	  	  <span class="prompt_title">温馨提示</span>
      	  	  <!-- <span class="depostit_button">定金说明</span> -->
      	  </p>
      	  <p class="choose_cost_num">选房需缴纳定金{{repairActualFee | currency}}元</p>
      	  <p class="depostit_introduce">
      	  	缴纳定金后，该房间会为您保留 {{lockingTime}}小时 ，请您尽快前往赛嶺公寓办理入住。<br>
办理入住时，定金可抵租金。
      	  </p>
      </div>
       <div class="full-bill">         
          <div class="full-bill_content">
            <div class="activity-pay">
               <p class="activity-pay_txt">付款方式：</p>
               <cube-radio-group v-model="payMethod" :options="payOptions" :hollow-style="true" />
            </div>
          </div>
        </div>
        <p class="intruduce">
           缴纳表示您同意<router-link to="/reservationProtocol" style="color:#E58E45;">《赛嶺公寓预定协议》</router-link>
        </p>


        <van-submit-bar class="gradient-green" 
              :price="repairActualFee*100"
              label="金额:"
              :loading="loading"
              button-text="立即缴费"
              @submit="onSubmit"
            />
    </div>
  </sail-page>
</template>

<script>
import sailPage from "@/components/sail-page.vue";
import { mapState } from "vuex";
import { Toast } from "vant";
import store from "@/utils/store";
export default {
  components: {
    sailPage,    
  },
  computed:{
    ...mapState({
      depositForm:state => state.applyModule.depositForm,
      applyDetail: state => state.applyModule.applyDetail,     
    }),
    waitTime(){
      setTimeout(() => {
        if(store("depositInfo").lockEndTime - (new Date().getTime()) <= 0 ){
          this.time = 0;
        }else {
          this.time = parseInt((store("depositInfo").lockEndTime - (new Date().getTime()))/60000);
        } 
      },50);
        
      setInterval(() => {
        if(store("depositInfo").lockEndTime - (new Date().getTime()) <= 0 ){
          this.time = 0;
        }else {
          this.time = parseInt((store("depositInfo").lockEndTime - (new Date().getTime()))/60000);
        }              
      },60000);

      return this.time;

    },
    repairActualFee() {
      setTimeout(() => {
        this.price = store("depositInfo").repairActualFee;
      },50); 
      return this.price;
    },
    lockingTime() {
      let lockTime = parseInt(store("depositInfo").lockingTime/60);
      if(lockTime <= 0) {
        lockTime = 0;
      }
      return lockTime;
    }
      
  },
  mounted() {
    let type = this.$route.params.type;
    //if(JSON.stringify(this.applyDetail) !== '{}'){
    if(type === "detailPay"){       
      this.payInfo.applyLiveId = this.applyDetail.id;        
      this.payInfo.lockBeginTime = this.applyDetail.lockBeginTime;
      this.payInfo.lockEndTime = this.applyDetail.lockEndTime;
      this.payInfo.repairActualFee = this.applyDetail.fee;
      this.payInfo.paymentPo = this.applyDetail.paymentPo;
      this.payInfo.lockingTime = this.applyDetail.lockTime;
      store("depositInfo",this.payInfo);
    }
    //applyDetail
    
    
    // 
    // 
  },
  data: function(){
    return {
      message: "",
      value: 1,
      payMethod: "wePay",
      loading:false,
      selected:false,
      price:0,
      time:0,
      payOptions: [
        {
          label: "微信",
          value: "wePay"
        },
        // {
        //   label: '支付宝',
        //   value: 'aliPay'
        // }
      ],
      payInfo:{
        paymentPo:{}
      },
        
    }; 
  },
  methods: {
    back() {
      this.$router.push({path:`/applyDetail/${store("depositInfo").applyLiveId}`});
      //this.$router.back()
    },
    onSubmit() {      
      this.loading = true; 
      this.$store.dispatch('applyModule/depositGetPayUrl',{
        applyLiveId:store('depositInfo').applyLiveId
      }).then(res => {
        this.loading = false
        
        //return
        if(res.data.code === 10000 ){            
         location.href= res.data.data.ccbPaymentUrl
        }
      })
      // setTimeout(() => {
      //   this.loading = false;        
      //   location.href = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxbc03a72497d53424&redirect_uri=http%3a%2f%2fc.sailapartment.com%2fwx%2fwxuser.html&response_type=code&scope=snsapi_base&state=${store("depositInfo").paymentPo.orderCode}&connect_redirect=1#wechat_redirect`;
      // },500);              
        
             
                    
        
    }
  }
};
</script>
<style lang="less">
   @nice-bold: #222222;
   @nice-red: #FF2929;
   @nice-gray: #747474;
   .bill-wrapper {
      .van-submit-bar__price span {
        font-weight: bold;
      }
      .van-submit-bar__price {
        color: @nice-gray;
        text-align: left;
        font-size: 15px;
        margin-left: 18%;
      }
      .van-submit-bar .van-button {
        width: 140px;
      }
      .van-submit-bar__price-integer, .van-submit-bar__price-decimal {
        color: @nice-red;
        font-weight: bold;
      }
      .van-submit-bar__price-integer {
        padding-left: 15px;
      }
      
   }
</style>
<style lang="less" scoped>
  .bill-wrapper {
    padding-bottom: 10vh;
    .save_infomation {
        width: 375px;
        height: 209px;
        position: relative;
        .wait_time_icon {
          width: 75px;
          height: 65px;
          background: url(~@/assets/img/pay_time_img.png) no-repeat center;
          background-size: cover;
          position: absolute;
          left: 150px;
          top: 33px;
        }
        .wait_time_text {
           position: absolute;
           left: 142px;
           bottom: 34.5px;
           
           .wait_text {
           	  font-size: 16px;
              color: #FFFFFF;
           }
           .time_text {
           	font-size: 14px;
            color: rgba(255,255,255,.8);
           }

        }
    } 
    .prompt_info {
    	width: 100vw;
    	height: 157px;
    	background: #FFFFFF;
    	margin-top: 20px;
    	.prompt_top {
    	  width: 326px;    	  
    	  height: 46px;
    	  line-height: 46px;
    	  position: relative;
    	  margin:0 auto; 
    	  text-align:left;
    	  .prompt_title {
    	  	display: inline-block;
    	  	height: 46px;
    	  	font-size:14px;
    	  	color:#585858;
    	  	font-weight:600;
    	  }
    	  .depostit_button {
    	  	width: 83.57px;
    	  	height: 21px;
    	  	display: inline-block;
    	  	border-radius: 11px;
    	  	text-align:center;
    	  	line-height: 23px;
    	  	border: 1px solid #2BAA76;
    	  	color:#2BAA76;
    	  	font-size:12px;
    	  	position: absolute;
    	  	top: 12px;
    	  	right: 0;

    	  }
    	}
    	.choose_cost_num {
    		width: 326px;
    		height: 25px;
    		line-height: 25px;
    		font-size:18px;
    		color:#E58E45;
    		font-weight:600;
    		margin: 5px auto;
    		text-align:left;
    	}
    	.depostit_introduce {
    		width: 326px;
    		margin: 10px auto;
    		font-size: 14px;
    		color:rgba(88,88,88,.63);
    		line-height: 20px;
    		text-align:left;
    	}

    }   
    .full-bill {
      min-height: 60px;
      .full-bill_header {
        margin-top: 15px;
      }
      .header_words {
        font-size: 12px;
        color: red;
        text-align: left;
        margin: 15px;
      }
      .activity-pay {
        padding-bottom: 10px;
      }
      .activity-pay_txt {
        color: #222222;
        margin-top: 14.5px;
        margin-bottom: 11.5px;
        margin-left: 18px;
        text-align: left;
      }
      .full-bill_footer {
        position: relative;
        margin-top: 15px;
      }
   }
   .intruduce {
      width: 100vw;
      height: 40px;
      line-height: 40px;
      color:rgba(88,88,88,.63);
      font-size: 14px;
      text-align:center;
   }
  }
  
</style>