<template>
  <sail-page type="loading-view" title="优惠券" isHead>
    <div slot="content">
    	<div class="coupon">
    		<div class="coupon-wrap">
    			<div class="coupon-wrap__theme">
    				<p class="coupon-wrap__theme_img">
    					<img class="coupon-wrap_img" src="@/assets/img/common_pic_coupon@3x.png" alt="">
    				</p>
    				<div class="coupon_content">
    					<p class="coupon_size">{{couponDetailInfo.couponName}}</p>
    					<p>
    						<span class="coupon_price">￥{{couponDetailInfo.couponFee}}</span>
    						<span class="coupon_size coupon_opacity">满{{couponDetailInfo.minimumFee }}元使用</span>
    					</p>
    					<div class="coupon-details coupon_opacity coupon_flex">
    					 <p class="coupon_line"> </p>
    					 <p class="coupon-details coupon_opacity">一 有效期:{{couponDetailInfo.useStartTime }} - {{couponDetailInfo.useEndTime }} 一</p>
    					 <p class="coupon_line"> </p>
    					</div>

    				</div>
            <van-button :disabled="(couponDetailInfo.getStatus==0?(disable):(!disable))" :loading="loadingFlag" :class="{'disabled_gray':(couponDetailInfo.getStatus==0?(disable):(!disable))}" @click="get_coupon(couponDetailInfo.id)" class="gradient-green get_coupon">  
            {{couponDetailInfo.couponButton}}
          </van-button>
    			</div>

    		</div>
    		   		
    	</div>
    </div>
  </sail-page>
</template>

<script>

import sailPage from "@/components/sail-page.vue";
import { mapState } from "vuex";
export default {
  components: {
    sailPage
  },
  computed:{
    ...mapState({
      couponDetailInfo:state => state.couponModule.couponDetailInfo,
      loadingFlag:state => state.couponModule.loadingFlag,
      disable:state => state.couponModule.disable

    })
  },
  data: function(){
    return {
      //loading:false,
      // disable:false

    }; 
  },
  asyncData({store,route}) {
    let id = route.params.id;

    return store.dispatch("couponModule/getCouponDetailInfo",{
      id
    }).then(res => {
                  
        
    });
  },
  methods: {
    get_coupon(couponId){                
      this.$store.commit("couponModule/SET_LOADING_FLAG",true);         
      this.$store.dispatch("couponModule/getCoupon",{
        couponId
      }).then(res => { 
        
        //this.loading = false;                  
        if(res) {
          //this.disable = true; 

        }


      });

    }
  }
};
</script>
<style lang="less">
  
</style>
<style lang="less" scoped>
.coupon {
	background: #fff;

}
.coupon-wrap {
	
}
  .coupon-wrap__theme {
  	width: 356px;
  	min-height:100vh;
  	margin: 0 auto;
  	position: relative;
    text-align: center;
    background: #ffffff;
  	.coupon-wrap__theme_img {
  		padding: 15px 0;
  	}
  	.coupon-wrap_img {
  		width: 356px;
  		height:120px;
  	}
  	.coupon_content {
  		position: absolute;
  		z-index: 10;
  		height: 30px;
      width: 100%;
      text-align: center;
  		line-height: 30px;
  		top:30px;
  		//left: 27%;
  		/* transform: translate(-50%); */
  	}
    .get_coupon {
      width: 100%;
      height: 38px;
      color: #fff;
      font-size: 17px;

    }
    .disabled_gray {
      background: #B9B9B9 !important;
    }
  	.coupon_size {
  		font-size: 15px;
  		color: #FFFFFF;
  	}
  	.coupon_price {
		font-size: 30px;
		color: #fff;
  	}
  	.coupon_opacity {
  		opacity: 0.65;
  	}
  	.coupon-details {
  		font-size: 13px;
  		color: #fff;
  	}
  }
</style>