<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">
				<block v-if="giftPackArr.length > 0">
					<navigator class="film" v-for="(item, index) in giftPackArr" :key="index" hover-class="none" :url="'/pages/giftPack/list?id=' + item.activity_month_category_id">
						<view class="film-back" :style="{ backgroundImage: 'url(' + item.cover + ')' }">
							<view class="film-title">{{item.title}}</view>
							<view class="film-btn">去兑换</view>
						</view>
					</navigator>
				</block>
				<!-- 列表为空 -->
				<view class="campusTips" v-else>
				    <view class="campusTips-cont">
				    	<image src="/static/img/giftPack-null.png" mode="aspectFill"></image>
				    	<view>暂无可兑换的卡券</view>
				    </view>
				</view>
			</block>
			
			<!-- 已兑换 -->
			<block v-if="tabType == 1">
				<view class="" 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="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>
</template>

<script>
    import { index, coupon } 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, //卡券状态
            }
        },
        
        // 生命周期函数--监听页面加载
        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=>{
						this.giftPackArr = res.categories
						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
			},
        }
    }
</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: 10rpx 30rpx 20rpx;
        box-sizing: border-box;
		.film-back {
			position: relative;
			border-radius: 20rpx;
			overflow: hidden;
			background-size: 100% 100%;
			background-position: left center;
			height: 180rpx;
			line-height: 180rpx;
			.film-title {
				position: absolute;
				left: 30rpx;
				top: 0;
				color: #FFFFFF;
				font-size: 38rpx;
				font-weight: 600;
			}
			.film-btn {
				position: absolute;
				font-size: 28rpx;
				right: 30rpx;
				top: 60rpx;
				color: #ecc993;
				border: 2rpx solid #ecc993;
				display: inline-block;
				border-radius: 80rpx;
				line-height: 56rpx;
				padding: 0 20rpx;
			}
		}
    }
    
	
	// 已兑换
	.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;
		padding-bottom: 40rpx;
		.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;
			}
		}
	}
</style>
