<template>
    <view class="content">
        <!-- 卡券tab -->
        <view class="couponTab">
            <view class="couponTab-label" :class="{active : stateType == item.used}" @tap="orderTab" v-for="(item, index) in couponLabel" :key="index" :data-state="(item.used)">
                {{ item.title }}
                <!-- <text v-if="item.used == 0">({{couponLabel.length}}张)</text>
                <text v-else-if="item.used == 1">({{couponLabel.length}}张)</text>
                <text v-else>({{couponLabel.length}}张)</text> -->
            </view>
        </view>
        
        <!-- 卡券列表 -->
        <view class="coupon" v-if="couponsArr.length > 0">
            <view hover-class="none" class="couponList" v-for="(item, index) in couponsArr" :key="index">
                <!-- 优惠券 -->
                <image class="couponList-left" v-if="item.status == 0" src="/static/img/draw_coupon.png" mode="widthFix"></image>
                <image class="couponList-left" v-else src="/static/img/draw_coupon_active.png" mode="widthFix"></image>
                <view class="couponList-center">
                    <view class="nowrap couponList-title">{{item.name}}</view>
                    <view class="nowrap couponList-used">活动来源： {{item.activity_name}}</view>
                    <view class="couponList-time">{{item.startTime}} 至 {{item.endTime}}</view>
                </view>
                <navigator hover-class="none" :url="'couponDetails?id=' + item.id" class="couponList-right" v-if="item.status == 0">
                    去使用
                </navigator>
                <view class="couponList-right couponList-right-active" v-else>
                    {{item.status == 1 ? '已使用' : '已过期'}}
                </view>
                <!-- v-if="item.status == 1" -->
                <!-- <image 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 class="pagesLoding" v-if="lodingStats">
                <block v-if="page.has_more">
                    <image class="pagesLodingIcon" src="/static/icons/refresh_loding.gif" mode="widthFix"></image>加载中...
                </block>
                <block v-else>
                    没有更多了~
                </block>
            </view>
        </view>
        
        <!-- 优惠券为空 -->
        <view class="pack-center pages-hint" v-else>
            <image src="/static/img/null_icon.png"></image>
            <view>暂无优惠券</view>
        </view>
    </view>
</template>

<script>
    import { coupons } from '@/apis/interfaces/draw'
    export default {
        data() {
            return {
                couponsArr  : [],   //优惠券列表
                count       : '',   //优惠券-张数
                //优惠券Tab列表
                couponLabel : [
                    { title : "未使用", used: 0 },
                    { title : "已使用", used: 1 },
                    { title : "已过期", used: 2 }
                ],
                stateType   : '0', //卡券状态
                type        : '',  //卡券来源
            }
        },
        
        // 生命周期函数--监听页面加载
        onLoad(options) {
            
        },
    
        // 生命周期函数--监听页面显示
        onShow() {
            // 存储环境-抽奖活动
            getApp().globalData.envType = 'drawEnv'
            
            // 获取优惠券列表
            this.couponInfo();
        },
        methods: {
            // 订单列表
            couponInfo(page){
                coupons({
                    status: this.stateType,
                    page  : page || ''
                }).then(res=>{
                    let listArr = this.couponsArr,
                        newData = []
                    if(page == 1 || page == undefined) listArr = []
                            
                    newData = listArr.concat(res.data)
                    this.couponsArr  = 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/draw/signin'
                                    });
                                }
                            }
                        });
                    }
                })
            },
            
            // tab选择
            orderTab(e){
                this.stateType = e.currentTarget.dataset.state
                // 获取优惠券列表
                this.couponInfo();
            },
            
            // 页面相关事件处理函数--监听用户下拉动作
            onPullDownRefresh() {
                // 获取优惠券列表
                this.couponInfo();
            },
                    
            // 上拉加载
            onReachBottom(){
                this.lodingStats = true
                let pageNumber = this.page.current
                if(this.page.has_more){
                    pageNumber++
                    this.couponInfo(pageNumber)
                }
            }
        }
    }
</script>

<style lang="scss" scoped>
    .couponTab{
        position: fixed;
        width: 100%;
        height: 90rpx;
        line-height: 90rpx;
        z-index: 99;
        left: 0;
        top: 0;
        display: flex;
        box-sizing: border-box;
        background-color: #FFFFFF;
        .couponTab-label {
            flex: 3;
            text-align: center;
            text {
                display: block;
                font-size: 28rpx;
                color: #999999;
                line-height: 54rpx;
            }
            &.active {
                color: #eb4747;
            }
            &.active text {
                color: #ff8b8b;
            }
        }
    }
    
    .coupon {
        width: 100%;
        margin-top: 90rpx;
        padding: 30rpx;
        box-sizing: border-box;
        .couponList {
            background-color: #FFFFFF;
            height: 190rpx;
            border-radius: 20rpx;
            margin-bottom: 30rpx;
            padding: 30rpx;
            box-sizing: border-box;
            position: relative;
            .couponList-left {
                width: 80rpx;
            }
            .couponList-center {
                position: absolute;
                width: 100%;
                left: 0;
                top: 0;
                padding: 30rpx 100rpx 0 140rpx;
                box-sizing: border-box;
                color: #999999;
                font-size: 28rpx;
                .couponList-title {
                    color: #000000;
                    font-size: 30rpx;
                    font-weight: 600;
                    width: 70%;
                }
                .couponList-used {
                    line-height: 54rpx;
                }
            }
            .couponList-right {
                position: absolute;
                width: 120rpx;
                line-height: 50rpx;
                text-align: center;
                right: 25rpx;
                font-size: 28rpx;
                top: 25rpx;
                color: #eb4747;
                border: 2rpx solid #eb4747;
                border-radius: 50rpx;
                &.couponList-right-active {
                    border-color: #ddd;
                    color: #a9a9a9;
                }
            }
        }
    }
</style>
