<template>
    <view>
        <!-- 活动订单 -->
        <view class="order-tab">
        	<view class="order-tab-item" :class="{active : order.stateType == 'all'}" @click="orderTab('all')">
        		全部
        	</view>
        	<view class="order-tab-item" :class="{active : order.stateType == 'unpay'}" @click="orderTab('unpay')">
        		待支付
        	</view>
        	<view class="order-tab-item" :class="{active : order.stateType == 'paid'}" @click="orderTab('paid')">
        		{{order.orderType == 'welfare' || order.orderType == 'rights' ? '待发货' : '已支付'}}
        	</view>
        	<view class="order-tab-item" :class="{active : order.stateType == 'delivered'}" @click="orderTab('delivered')" v-if="order.orderType == 'welfare' || order.orderType == 'rights'">
        		已发货
        	</view>
        	<view class="order-tab-item" :class="{active : order.stateType == 'completed'}" @click="orderTab('completed')" v-else>
        		已完成
        	</view>
        </view>
        
        <!-- 列表 -->
        <view class="order-content" v-if="order.orderArr.length > 0">
        	<view class="order-content-li" v-for="(item,index) in order.orderArr" :key="index">
        		<view class="uni-border-down order-store">
        			<view class="order-store-title nowrap">{{ item.orderid }}</view>
        			<view class="order-store-stateText red" v-if="item.state_text == '未支付' || item.status_text == '未支付'">
        				{{ item.state_text ||item.status_text }}
        			</view>
        			<view class="order-store-stateText green" v-else-if="item.state_text == '已支付' || item.status_text == '已支付'">
        				{{ item.state_text || item.status_text }}
        			</view>
        			<view class="order-store-stateText" v-else>{{ item.state_text || item.status_text }}</view>
        		</view>
        		<view class="order-goods">
                    <image class="order-goods-cover" v-if="item.items" :src="item.items.cover" mode="aspectFill"></image>
                    <image class="order-goods-cover" v-else-if="item.source" :src="item.source.right.cover" mode="aspectFill"></image>
        			<view class="order-goods-content">
                        <!-- 名称 -->
        				<view class="order-goods-content-name nowrap" v-if="item.items">{{ item.items.title }}</view>
                        <view class="order-goods-content-name nowrap" v-else-if="item.source">{{ item.source.right.title }}</view>
                        
                        <!-- 权益标签 实物或券 -->
        				<view class="orderVirtual" v-if="order.orderType == 'welfare'">{{ item.type_text }}</view>
                        <view class="orderVirtual" v-else-if="order.orderType == 'welfareGoods'">{{ item.type_text }}</view>
        				<view class="orderVirtual" :class="{active : item.items.type != 'virtual'}" v-else>
        					<block v-if="item.items.type == 'virtual'">红包电子券</block>
        					<block v-else>实物券</block>
        				</view>
                        
                        <!-- 权益购买数量 -->
        				<view class="order-goods-content-price nowrap" v-if="item.items">
        					<text>￥{{ item.items.price }}</text> × {{ item.items.qty ? item.items.qty : '1' }}
        				</view>
                        <view class="order-goods-content-price nowrap" v-else-if="item.source">
                        	<text>￥{{ item.source.welfare.price }}</text>× 1
                        </view>
        			</view>
        		</view>
        		<view class="uni-border-top order-btns">
        			<navigator class="order-btn" :url="'/pages/order/orderData?id=' + item.orderid + '&orderType=' + order.orderType">订单详情</navigator>
                    <!-- 取消订单 -->
                    <view class="order-btn" @click="orderDelete(item.orderid)" v-if="item.canCancel == true">取消订单</view>
                    <block v-if="item.can">
                        <view class="order-btn" @click="orderDelete(item.orderid)" v-if="item.can.cancel == true">取消订单</view>
                    </block>
                    <!-- 立即支付 -->
                    <view class="order-btn order-btn-back" @click="submitPay(item.orderid)" v-if="item.canPay == true">立即支付</view>
                    <block v-if="item.can">
                        <view class="order-btn order-btn-back" @click="submitPay(item.orderid)" v-if="item.can.pay == true">立即支付</view>
                    </block>
        		</view>
        	</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 { welfare, welfareCoupons, orders, ordersCoupons, cancel, welfaresCancel } from '@/apis/interfaces/user'
    import { rightsSingle } from '@/apis/interfaces/rights'
    import { welfSingle } from '@/apis/interfaces/welfares'
    export default {
    	data() {
    		return {
                order: {
                    orderType   : '',    // 订单来源
                    stateType   : 'all', // 状态
                    orderArr    : []     // 列表
                },
                load:       {
                    page    : 1,        // 第一页
                    allpage : 0,        // 总页数
                    has_more: false,    // 是否有分页
                    show    : false     // 是否有下一页数据
                },
                finished    : false,    // 商品列表没有更多商品是否显示
                LoadData    : false     // 数据加载完渲染
            }
        },
        onLoad(options) {
            this.order.orderType = options.orderType
        },
        onShow() {
            // 获取商品活动订单
            this.orderInfo();
        },
        methods:{
            // 商品活动订单
            orderInfo() {
                if (this.load.page == 1) {
                    this.order.orderArr = [];
                }
                let url = ''
                if(this.order.orderType == 'welfare') url = welfare
                if(this.order.orderType == 'welfareGoods') url = welfareCoupons
                if(this.order.orderType == 'rights') url = orders
                if(this.order.orderType == 'rightsCoupons') url = ordersCoupons
                url({
                    type    : this.order.stateType,
                    page    : this.load.page
                }).then(res=>{
                    this.order.orderArr = this.order.orderArr.concat(res.data)
                    this.load.allpage   = res.page.total_page
                    this.load.has_more  = res.page.has_more
                })
            },
            
            // tabs
            orderTab(state){
                if(this.order.stateType != state){
                    this.order.stateType = state
                    // 获取商品活动订单
                    this.orderInfo()
                }
            },
            
            // 取消订单
            orderDelete(orderId) {
                uni.showModal({
                    title   : '订单取消',
                    content : '确认取消吗？',
                    success : res=> {
                        if (res.confirm) {
                            let url = ''
                            if(this.order.orderType == 'welfare' || this.order.orderType == 'welfareGoods') url = welfaresCancel
                            if(this.order.orderType == 'rights' || this.order.orderType == 'rightsCoupons') url = cancel
                            url(orderId).then(res=>{
                                // 获取商品活动订单
                                this.orderInfo()
                            }) 
                        } else if (res.cancel) {
                            uni.showToast({
                                title   : '取消',
                                icon    : 'loading',
                                duration: 1000
                            })
                        }
                    }
                }) 
            },
            
            // 支付选择弹出
            submitPay(orderid) {
                let new_activity_type = '',
                    new_deliver = ''
                // welfareGoods  welfare
                if(this.order.orderType == 'welfare') {
                    new_activity_type = 'welfare'
                    new_deliver = 0
                    this.welfSingleData(orderid).then(res => {
                        this.navigateUrl(res.trade_no,res.amount,new_deliver,new_activity_type)
                    })
                }
                else if(this.order.orderType == 'welfareGoods') {
                    new_activity_type = 'welfare'
                    new_deliver = 1
                    this.welfSingleData(orderid).then(res => {
                        this.navigateUrl(res.trade_no,res.amount,new_deliver,new_activity_type)
                    })
                }
                else if(this.order.orderType == 'rights') {
                    new_activity_type = 'right'
                    new_deliver = 0
                    this.rightsSingleData(orderid).then(res => {
                        this.navigateUrl(res.trade_no,res.amount,new_deliver,new_activity_type)
                    })
                }
                else {
                    new_activity_type = 'right'
                    new_deliver = 1
                    this.rightsSingleData(orderid).then(res => {
                        this.navigateUrl(res.trade_no,res.amount,new_deliver,new_activity_type)
                    })
                }
            },
            
            // 周五福利单订单
            welfSingleData(tradeNo) {
                return new Promise((resolve, reject) => {
                    welfSingle(tradeNo).then(res=>{
                        resolve(res)
                    })
                })
            },
            
            // 权益单订单
            rightsSingleData(tradeNo) {
                return new Promise((resolve, reject) => {
                    rightsSingle(tradeNo).then(res=>{
                        resolve(res)
                    })
                })
            },
            
            // 跳转收银台
            navigateUrl(orderid,newPrice,new_deliver,new_activity_type) {
                uni.navigateTo({
                    url: "/pages/cashier/index?tradeNo=" + orderid + '&price=' + newPrice + "&deliver=" + new_deliver + "&activity_type=" + new_activity_type + "&type=default"
                })
            }
        }
    }
</script>

<style lang="scss" scoped>
    // 活动订单
    .order-tab {
        position: fixed;
        left: 0;
        top: 0;
        width: 100%;
        display: flex;
        height: 80rpx;
        line-height: 80rpx;
        z-index: 9;
        background: white;
        .order-tab-item {
            font-size: 28rpx;
            width: 25%;
            text-align: center;
            border-bottom: solid 2rpx #f7f7f7;
            color: #464854;
            background: white;
            position: relative;
            &.active {
                color: #f57e32;
            }
            &::after {
                content: '';
                position: absolute;
                width: 30rpx;
                height: 4rpx;
                background: transparent;
                left: calc(50% - 15rpx);
                bottom: -2rpx;
            }
            &.active::after {
                background: #f57e32;
            }
        }
    }
    
    /* 订单列表 */
    .order-content {
        padding: 80rpx 0 20rpx 0;
        .order-content-li {
            background: white;
            margin-top: 20rpx;
            position: relative;
            .order-store {
                padding: 20rpx;
                border-bottom: solid 1rpx #f3f3f3;
                display: flex;
                .order-store-title {
                    flex: 1;
                    color: #999;
                    font-size: 28rpx;
                }
                .order-store-stateText {
                    color: #e6b329;
                    font-size: 26rpx;
                    &.red {
                        color: #e92344;
                    }
                    &.green {
                        color: #79b300;
                    }
                }
            }
            .order-goods {
                padding: 20rpx;
                box-sizing: border-box;
                position: relative;
                .order-goods-cover {
                    width: 150rpx;
                    height: 150rpx;
                    vertical-align: top;
                    border-radius: 4rpx;
                }
                .order-goods-content {
                    position: absolute;
                    left: 190rpx;
                    top: 20rpx;
                    right: 20rpx;
                    width: calc(100% - 210rpx);
                    .order-goods-content-name {
                        margin-bottom: 10rpx;
                        font-size: 30rpx;
                        font-weight: 600;
                    }
                    .orderVirtual {
                        background: #88be2d;
                        color: #fff;
                        border-radius: 4rpx;
                        display: inline-block;
                        font-size: 24rpx;
                        padding: 2rpx 8rpx;
                        &.active {
                            background: #f57e32;
                        }
                    }
                    .order-goods-content-price {
                        color: #747788;
                        display: flex;
                        margin-top: 10rpx;
                        font-size: 28rpx;
                        text {
                            color: #f57e32;
                            display: inline-block;
                            margin-right: 10rpx;
                            font-size: 30rpx;
                        }
                    }
                }
            }
            .order-btns {
                font-size: 25rpx;
                display: flex;
                padding: 20rpx;
                box-sizing: border-box;
                flex-wrap: wrap;
                flex-direction: row-reverse;
                .order-btn {
                    margin-left: 20rpx;
                    height: 52rpx;
                    line-height: 50rpx;
                    box-sizing: border-box;
                    border: solid 1rpx #747788;
                    padding: 0 20rpx;
                    border-radius: 30rpx;
                }
                .order-btn-back {
                    border-color: #f57e32;
                    color: #f57e32;
                }
            }
        }
    }
</style>
