<template>
	<!-- -----------------------适用于下单页面选择券的时候展示券列表-------------------------- -->
	<u-popup :show="showPop" :round="20" closeable @close="showPop=false">
		<view class="son-wrap">
			<view class="head">
				<view class="headlist" v-for="(item,index) of navTitle" :key="index" :class="{on:active==index}" @click="navClick(index)">
					<text>
						{{item}}
					</text>
				</view>
			</view>
			<!------------------------------------可用-------------------------------------->
			<view class="middle" v-if="active==0">
				<checkbox-group @change="checkboxChange" v-if="masterSlaveCouponList&&masterSlaveCouponList.length>0">
					<view v-for="(item,index) of masterSlaveCouponList" :key="index" class="list-box">
						<label>
							<view>
								{{item.couponName}}
								<checkbox :value="JSON.stringify(item)" :checked="item.couponId==chooseCoupon.couponId" class="blue" />
							</view>
							<view>
								{{item.couponRule}}
							</view>
							
							<view>
								{{item.useStartDate}}-{{item.useEndDate}}
								<text>
									<text>¥</text>{{parseFloat(item.savedMoney.toFixed(2))}}
								</text>
							</view>
						</label>
					</view>
				</checkbox-group>
				<view class="empty" v-else>
					空空如也...
				</view>
			</view>
			<!-- -------------------------------不可用-------------------------------- -->  
			<view v-if="active==1" class="middle">
				<view v-if="unusableCouponList&&unusableCouponList.length>0">
					<view v-for="(item,index) of unusableCouponList" :key="index" class="list-box">
						<view>
							{{item.couponName}}
						</view>
						<view>
							{{item.couponRule}}
							<text v-if="item.savedMoney">
								<text>¥</text>{{parseFloat(item.savedMoney.toFixed(2))}}
							</text>
						</view>
							
						<view>
							{{item.useStartDate}}-{{item.useEndDate}}
						</view>
					</view>
				</view>
				<view class="empty" v-else>
					空空如也...
				 </view> 
			</view>
		</view>
		<view class="bottom-sure" @click="showPop=false">
			确定
		</view>
	</u-popup>
	
</template>

<script>

export default{
  props:['couponData','chooseCouponObj'],
  watch: {
    couponData:{//劵列表
      handler(newValue, oldValue){
        if(newValue){
          //可用优惠券去重
          this.masterSlaveCouponList=[]
          if(newValue.masterSlaveCouponList){
            newValue.masterSlaveCouponList.forEach(item=>{
						  if(!this.masterSlaveCouponList.find(item2=>item2.couponId==item.couponId)){
						    this.masterSlaveCouponList.push(item)
						  }
            })
          }
          this.unusableCouponList=newValue.unusableCouponList
        }
      },
      deep:true,
      immediate:true
    },
    chooseCouponObj:{//选中的券
      handler(newValue, oldValue){
        if(newValue){
          this.chooseCoupon=this.chooseCouponObj
        }
      },
      deep:true,
      immediate:true
    },
  },
  data(){
    return{
      active:0,//导航栏下标
      showPop:false,//控制弹窗显示隐藏
      masterSlaveCouponList:[],//可用优惠券列表
      unusableCouponList:[],//不可用优惠券列表
      chooseCoupon:'',//选中的劵
      navTitle:['可用','不可用'],//导航标题
    }
  },
  methods:{
    //---导航栏点击
    navClick(index){
      this.active=index
    },
    //---多选框值变化
    checkboxChange(e){
      let value=e.detail.value
      if(value.length>0){
        let obj=JSON.parse(value[value.length-1])
        this.$emit('couponChoose',obj)
      } 
      if(value.length==0){
        this.$emit('couponChoose','')
      }
    }
  }
}

</script>

<style scoped="scoped" lang="scss">
.son-wrap{
	height:80vh;
	display: flex;
	flex-direction:column;
}
.head{
	display: flex;
}
.headlist{
	width: 50%;
	height: 90rpx;
	line-height: 90rpx;
	text-align: center;
	font-size:30rpx;
}
.headlist.on text{
	border-bottom: 6rpx solid $theme;
	color: $theme;
	font-weight: bold;
}
.middle{
	padding:24rpx 24rpx 100rpx 24rpx;
	background:#f5f5f5;
	flex: 1;
	overflow-y: scroll;
}
.list-box{
	background: #FFFFFF;
	padding:24rpx;
	border-radius:10rpx;
}
.middle .list-box:not(:first-child){
	margin-top:20rpx;
}
.list-box view:not(:first-child){
	margin-top:20rpx;
}
.list-box view{
	display: flex;
	justify-content: space-between;
}
.list-box view:first-child{
	font-weight: bold;
}
.list-box view:last-child{
	color: #999999;
	font-size:24rpx;
}
.list-box text{
	color:#f9690e;
	font-size:32rpx;
	font-weight: bold;
}
.list-box text text{
	font-size:24rpx;
	font-weight: 400;
}
.empty{
	padding:160rpx 0;
	text-align: center;
	color: $red;
}
.bottom-sure{
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	background:$theme;
	font-size:32rpx;
	font-weight: bold;
	color: #ffffff;
}
</style>
