<template>
    <view class="content">
        <view class="content-border">
        	<view v-for="(item, idx) in adverts" :key="item.cover">
        	    <image class="campusBanner" :src="item.cover" mode="widthFix"></image>
        	</view>
        	<view class="recommend"></view>
        	<!-- tab -->
        	<view class="indexTab">
        	    <view class="indexTab-item" :class="{active : tabType == item.used}" @tap="orderTab" v-for="(item, index) in tabList" :key="index" :data-state="(item.used)">
        			<view class="indexTab-title">
        				 {{ item.title }}
        			</view>
        			<view class="indexTab-number">
						<block v-if="isUser">({{item.used == 0 ? '剩余' + numbers + '次' : count + '张'}})</block>
        			</view>
        	    </view>
        	</view>
        	
			<!-- 可兑换 -->
			<block v-if="tabType == 0">
				<view v-if="isUser">
					<block v-if="giftPackArr.length > 0">
						<view class="film" v-for="(item, index) in giftPackArr" :key="index">
							<view class="filMargin">
								<view class="filmTitle">
									{{item.title}}
								</view>
								<view class="filmList">
									<view class="filmList-top">
										<view class="filmList-top-name">
											{{ item.two_title || '-' }}<text>{{ item.description || '-'}}</text>
										</view>
									   <view class="filmList-top-price" @click="judgeGeneral(item.activity_month_category_id, item.is_choose)">
											<text>立即</text>
											<text>兑换</text>
										</view>
									</view>
									<view class="filmList-text">
										<text>{{ item.name }}</text>
									</view>
									<view class="filmList-tips">兑换前请仔细阅读详细信息。</view>
									<view class="filmList-more" @click="moreClick(index)">详细信息<image src="/static/icon/giftPack-icon-yellow.png" class="filmList-more-icon" :class="{active: item.schemesShow }" mode="aspectFill"></image></view>
									
									<view class="filmList-show" v-if="item.schemesShow">
										<rich-text :nodes="item.content"></rich-text>
									</view>
								</view>
							</view>
						</view>
					</block>
					<!-- 列表为空 -->
					<view class="campusTips" v-else>
					    <view class="campusTips-cont">
					    	<image src="/static/img/giftPack-null.png" mode="aspectFill"></image>
					    	<view>暂无权益</view>
					    </view>
					</view>
				</view>
				<view class="campusTips" v-else>
				    <view class="campusTips-cont">
				    	<image src="/static/img/giftPack-null.png"></image>
				    	<view>请您先登录，进行权益查看~</view>
						<navigator hover-class="none" url="/pages/giftPack/signin" class="campusTips-cont-go">立即登录</navigator>
				    </view>
				</view>
			</block>
			
			<!-- 已兑换 -->
			<block v-if="tabType == 1">
				<view v-if="isUser">
					<block v-if="couponArr.length > 0">
						<view class="coupon" v-for="(item, index) in couponArr" :key="index">
							<view class="couponItem">
								<view class="couponItem-cont">
									<view class="couponItem-top">
										<view class="couponItem-cont-number">
											￥<text>{{item.price}}</text>
										</view>
									   <view class="couponItem-cont-name">
											<view class="nowrap couponItem-cont-title">
												{{item.name}}
											</view>
											<view class="couponItem-cont-show" @click="moreCoupon(index)">
												详细信息<image src="/static/icon/giftPack-icon.png" class="couponItem-cont-icon" :class="{active: item.couponShow }" mode="aspectFill"></image>
											</view>
										</view>
									</view>
									<navigator class="couponItem-btn" hover-class="none" :url="'/pages/giftPack/details?id=' + item.id">
										立即使用
									</navigator>
								</view>
								<view class="couponItem-cont-text" v-if="item.couponShow">
									<rich-text :nodes="item.remark"></rich-text>
								</view>
							</view>
						</view>
					</block>
					<!-- 列表为空 -->
					<view class="campusTips" v-else>
					    <view class="campusTips-cont">
					    	<image src="/static/img/giftPack-null.png"></image>
					    	<view>可使用的权益暂时没有啦~</view>
							<navigator hover-class="none" url="/pages/giftPack/myCoupon" class="campusTips-cont-go">我的优惠券</navigator>
					    </view>
					</view>
				</view>
				<view class="campusTips" v-else>
				    <view class="campusTips-cont">
				    	<image src="/static/img/giftPack-null.png"></image>
				    	<view>请您先登录，进行优惠券查看~</view>
						<navigator hover-class="none" url="/pages/giftPack/signin" class="campusTips-cont-go">立即登录</navigator>
				    </view>
				</view>
			</block>
        </view>
		
        <!-- 按钮 -->
		<view class="campusBtn">
			<navigator url="/pages/giftPack/index" hover-class="none" class="campusBtn-go active">
				<image class="campusBtn-iocn" src="/static/img/giftPack-user00_active.png" mode="widthFix"></image>
				<view class="campusBtn-name">
					活动首页
				</view>
			</navigator>
			<navigator url="/pages/giftPack/user" hover-class="none" class="campusBtn-go">
				<image class="campusBtn-iocn" src="/static/img/giftPack-user01.png" mode="widthFix"></image>
				<view class="campusBtn-name">
					个人中心
				</view>
			</navigator>
		</view>
		
		
		<!-- 是否兑换弹出 -->
		<view class="tipsBack" v-if="generalShow"></view>
		<view class="tipsCont" v-if="generalShow">
			<view class="tipsWhite">
				<image class="tipsCont-img" src="/static/img/dhImg.png" mode="widthFix"></image>
				<view class="tipsWhite-top">
					<view class="tipsWhite-name">
						兑换权益提示
					</view>
					<view class="tipsWhite-text">
						<text>兑换权益前请仔细阅读，本权益项下的</text>
						<text>【详细信息】。确认兑换后，您本月将不能</text>
						<text>换取其他权益。如确定请点击【立即兑换】</text>
					</view>
				</view>
				<view class="tipsWhite-btn">
					<view class="tipsWhite-btn-go" @click="generalShow = false">
						暂不兑换
					</view>
					<view class="tipsWhite-btn-go" @click="payment">
						立即兑换
					</view>
				</view>
			</view>
		</view>
		
    </view>
</template>

<script>
    import { index, coupon, monthsChoose } from '@/apis/interfaces/giftPack'
    export default {
        data() {
            return {
				isUser      : false,  // 用户是否登录
				giftPackArr : [],
                adverts     : [],
				couponArr   : [],
				numbers     : '',
				count       : '',
				
				//Tab列表
				tabList     : [
				    { title : "可兑换", used: 0 },
				    { title : "已兑换", used: 1 }
				],
				tabType     : 0, //卡券状态
				generalId   : '', //卡券id
				generalShow : false //卡券兑换提示
            }
        },
        
        // 生命周期函数--监听页面加载
        onLoad(options) {},
    
        // 生命周期函数--监听页面显示
        onShow() {
            // 存储环境-月兑活动
            getApp().globalData.envType = 'giftPEnv'
            
			if(uni.getStorageSync("token")) {
				this.isUser = true
			}
			
			// 获取首页数据
			this.indexInfo()
			
        },
        methods: {
            // 首页数据
            indexInfo() {
				if(this.tabType == 0) {
					// 获取首页数据
					index().then(res=>{
						var listData = res.categories
						for(let val in listData){
							listData[val].schemesShow = false
						}
						
						console.log(listData)
						this.giftPackArr = listData
						this.numbers     = res.numbers
						this.count       = res.coupons_count
						this.adverts     = res.adverts
					}).catch(err=>{})
				} else {
					if(uni.getStorageSync("token")) {
						// 获取优惠券数据
						coupon().then(res=>{
							var listData = res.data 
							for(let val in listData){
								listData[val].couponShow = false
							}
							this.couponArr = listData
						}).catch(err=>{})
					}
					
				}
            },
            
            // 处理未登录时的转跳
            userNav(url){
                let pageUrl = url
                if(uni.getStorageSync("token")) {
                    uni.navigateTo({
                        url: pageUrl
                    })
                    return
                }
                // 去登录
                uni.navigateTo({
                    url: '/pages/giftPack/signin'
                })
            },
			
			// tabs 选项卡
			orderTab(e){
				let state = e.currentTarget.dataset.state
				this.tabType = state
				
				// 获取首页数据
				this.indexInfo();
			},
			
			// 可兑换信息展开
			moreClick(index) {
				this.giftPackArr[index].schemesShow = !this.giftPackArr[index].schemesShow
			},
			
			// 已兑换细信息展开
			moreCoupon(index) {
				this.couponArr[index].couponShow = !this.couponArr[index].couponShow
			},
			
			// 兑换按钮
			judgeGeneral(id, can) {
				this.generalId   = id
				if(!can) {
					this.generalShow = !this.generalShow
					return
				}
				uni.navigateTo({
					url: '/pages/giftPack/list?id=' + id
				})
			},
			
			// 兑换跳转
			payment(){
				monthsChoose(this.generalId).then(res=>{
					this.generalShow = false
					uni.navigateTo({
						url: '/pages/giftPack/list?id=' + this.generalId
					})
				}).catch(err=>{})
			}
        }
    }
</script>

<style lang="scss" scoped>
    .content {
        background: linear-gradient(to bottom, #fdf5cc, #cbaf7f);
        padding-bottom: 40rpx;
		height: 100vh;
		overflow-y: scroll;
		box-sizing:  border-box
    }
	.content-border {
		border-bottom: 130rpx transparent solid;
	}
    
    // banner
    .campusBanner {
        width: 100%;
    }
    
    // 推荐
    .recommend {
        overflow: hidden;
        margin-top: -60rpx;
        padding: 0 30rpx;
        box-sizing: border-box;
        .recommend-label {
            text-align: center;
            width: calc(50% - 20rpx);
            float: left;
            margin: 0 10rpx 30rpx;
            .recommend-label-img {
                width: 150rpx;
                height: 150rpx;
                margin: 0 auto 10rpx;
                background: linear-gradient(to bottom, #293350, #484e74);
                box-shadow: 0px 8px 6px rgba(249,228,129,.5);
                border-radius: 50%;
                box-sizing: border-box;
                image {
                    width: 80rpx;
                    height: 80rpx;
                    margin: 35rpx;
                }
            }
            .recommend-label-text {
                text {
                    display: block;
                    font-size: 30rpx;
                }
            }
        }
    }
    
    // 列表
    .film {
        width: 100%;
        padding: 0 30rpx;
        box-sizing: border-box;
    }
	.filMargin {
		padding: 0 0 30rpx;
	}
    .filmTitle {
        background: linear-gradient(to right, #feefce, #fbe9c0, #e8d19b);
        line-height: 80rpx;
        box-shadow: -4px 0 10px rgba(134,97,33,.2);
        text-align: center;
        border-radius: 10rpx 10rpx 0 0;
        color: #a47d53;
        margin: 0 20rpx;
    }
    .filmList {
        position: relative;
        background: linear-gradient(to right, #494e75, #27314d);
        box-shadow: 0px 6px 10px rgba(134,97,33,.5);
        border-radius: 10rpx;
        padding: 50rpx 30rpx 30rpx;
        box-sizing: border-box;
        margin-bottom: 20rpx;
        overflow: hidden;
        &:last-child {
            margin-bottom: 0;
        }
        .filmList-tag {
            transform: rotate(45deg);
            position: absolute;
            padding: 10px 0;
            right: -33px;
            top: -10px;
            width: 150px;
            background: red;
            .filmList-tag-text {
                position: absolute;
                color: #FFFFFF;
                right: 20px;
                text-align: center;
                top: 2px;
                font-size: 12px;;
                transform:rotate(-360deg);
            }
        }
    	.filmList-more {
    		font-size: 26rpx;
    		text-align: left;
    		color: #fce2ae;
    		margin-top: 15rpx;
    		line-height: 40rpx;
    		.filmList-more-icon {
    			width: 34rpx;
    			height: 34rpx;
    			vertical-align: -6rpx;
    			margin-left: 5rpx;
    			transition: .2s;
    			&.active {
    				 transform:rotate(-180deg);
    			}
    		}
    	}
    	.filmList-show {
    		font-size: 24rpx;
    		border-radius: 10rpx;
    		background-color: rgba(255,255,255,.1);
    		padding: 20rpx;
    		box-sizing: border-box;
    		margin-top: 20rpx;
    		opacity: .9;
    		color: #fce2ae;
    		text-align: justify;
    		line-height: 42rpx;
    		text {
    			display: block;
    		}
    	}
        .filmList-top {
            display: flex;
    		margin-bottom: 10rpx;
            .filmList-top-name {
                width: calc(100% - 140rpx);
                margin-right: 20rpx;
                color: #fce2ae;
                font-size: 32rpx;
    			margin-top: 10rpx;
                text {
                    display: block;
                    font-size: 25rpx;
                    margin-top: 15rpx;
                }
            }
            .filmList-top-price {
    			position: relative;
                background: linear-gradient(to right, #d3ad68, #cda65f);
                box-shadow: 0px 2px 10px rgba(249,228,129,.5);
                width: 120rpx;
                height: 120rpx;
                border-radius: 50%;
                color: #FFFFFF;
                text-align: center;
                padding-top: 20rpx;
                font-size: 30rpx;
                box-sizing: border-box;
    			&.active {
    				background: linear-gradient(to right, #a1a1a1, #a1a1a1);
    			}
                text {
                    display: block;
                    text-shadow: 0px 6px 10px rgba(134,97,33,.5);
                }
    			.filmList-tag{
    				position: absolute;
    				background: #ff0000;
    				color: white;
    				font-size: 20rpx;
    				top: -10%;
    				left: 20%;
    				width: 120rpx;
    				padding: 0 10rpx;
    				line-height: 40rpx;
    				border-radius: 15rpx;
    				transform: scale(0.58)
    			}
            }
        }
        .filmList-text {
            font-size: 20rpx;
            color: #c1c1c1;
    		// margin-left: -70rpx;
            text {
                display: block;
    			// transform: scale(0.8)
            }
        }
		.filmList-tips {
			font-size: 24rpx;
			color: #c1c1c1;
			margin-top: 30rpx;
		}
    }
	
	// 已兑换
	.coupon {
		padding: 0 30rpx 10rpx;
		box-sizing: border-box;
		.couponItem {
			margin-bottom: 30rpx;
			.couponItem-cont {
				background-color: #caa668;
				border-radius: 10rpx;
				position: relative;
				height: 140rpx;
				overflow: hidden;
				.couponItem-top {
					padding: 30rpx 20rpx;
					box-sizing: border-box;
					position: absolute;
					left: 0;
					top: 0;
					height: 100%;
					background-image: linear-gradient(to right, #fffbf5, #f2e2cc);
					width: calc(100% - 160rpx);
					display: flex;
					border-radius: 0 15rpx 15rpx 0;
					.couponItem-cont-number {
						width: 100rpx;
						line-height: 84rpx;
						color: #a85920;
						text {
							font-size: 54rpx;
						}
					}
					.couponItem-cont-name {
						color: #72411f;
						padding-left: 40rpx;
						box-sizing: border-box;
						width: calc(100% - 100rpx);
						position: relative;
						&::after {
							position: absolute;
							content: '';
							left: 13rpx;
							top: 10%;
							background-color: #ecd5c1;
							width: 2rpx;
							height: 80%;
						}
						.couponItem-cont-title {
							font-size: 30rpx;
						}
						.couponItem-cont-show {
							display: flex;
							font-size: 26rpx;
							padding-top: 13rpx;
							.couponItem-cont-icon {
								width: 34rpx;
								height: 34rpx;
								vertical-align: -6rpx;
								margin-left: 5rpx;
								transition: .2s;
								&.active {
									 transform:rotate(-180deg);
								}
							}
						}
					}
				}
				.couponItem-btn {
					line-height: 140rpx;
					position: absolute;
					right: 0;
					top: 0;
					width: 160rpx;
					height: 100%;
					text-align: center;
					color: #FFFFFF;
					font-size: 30rpx;
				}
			}
			.couponItem-cont-text {
				background-image: linear-gradient(-20deg, #fffbf5, #fbefdf);
				padding: 30rpx;
				box-sizing: border-box;
				color: #bc8863;
				line-height: 48rpx;
				font-size: 24rpx;
				margin-top: -4rpx;
				text-align: justify;
				border-radius: 0 0 15rpx 15rpx;
			}
		}
	}
    
    // 按钮
    .campusBtn {
        text-align: center;
        color: #FFFFFF;
		background-color: #fff;
		display: flex;
		position: fixed;
		width: 100%;
		height: 130rpx;
		z-index: 999;
		left: 0;
		bottom: 0;
		font-size: 28rpx;
		.campusBtn-go {
			flex: 2;
			padding-top: 20rpx;
			.campusBtn-iocn {
				width: 44rpx;
			}
			.campusBtn-name {
				color: #abaeb2;
			}
			&.active .campusBtn-name {
				color: #2b3452;
			}
		}
    }
	
	// tab
	.indexTab {
		display: flex;
		margin-bottom: 30rpx;
		.indexTab-item {
			text-align: center;
			font-size: 34rpx;
			flex: 2;
			padding-bottom: 20rpx;
			position: relative;
			color: #8c919f;
			&::after {
				position: absolute;
				content: '';
				left: calc(50% - 20rpx);
				bottom: 0;
				width: 40rpx;
				height: 8rpx;
				background-color: transparent;
				border-radius: 40rpx;
			}
			&.active::after {
				background-color: #27314d;
			}
			&.active {
				color: #27314d;
				font-weight: 600;
			}
			.indexTab-title,
			.indexTab-number {
				display: inline-block;
			}
		}
	}
	
	.campusTips {
		padding: 30rpx;
		box-sizing: border-box;
		.campusTips-cont {
			background-color: #fff;
			border-radius: 20rpx;
			text-align: center;
			padding: 80rpx;
			box-sizing: border-box;
			color: #9c7557;
			image {
				width: 340rpx;
				height: 280rpx;
				margin-bottom: 30rpx;
			}
			.campusTips-cont-go {
				display: inline-block;
				border: #9c7557 2rpx solid;
				line-height: 66rpx;
				padding: 0 40rpx;
				margin-top: 30rpx;
				font-size: 28rpx;
				border-radius: 90rpx;
			}
		}
	}
	
	// 是否兑换弹出
	.tipsBack {
		position: fixed;
		width: 100vw;
		height: 100vh;
		left: 0;
		top: 0;
		z-index: 9;
		background-color: rgba(0, 0, 0, .8);
	}
	.tipsCont {
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-box-pack: center;
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		z-index: 10;
		padding: 0 10%;
		box-sizing: border-box;
		text-align: center;
	}
	
	.tipsWhite {
		background-color: #ffffff;
		border-radius: 20rpx;
		overflow: hidden;
	}
	
	.tipsWhite-top {
		padding: 30rpx;
		box-sizing: border-box;
		text-align: center;
	}
	
	.tipsCont-img {
		width: 40%;
		margin-top: 30rpx;
	}
	
	.tipsWhite-name {
		text-align: center;
		color: #111111;
		font-size: 34rpx;
		font-weight: 600;
		margin-bottom: 15rpx;
	}
	
	.tipsWhite-text {
		font-size: 26rpx;
		color: #666666;
		line-height: 48rpx;
		text {
			display: block;
		}
	}
	
	.tipsWhite-btn {
		display: flex;
		padding: 20rpx 10rpx 30rpx;
		box-sizing: border-box;
		.tipsWhite-btn-go {
			flex: 2;
			color: #fff;
			margin: 0 15rpx;
			height: 80rpx;
			line-height: 80rpx;
			text-align: center;
			border: 2rpx solid #F6F6F6;
			background-color: #27314d;
			border-radius: 10rpx;
			&:first-child {
				color: #333333;
				background-color: #ffffff;
				border: 2rpx solid #cccccc;
			}
		}
	}
</style>
