<template>
  <div class="billFrame">
    <div>
      <div class="van-cell__title" @click="onClick">
        <div class="billFrame-main-icon">
         <div class="billFrame-main-icon_left">
           <div class="billFrame-main_content">优惠券</div>
         </div> 
        </div>
        <div class="billFrame-main-icon_right">
          <div class="billFrame-main-right_words">减{{couponPrice}}元</div>
          <div class="billFrame-main-right_icon">
            <svg class="icon nav-right_icon" aria-hidden="true">
              <use xlink:href="#icon-qianjin"/>
            </svg>
          </div>
        </div>
      </div>
      <div class="billFrame-content">
        <van-popup v-model="show" position="bottom">
          <!-- <van-picker
            show-toolbar
            title="选择优惠券"           
          /> -->
          <p class="select_coupon">优惠券</p>
          <van-radio-group v-model="radio" @change="changeRadio">
            
              <div class="billFrame__dialog" @click="radioClick(0,0.00)">
                <van-radio name="0" >
                <p class="billFrame__dialog_words">不使用优惠券</p>
                </van-radio>
              </div>                       
              <div class="billFrame__dialog" v-for="(coupon,index) in verifyCouponResult" :key="index" @click="(coupon.isCanUse === 1)?radioClick(coupon.id,coupon.couponFee):''">
                <van-radio :name="index+1" :disabled="coupon.isCanUse  === 1?false:true">
                <p class="billFrame__dialog_words" :class="{'billFrame__dialog_green':(coupon.isCanUse === 1)}">{{coupon.couponName}}，满{{coupon.minimumFee}}减{{coupon.couponFee}}元</p>
                <p class="billFrame__dialog_words billFrame__dialog_color">有效期:{{coupon.useStartTime}}~{{coupon.useEndTime}}</p>
               <!--  <p class="billFrame__dialog_words billFrame__dialog_color" v-if="coupon.isCanUse  === 2">订单不支持此优惠券</p> -->
                <p class="billFrame__dialog_words billFrame__dialog_color" v-if="coupon.isOverTime === 1">此优惠券已过期</p>
                <p class="billFrame__dialog_words billFrame__dialog_color" v-if="coupon.isOverTime === 3">此优惠券未到使用时间</p>
                </van-radio> 
              </div>
                      
          </van-radio-group>
        </van-popup>
      </div>
    </div>
  </div>
</template>

<script>
/*
  优惠券类型
  coupon_use_type_monthRent：月租
  coupon_use_type_deviceFee：服务费
  coupon_use_type_waterFee：抵用水费
  coupon_use_type_electricFee：抵用电费
  coupon_use_type_gasFee：抵用气费
  coupon_use_type_propertyFee：抵用物业费
  coupon_use_type_parkingFees：抵用停车费
  coupon_use_type_repairFee：抵用维修费
  coupon_use_type_cleaningFee： 抵用保洁费
  coupon_use_type_movingFee：抵用搬家费
  coupon_use_type_internet：抵用网费
  coupon_use_type_activity：抵用活动费
  coupon_use_type_creditCore：抵用信用积分
  */
//import sailPage from '@/components/sail-page.vue'
import {mapState} from "vuex";
import { Toast } from "vant";
export default {
  components: {
    //sailPage
  },
  computed:{
    ...mapState({
      userCurrentBillInfo:state => state.myBillModule.userCurrentBillInfo,
      useCouponList:state => state.couponModule.userCouponList,
      couponPrice:state => state.myBillModule.couponPrice,
      payForm:state => state.myBillModule.payForm,
      verifyCouponResult: state => state.couponModule.verifyCouponResult            
    })
  },
  props: {
    //  data: {
    //   type: Object,
    //   default: {},
    //   required: true
    // }
  },
  data: function(){
    return {        
      show: false,
      radio: "1",
      verifyForm:{
        billId:null,
        liveId:null,
      }
    };
  },
  methods: {
      radioClick(couponId,couponFee) {      
        this.$store.commit("myBillModule/SET_COUPON_PRICE",couponFee);
        this.$store.commit("myBillModule/SET_COUPON_ID",couponId);
        this.$store.commit("myBillModule/SET_COUPON_FEE",couponFee);
        this.$store.commit("myBillModule/SET_ACTUALGETMONEY",this.payForm.mustGetMoney -couponFee);        
      },
      onClick() {
        Toast.loading('正在加载优惠券，请稍等..')        
        this.verifyForm.billId = this.userCurrentBillInfo.id
        this.verifyForm.liveId = this.userCurrentBillInfo.liveId
        this.$store.dispatch('couponModule/verifyCouponOnCapp',
          this.verifyForm
        ).then(res => {
          if(res.data.code === 10000){
            Toast.clear()
            this.show = !this.show; 
          }
        })                 
      },
      changeRadio(value) {
        // console.log(value)
        this.show = false;     
      }
    }
};
</script>
<style lang="less">
   
  .billFrame{
   .van-radio {
    margin: 10px;
    border-bottom: 1px solid #FAFAFA;
    text-align: left;
    overflow: inherit;

   }
   .van-radio__input {
      height: 33px !important;
   } 
   
   .van-radio-group {
       max-height: 80vh;
       overflow: auto;
   } 
 }
</style>
<style lang="less" scoped>
.billFrame-content {
  .van-picker__columns {
          height: 10px !important;
    }
}

.billFrame {
  background: #fff;
  
  .billFrame-content {
    .select_coupon {      
       height: 40px;
       font-size: 16px;
       line-height: 40px;
       text-align: center;
    }
  }
  .billFrame__dialog {
    text-align: left;
    font-size: 12px;
    z-index: 2002
  }
  .billFrame__dialog_words {
    margin-bottom: 10px;
    height: 10px;
    line-height: 10px;
  }
  .billFrame__dialog_green {
    color:#2BAA76;
  }
  .billFrame__dialog_color {
    color: #ccc;
  }
  .van-cell__title {
    border-bottom: 1px solid #F2F2F2;
      padding-top: 5px;
      display: flex;
      justify-content: space-between;
      .billFrame-main-icon_right {
        display: flex;
      }
      .billFrame-main-icon_left {
        display: flex;
      }
  }
  .billFrame-main_content {
    margin-left: 10px;
    height: 30px;
    line-height: 30px;
    color: #222222;
    font-size: 14px;
  }
  .nav-right_icon {
    font-size: 14px;
    color: #AFAFAF;
    line-height: 30px;
    height: 30px;
    margin-right: 10px;
  }
  .billFrame-main-right_words {
    font-size: 14px;
    height: 30px;
    line-height: 30px;
  }
}

</style>