<template>
    <view class="content">
        <!-- 订单tab -->
        <view class="couponTab">
            <view class="couponTab-label" :class="{active : stateType == item.type}" @tap="orderTab" v-for="(item, index) in couponLabel" :key="index" :data-state="(item.type)">
                {{ item.title }}
            </view>
        </view>
        
        <!-- 订单列表 -->
        <view class="order" v-if="ordersArr.length > 0">
            <view class="orderList" v-for="(item, index) in ordersArr" :key="index">
                <view class="orderList-title">
                    <image class="orderList-icon" src="/static/img/draw_order.png" mode="widthFix"></image>订单号：{{item.orderid}}
                </view>
                <view class="orderList-label">
                    <view class="orderList-item">
                        <text>产品名称</text>{{item.award.title}}
                    </view>
                    <view class="orderList-item">
                        <text>产品价格</text>
                        {{item.amount != 0 ? '￥' + item.amount : '免费兑换'}}
                    </view>
                </view>
                <view class="orderList-tool">
                    <view class="orderList-time">
                        {{item.created_at}}
                    </view>
                    <!-- <navigator hover-class="none" url="orderDetails" class="orderList-btn">
                        详 情
                    </navigator> -->
                </view>
            </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/coupon_tips.png"></image>
        	<view>暂无优惠券</view>
        </view>
    </view>
</template>

<script>
    import { orders  } from '@/apis/interfaces/draw'
    export default {
        data() {
            return {
                ordersArr  : [],  //订单列表
                //订单Tab列表
                couponLabel : [
                    { title : "已支付", type: 'paid' },
                    { title : "未支付", type: 'unpay' }
                ],
                stateType   : 'paid', //订单状态
                page        : 1,     //分页
                lodingStats : false  //加载状态
            }
        },
        
        // 生命周期函数--监听页面加载
        onLoad(options) {
            console.log(options)
            this.stateType = options.type
        },
        
        onShow() {
            // 存储环境-用户抽奖活动
            getApp().globalData.envType = 'drawEnv'
            
            // 获取订单列表
            this.orderInfo();
        },
		
        methods: {
            // 订单列表
            orderInfo(page){
                orders({
                    type: this.stateType,
                    page: page || ''
                }).then(res=>{
                    console.log(res.data)
                    
                    let listArr = this.ordersArr,
                        newData = []
                    if(page == 1 || page == undefined) listArr = []
                            
                    newData = listArr.concat(res.data)
                    this.ordersArr   = 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.orderInfo();
            },
            
            // 页面相关事件处理函数--监听用户下拉动作
            onPullDownRefresh() {
                // 获取订单列表
                this.orderInfo();
            },
                    
            // 上拉加载
            onReachBottom(){
                this.lodingStats = true
                let pageNumber = this.page.current
                if(this.page.has_more){
                    pageNumber++
                    this.orderInfo(pageNumber)
                }
            }
        }
    }
</script>

<style lang="scss">
    .couponTab{
        position: fixed;
        width: 100%;
        height: 100rpx;
        z-index: 99;
        left: 0;
        top: 0;
        display: flex;
        padding: 20rpx 0;
        box-sizing: border-box;
        background-color: #FFFFFF;
        .couponTab-label {
            flex: 4;
            text-align: center;
            position: relative;
            &::after {
                position: absolute;
                content: '';
                left: calc(50% - 20rpx);
                bottom: 0;
                background-color: #FFFFFF;
                width: 40rpx;
                height: 6rpx;
                border-radius: 50rpx;
            }
            &.active {
                color: #eb4747;
            }
            &.active::after {
                background-color: #eb4747;
            }
        }
    }
    .order {
        width: 100%;
        margin-top: 100rpx;
        padding: 30rpx;
        box-sizing: border-box;
        .orderList {
            background-color: #FFFFFF;
            border-radius: 20rpx;
            margin-bottom: 30rpx;
            .orderList-title {
                padding: 0 30rpx;
                box-sizing: border-box;
                line-height: 90rpx;
                display: flex;
                font-size: 30rpx;
                border-bottom: 2rpx solid #eeeeee;
                .orderList-icon {
                    width: 40rpx;
                    height: 40rpx;
                    margin: 25rpx 20rpx 0 0;
                }
            }
            .orderList-label {
                padding: 10rpx 30rpx;
                border-bottom: 2rpx solid #eeeeee;
                box-sizing: border-box;
                font-size: 28rpx;
                .orderList-item {
                    display: flex;
                    line-height: 60rpx;
                    text {
                        display: block;
                        flex: 1;
                        color: #666666;
                    }
                }
            }
            .orderList-tool {
                padding: 0 30rpx;
                line-height: 90rpx;
                box-sizing: border-box;
                display: flex;
                font-size: 28rpx;
                color: #999999;
                .orderList-time {
                    flex: 1;
                }
                .orderList-btn {
                    font-size: 28rpx;
                    color: #e31828;
                    border: 2rpx solid #e31828;
                    display: inline-block;
                    height: 54rpx;
                    line-height: 54rpx;
                    margin-top: 16rpx;
                    border-radius: 40rpx;
                    padding: 0 25rpx;
                }
            }
        }
    }
</style>
