<template>
    <view>
        <!-- 我的卡券列表 -->
        <view class="coupon" v-if="couponArr.length > 0">
        	<view class="couponCont" :class="{active : item.status != 0}" v-for="(item, index) in couponArr" :key="index">
        		<view hover-class="none" class="couponList" @tap="couponUrl" :data-id="(item.id)">
        			<view class="couponList-left">
        				<image class="couponList-img" src="/static/img/coupon_coupon_img.png"></image>
        				<!-- 优惠券 -->
        				<view class="couponList-icon" v-if="item.type == 'physical'">
        					<image src="/static/img/coupon_icon_01.png"></image>
        				</view>
        
        				<!-- 实物 -->
        				<view class="couponList-icon" v-else>
        					<image src="/static/img/coupon_icon_00.png"></image>
        				</view>
        			</view>
        			<view class="couponList-center" :class="{active : item.used_at != '' || item.status == 0}">
        				<view class="nowrap couponList-title">{{ item.name }}</view>
                        <view class="nowrap couponList-used" v-if="item.status == 0">活动来源： {{item.activity_name}}</view>
        				<view class="couponList-time">{{ item.startTime }} 至 {{ item.endTime }}</view>
        				<view class="couponList-used" v-if="item.used_at != ''">使用时间：{{item.used_at}}</view>
        			</view>
        			<block v-if="item.status == 0">
        				<view class="couponList-right">
        					去使用
        				</view>
        			</block>
        			<image v-if="item.status == 1" src="/static/img/coupon_tips_00.png" class="coupoTips"></image>
        			<image v-if="item.status == 2" src="/static/img/coupon_tips_01.png" class="coupoTips"></image>
        		</view>
        	</view>
        </view>
        
        <!-- 优惠券为空 -->
        <view class="pack-center pages-hint" v-else>
        	<image src="/static/img/coupon_tips.png"></image>
        	<view>暂无优惠券</view>
        </view>
    </view>
</template>

<script>
    import { couponArr } from '@/apis/interfaces/user'
    export default {
        data() {
            return {
                couponArr   : '',    //卡券组列表
                id          : '',    //优惠券携带id
                status      : '',    //优惠券携带状态
                page        : 1,     //分页
                lodingStats : false  //加载状态
            }
        },
        
        // 生命周期函数--监听页面加载
        onLoad(options) {
            this.id      = options.id
            this.status  = options.status
        },
    
        // 生命周期函数--监听页面显示
        onShow() {
            // 存储环境-中石油活动
            getApp().globalData.envType = 'oilEnv'
            
            // 获取卡券组列表
            this.couponInfo();
        },
        
        methods: {
            // 卡券列表
            couponInfo(page) {
                couponArr({
                    activityId: this.id,
                    status: this.status,
                    page: page || ''
                }).then(res=>{
                    let listArr = this.couponArr,
                        newData = []
                    if(page == 1 || page == undefined) listArr = []
        
                    newData = listArr.concat(res.data)
                    this.couponArr   = newData
                    this.page        = res.page
                    this.lodingStats = false
                    uni.stopPullDownRefresh()
                }).catch(err => {
                    if (!err.login) {
                        uni.showModal({
                            title: '用户登录已过期',
                            content: '请重新登录',
                            showCancel: false,
                            success: res => {
                                if (res.confirm) {
                                    uni.redirectTo({
                                        url: '/pages/oil/signin'
                                    });
                                }
                            }
                        });
                    }
                })
            },
            
            // 优惠券跳转
            couponUrl(e) {
                let newId     = e.currentTarget.dataset.id
                uni.navigateTo({
                    url: '/pages/oil/details?id=' + newId
                })
            },
            
            // 页面相关事件处理函数--监听用户下拉动作
            onPullDownRefresh() {
                // 获取团购列表
                this.couponInfo();
            },
        
            // 上拉加载
            onReachBottom(){
                this.lodingStats = true
                let pageNumber = this.page.current
                if(this.page.has_more){
                    pageNumber++
                    this.couponInfo(pageNumber)
                }
            }
        }
    }
</script>

<style>
    page {
        background-color: #e83241;
    }
    
    .coupon {
        margin-top: 30rpx;
    }
    
    .couponCont {
        margin: 20rpx;
        width: calc(100% - 40rpx);
        border-radius: 10rpx;
        overflow: hidden;
    }
    
    .couponList {
        background: #fdf4ed;
        width: 100%;
        height: 160rpx;
        position: relative;
    }
    
    .couponList-left {
        position: relative;
        left: 0;
        top: 0;
        width: 160rpx;
        height: 160rpx;
    }
    
    .couponList-img {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        z-index: 1;
    }
    
    .couponList-icon {
        position: absolute;
        left: calc(50% - 56rpx);
        top: calc(50% - 50rpx);
        z-index: 2;
        width: 100rpx;
        height: 100rpx;
        background: #fff;
        border-radius: 50%;
        padding: 20rpx;
        box-sizing: border-box;
    }
    
    .couponList-icon image {
        width: 100%;
        height: 100%;
    }
    
    .couponList-center {
        position: absolute;
        left: 180rpx;
        top: 35rpx;
        width: calc(100% - 330rpx);
    }
    
    .couponList-center.active {
        top: 15rpx;
    }
    
    .couponList-title {
        margin-bottom: 10rpx;
        font-size: 28rpx;
        font-weight: 600;
        color: #743e3e;
    }
    
    .couponList-time,
    .couponList-used {
        font-size: 24rpx;
        color: grey;
    }
    
    .couponList-used {
        margin-bottom: 14rpx;
        color: #855757;
    }
    
    .couponList-right {
        background: transparent;
        border: 2rpx solid #fc9f36;
        color: #f39124;
        border-radius: 30rpx;
        width: 110rpx;
        text-align: center;
        height: 50rpx;
        line-height: 50rpx;
        position: absolute;
        right: 20rpx;
        top: 55rpx;
        font-size: 24rpx;
    }
    
    .couponList-right.active {
        background: #dddddd;
    }
    
    .couponMore {
        font-size: 28rpx;
        color: #686868;
        position: relative;
        height: 120rpx;
    }
    
    .couponMore::after,
    .couponMore::before {
        position: absolute;
        content: '';
        height: 20rpx;
        border-radius: 10rpx;
        background: #fff;
        box-shadow: 0 0 20rpx rgba(0, 0, 0, .1);
        z-index: 1;
        height: 30rpx;
    }
    
    .couponMore::after {
        width: calc(100% - 40rpx);
        top: 70rpx;
        left: 20rpx;
    }
    
    .couponMore::before {
        width: calc(100% - 80rpx);
        top: 90rpx;
        left: 40rpx;
    }
    
    .couponMore-text {
        display: flex;
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        z-index: 99;
        height: 80rpx;
        border-radius: 0 0 10rpx 10rpx;
        line-height: 80rpx;
        padding: 0 30rpx;
        box-sizing: border-box;
        background: #fff;
        box-shadow: 0 0 10rpx rgba(0, 0, 0, .1);
    }
    
    .couponMore-title {
        flex: 1;
    }
    
    .couponMore-arrow {
        width: 28rpx;
        height: 28rpx;
        margin-top: 26rpx;
    }
    
    .couponCont.active .couponList-img,
    .couponCont.active .couponList-icon {
        -webkit-filter: grayscale(100%);
        -moz-filter: grayscale(100%);
        -ms-filter: grayscale(100%);
        -o-filter: grayscale(100%);
        filter: grayscale(100%);
        filter: gray;
    }
    
    .coupoTips {
        position: absolute;
        top: 22rpx;
        right: 20rpx;
        z-index: 99;
        width: 120rpx;
        height: 120rpx;
    }
</style>
