<template>
	<view class="tab-b">
		<view class="tab-b-c list-item"  >
			
			<block v-for="(item,index) in list" :key="index" >
				
				<view class="item"    @click="bindChecked(index,item.checked)">
					<view class="ticket-content" >
						<view class="content">
							<view class="ticket-img">
								<!-- 商品券 -->
								<image src="/static/images/cof_ico.png" v-if="item.ticket.type==1" class="img" mode="aspectFill"></image>
								<!-- 课程券 -->
								<image src="/static/images/fit_ico.png" v-if="item.ticket.type==2" class="img" mode="aspectFill"></image>
								<!-- 剧场活动,早鸟会员 -->
								<image src="/static/images/soci_ico.png" v-if="item.ticket.type==3||item.ticket.type==4" class="img" mode="aspectFill"></image>
							</view>
							<view class="ticket-info"  >
								 

								<view class="ticket-name">
									<block v-if="item.ticket.type==1 && item.ticket.limitGoodsId>0">{{item.ticket.limitGoodsId}}</block>
									<block v-else>{{item.ticket.name}}</block> 
								</view> 
								<view class="ticket-expire" v-if="item.ticket.goodsList.length>0">可兑换商品:
								<block v-for="(goods,goodsIndex) in item.ticket.goodsList">
									<block v-if="goodsIndex>0">
										,{{goods.name}}
									</block>
									<block v-else>{{goods.name}}</block>
								</block></view>
								<view class="ticket-expire" v-else>不限商品</view> 
								<view class="ticket-expire" >有效期：{{item.startTime}} 至 {{item.endTime}}</view> 
						 
								
								<view class="ticket-expire">
									{{item.ticket.intro}}
								</view>
							</view>
							 
							<view class="ticket-status-st used" >
								
								<view class="ticket-st" >
								{{item.status==5?"待使用":""}}
								{{item.status==6?"待核销":""}}
								{{item.status==7?"已核销":""}}
								{{item.status==8?"已取消":""}}
								
								
								</view>
							</view>
						</view> 
					</view>
					<view class="ticket-splite">
						<view class="left"></view>
						<view class="mid"></view>
						<view class="right"></view>
					</view>
					
					<view class="ticket-other">
							
						  
						<!-- 	<view class="btn">
							<button  @click="onViewTicket(it.list[0].hxCode)" class="btn-user" v-if="it.qty==1 && it.list[0].status==6">使用</button> 
								<button  @click="onViewTicketMore(it)" class="btn-user" v-if="it.qty>1">点击展开</button>
							</view> -->
						 
					</view> 
				</view>
									 
				 
			</block>
			
			
			<!-- <view class="coupon-foot flex-grow-1" v-if="item.checked">
				<view class="box-pack-between">
					<view class="mrt16 flex flex-grow-1">
						<text style="min-width: 190rpx;">指定商品：</text>
						<view class="flex-grow-1">
							<view class="box-pack-between" v-for="(items,index) of item.goods"> {{items.name}}
								<text style="color: red;">￥{{items.price}}</text>
							</view>
						</view>
					</view>
				</view>
			</view> -->
		</view>
		
		<!-- #ifdef MP-ALIPAY -->
		<view class="ft22" style="margin: 20rpx; color: red;">
			<text>*提示：商家劵无法使用余额支付,请选择支付宝支付</text>
		</view>
		<!-- #endif -->
		
		<view class="btn flex-center" @click="back">
			不使用优惠劵
		</view>
		
	</view>
</template>
<script>
	export default {
		data() {
			return {
				active: 1,
				userInfo: {},
				list: [],
				checked: -1,
				check_index:1,
				state:''
			}
		},
		
		onLoad(e) {
			this.userInfo = uni.getStorageSync('userInfo')
			this.total_price = Number(e.total_price);
			this.state = e.state||'';
			let check_index = 1;
			if(e.pay_index==0){
				// #ifdef MP-ALIPAY
				check_index = 2;
				// #endif
			}else{
				check_index = e.check_index
			}

			this.check_index = check_index;
			this.getData();
		},
		
		methods: {
			back(e) {
				let pages = getCurrentPages(); //获取所有页面栈实例列表
				let nowPage = pages[pages.length - 1]; //当前页页面实例
				let prevPage = pages[pages.length - 2]; //上一页页面实例
				prevPage.$vm.coupon_id = ""; //修改上一页data里面的sh参数值为100
				prevPage.$vm.coupon_price = 0;
				prevPage.$vm.activity = '';		
				prevPage.$vm.voucherCode = '';
				prevPage.$vm.coupon_full =''
				uni.navigateBack({
					delta: 1
				})
			},

			bindChecked(index, checked) {
				if (checked) {
					this.checked = index;
					let pages = getCurrentPages(); //获取所有页面栈实例列表
					let nowPage = pages[pages.length - 1]; //当前页页面实例
					let prevPage = pages[pages.length - 2]; //上一页页面实例
					prevPage.$vm.coupon_id = this.list[index].id; //修改上一页data里面的sh参数值为100
					
					let cartList=prevPage.$vm.carInfo.list;
					let price=0;
					for(var i=0;i<cartList.length;i++){
						 if(this.list[index].ticket.limitGoodsId==''){
							 price=cartList[i].price;
							 break;
						 }else if(this.list[index].ticket.limitGoodsId.indexOf(cartList[i].goods_id)>=0){
							 price=cartList[i].price;
							 break;
						 }
					}
					 
					prevPage.$vm.coupon_price = Number(price);
					
					console.log('carInfo',prevPage.$vm.carInfo);
					prevPage.$vm.activity = this.list[index].activity||'';
					prevPage.$vm.voucherCode = this.list[index].voucherCode||'';
					prevPage.$vm.coupon_full = this.list[index].full||'';
					uni.navigateBack({
						delta: 1
					})
				} else {
					uni.showToast({
						title: "不符合使用要求",
						icon: "none"
					})
				}
			},

			onChangeTab(index) {
				if (index != this.active) {
					this.active = index
				}
			},
			
			getData() {
				this.$http.request('xcx/payTicket', {
					user_id: uni.getStorageSync('user_id'),
					// store_id: uni.getStorageSync('store_id'),
					// is_use: this.state,   //1堂食 2外卖 3自提
				}).then(res => {
					for (let s of res.data) {
					 s.checked = true;
					};
					this.list = res.data
					console.log(this.list);
				})
			}
			
		}
	}
</script>


<style lang="scss">
	@import "./use-coupon-list.scss";	
	page {
		background-color: #F4F5F7;
	}
	

	.btn {
		display: block;
		border: 1rpx solid #ddd;
		color: #555;
		padding: 16rpx;

		background: #fff;
		border-radius: 10rpx;
		text-align: center;
		width: 680rpx;
		margin: 0 auto;
		height: 80rpx;
	}

	.content {
		position: relative;
	}

	.iconfont-rund {
		width: 32rpx;
		height: 32rpx;
		border: 1rpx solid #999;
		border-radius: 50%;
	}

	.check-box {
		color: #007AFF;
	}

	.tab-h {
		background-color: #fff;
		position: sticky;
		top: 0;
		z-index: 100
	}

	.tab-b-c {
		margin-bottom: 30rpx;
	}

	.tab-h .item {
		height: 100px;
		position: relative;
		flex: 1;
		text-align: center;
	}

	.tab-h .item .title {
		font-size: 28rpx;
		line-height: 88rpx;
		font-weight: 500;
	}

	.tab-h .item.active::after {
		content: "";
		display: block;
		height: 4rpx;
		width: 40rpx;
		border-radius: 2rpx;
		background-color: #247EFF;
		position: absolute;
		bottom: 5rpx;
		left: 50%;
		transform: translateX(-50%)
	}

	.tab-h .item.active .title {
		font-size: 32rpx;
		font-weight: 600;
		color: #247EFF;
	}

	.tab-b {
		padding: 30rpx 25rpx 0;

	}

	.tab-b .item {
		width: 100%;
		height: 160px;
		position: relative;
		// margin-left: 10px;
	}

	.tab-b .item .coupon-bg {
		display: block;
		width: 100%;
		height: 100%;
		position: absolute;
		left: 0;
		top: 0;
		z-index: 0;
	}

	.tab-b .item .content {
		position: relative;
		z-index: 10;
	}

	.tab-b .item .content .left-bar {
		flex: none;
		width: 200rpx;
		height: 180rpx;
		text-align: center;

	}

	.tab-b .item .content .left-bar .money {
		font-size: 58rpx;
		line-height: 70rpx;
		color: #fff;
		font-weight: bold;
	}

	.tab-b .item .content .left-bar .unit {
		font-size: 24rpx;
		color: #fff;
		font-weight: 500;
		margin-left: 6rpx;
	}

	.tab-b .item .content .left-bar .desc {
		font-size: 24rpx;
		line-height: 33rpx;
		margin-top: 16rpx;
		color: #fff;
	}

	.tab-b .item .content .right-bar {
		/* width: 500rpx; */
		box-sizing: border-box;
		height: 180rpx;
		padding: 0 25rpx;
	}

	.tab-b .item .content .right-bar .title-block {
		height: 106rpx;
		border-bottom: 1rpx dashed #E5E5E5;
	}

	.tab-b .item .content .right-bar .title-block .tips {
		flex: none;
		height: 40rpx;
		background: #247EFF;
		border-radius: 4rpx;
		font-size: 20rpx;
		color: #fff;
		padding: 0 10rpx;
		line-height: 40rpx;
		margin-right: 16rpx;
	}

	.tab-b .item .content .right-bar .title-block .title {
		font-size: 28rpx;
		color: #333;
		font-weight: bold;
	}

	.tab-b .item .content .right-bar .time {
		font-size: 20rpx;
		color: #999;
		height: 73rpx;
		line-height: 73rpx;
	}

	.more-down {
		width: 33rpx;
		height: 33rpx;
	}

	.more-down-deg {
		transform: rotate(180deg);
		animation: showPopUp 0.2s;
		animation-fill-mode: forwards;
	}

	@keyframes showPopUp {
		0% {
			transform: rotate(0deg);
		}

		100% {
			transform: rotate(180deg);
		}
	}

	.CouponContentC {
		color: #999999;
	}

	.coupon-foot {
		background: #FFFFFF;
		padding: 20rpx;
		font-size: 28rpx;
		border-bottom: 1rpx solid #F1F1F1;
	}
</style>
