<template>
    <view>
        <navigator v-for="(item, idx) in adverts" :key="item.cover" :url="item.url">
            <image class="campusBanner" :src="item.cover" mode="widthFix"></image>
        </navigator>
        <view class="recommend"></view>
		<view class="film" v-for="(item, index) in oilCategories" :key="index">
			<block v-if="item.petros.length > 0">
				<view class="filmTitle">
					{{item.title}}
				</view>
				<navigator hover-class="none" :url="'/pages/oil/buy?id=' + items.activity_petro_id" class="filmList" v-for="(items, indexItem) in item.petros" :key="indexItem">
					<view class="filmList-top">
						<view class="filmList-top-name">
							{{ items.three_title || '-' }}<text>{{ items.two_title || '-'}}</text>
						</view>
					   <view class="filmList-top-price">
							<view v-if="items.button_text != null">
								<view v-for="(btnItem, btnIndex) in items.button_text" :key="btnIndex">{{btnItem}}</view>
							</view>
						</view>
					</view>
					<view class="filmList-text" v-for="(itemsDes, indexDes) in items.description" :key="indexDes">
						<text>{{ itemsDes }}</text>
					</view>
					<view class="filmList-tag" v-if="items.label != null"> <view class="filmList-tag-text">{{items.label || '-'}}</view></view>
				</navigator>
			</block>
		</view>
		
        <!-- 按钮 -->
        <view @click="userNav('/pages/oil/myCoupon')" class="campusBtn">我的优惠券<text>立即查看</text></view>
    </view>
</template>

<script>
    import { index } from '@/apis/interfaces/oil'
    export default {
        data() {
            return {
				oilCategories: '',
                topData     : '',  // 头部推荐
                oilMarket   : [],  // 中石油优惠券
                oilPetro    : [],  // 超市购物券
                adverts     : ''
            }
        },
        
        // 生命周期函数--监听页面加载
        onLoad(options) {},
    
        // 生命周期函数--监听页面显示
        onShow() {
            // 存储环境-中石油新活动
            getApp().globalData.envType = 'oilEnv'
            
            // 获取首页数据
            this.indexInfo();
        },
        methods: {
            // 首页数据
            indexInfo() {
                index().then(res=>{
					 this.oilCategories = res.categories
                     this.adverts       = res.adverts
                }).catch(err=>{
                    // if (!err.login) {
                    //     uni.showModal({
                    //         title: '用户登录已过期',
                    //         content: '请重新登录',
                    //         showCancel: false,
                    //         success: res => {
                    //             if (res.confirm) {
                    //                 uni.redirectTo({
                    //                     url: '/pages/oil/signin'
                    //                 });
                    //             }
                    //         }
                    //     });
                    // }
                })
            },
            
            // 处理未登录时的转跳
            userNav(url){
                let pageUrl = url
                if(uni.getStorageSync("token")) {
                    uni.navigateTo({
                        url: pageUrl
                    })
                    return
                }
                // 去登录
                uni.navigateTo({
                    url: '/pages/oil/signin'
                })
            },
        }
    }
</script>

<style lang="scss" scoped>
    page {
        background: linear-gradient(to bottom, #fdf5cc, #cbaf7f);
        padding-bottom: 100rpx;
    }
    
    // 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 {
                font-weight: 600;
                text {
                    display: block;
                    font-size: 30rpx;
                }
            }
        }
    }
    
    // 列表
    .film {
        width: 100%;
        padding: 10rpx 30rpx;
        box-sizing: border-box;
    }
    .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;
        font-weight: 600;
        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-top {
            display: flex;
            margin-bottom: 10rpx;
            .filmList-top-name {
                width: calc(100% - 160rpx);
                margin-right: 20rpx;
                color: #fce2ae;
                font-size: 34rpx;
				font-weight: bold;
                text {
                    display: block;
                    font-size: 25rpx;
                    margin-top: 10rpx;
					font-weight: normal;
                }
            }
            .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;
                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)
            }
        }
    }
    
    // 按钮
    .campusBtn {
        background: linear-gradient(to right, #474d73, #28314e);
        box-shadow: 0px 6px 10px rgba(188,152,90,.5);
        border-radius: 60rpx;
        line-height: 90rpx;
        height: 90rpx;
        margin: 30rpx 60rpx 0;
        text-align: center;
        color: #FFFFFF;
        text {
            color: #bd9045;
            padding-left: 20rpx;
        }
    }
</style>
