<template>
    <view class="waper">
        <u-navbar :autoBack="true" :placeholder="true" bgColor="#FBFBFB">
        	<view slot='center' class="navbar_title">文创订单</view>
        </u-navbar>
        <view class="menu">
            <view v-for="(i, index) in menu" :key="index" :class="{ active: menuIndex == index }" @click="tabMenu(index)">{{i.name}}</view>
        </view>
        <mescroll-uni @init="mescrollInit" @down="downCallback" @up="upCallback" :down="downOption" :fixed="true" :up="upOption" :top="paddingTop + 'px'">
            <view class="list_waper">
                <navigator :url="'/pages/shop/orderDetail?id=' + i.id" hover-class="none" class="list" v-for="(i, index) in list" :key="index">
                    <view class="top">
                        <view>{{i.orderItemList[0].storeName}}</view>
                        <view :class="{active: i.status > 0}">{{i.statusText}}</view>
                    </view>
                    <view class="center" v-for="(item, itemIndex) in i.orderItemList" :itemIndex="itemIndex">
                        <view class="img">
                            <image :src="$utils.setImgUrl(item.goodsImage)" mode=""></image>
                        </view>
                        <view class="text">
                            <view class="title">{{item.goodsTitle}}</view>
                            <view class="tag">
                                <view v-if="item.goodsSkuText">
                                    <text v-for="(k, kIndex) in item.goodsSkuText.split(',')" :key="kIndex">{{k}}</text>
                                </view>
                                <view v-else></view>
                                <view>X{{item.goodsNum}}</view>
                            </view>
                            <view class="money">总价：￥{{item.goodsPrice}}</view>
                        </view>
                    </view>
                    <view class="bottom">
                        <view>查看详情</view>
                        <template v-if="i.status == 0">
                            <view @click.stop="cancelOrder(i)">取消订单</view>
                            <view class="active" @click.stop="payOrder(i)">立即支付</view>
                        </template>
                    </view>
                </navigator>
            </view>
        </mescroll-uni>
    </view>
</template>

<script>
import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
export default {
    mixins: [MescrollMixin],
    data () {
        return {
            paddingTop: 0,
            menu: [
                { name: '全部', key: '' },
                { name: '待付款', key: '1' },
                { name: '待发货', key: '2' },
                { name: '已完成', key: '3' },
                { name: '退款', key: '4' }
            ],
            list: [],
            downOption: { auto: false },
            menuIndex: 0
        }
    },
    onLoad (oiptions) {
        if (oiptions.index) this.menuIndex = Number(oiptions.index);
        this.paddingTop = this.$paddingTop + uni.upx2px(94);
    },
    onShow () {
        this.list = [];
        this.mescroll && this.mescroll.resetUpScroll();
    },
    methods: {
        async payOrder (item) {
            uni.showLoading({ mask: true })
            let info = await this.$shop.getWcscOrderSession({ orderId: item.id });
            if (info.code == 200) {
                let patInfo = JSON.parse(info.msg);
                uni.requestPayment({
                    provider: 'wxpay',
                	timeStamp: patInfo.timeStamp,
                	nonceStr: patInfo.nonceStr,
                	package: patInfo.packageValue,
                	signType: patInfo.signType,
                	paySign: patInfo.paySign,
                	success: (res) => {
                        uni.hideLoading();
                        this.showSuccess = true;
                        this.list = [];
                        this.mescroll.resetUpScroll();
                	},
                	fail: function (err) {
                        uni.hideLoading();
                        uni.showToast({ mask: true, title: '支付取消', icon: 'none' })
                	}
                });
            } else {
                uni.hideLoading();
                uni.showToast({ mask: true, title: info.msg, icon: 'none' });
            }
        },
        async cancelOrder (item) {
            let info = await this.$shop.cancleOrder({ orderId: item.id, storeId: item.orderItemList[0].storeId })
            uni.showToast({ mask: true, title: '操作成功', icon: 'success' });
            this.list = [];
            this.mescroll.resetUpScroll();
        },
        tabMenu (index) {
            this.menuIndex = index;
            this.list = [];
            this.mescroll.resetUpScroll();
        },
        async upCallback (page) {
            let obj = { pageNum: page.num, pageSize: page.size };
            switch (this.menuIndex) {
                case 1:
                    obj.status = '0';
                    break;
                case 2:
                    obj.status = '1';
                    obj.dispatchStatus = '0';
                    obj.refundStatus = '0';
                    break;
                case 3:
                    obj.status = '2';
                    break;
                case 4:
                    obj.status = '1';
                    obj.refundStatus = '1';
                    break;
            }
            let info = await this.$shop.getOrderList(obj);
            if (page.num == 1) this.list = [];
            this.list = this.list.concat(info.rows);
            this.mescroll.endBySize(info.rows.length, info.total); 
        }
    }
}
</script>

<style lang="scss">

.menu{
    width: 100%; height: 94rpx; box-sizing: border-box; padding: 0 32rpx; display: flex; justify-content: space-between; align-items: center;
    view{
        font-size: 32rpx; color: rgba(0,0,0,0.85); line-height: 46rpx; height: 46rpx;
        &.active{
            position: relative; font-weight: 500; color: #03AE80;
            &::after{ content: ""; width: 30rpx; height: 4rpx; background: #03AE80; border-radius: 12rpx; position: absolute; left: 50%; transform: translateX(-50%); top: 62rpx; }
        }
    }
}
.list_waper{
    width: 100%; box-sizing: border-box; padding: 0 24rpx 24rpx;
    .list{
        width: 100%; background: #fff; border-radius: 10rpx; box-sizing: border-box; padding: 32rpx 24rpx; margin-bottom: 20rpx;
        &:last-child{ margin-bottom: 0; }
        .top{
            width: 100%; height: 46rpx; box-sizing: border-box; padding-right: 90rpx; position: relative;
            view{
                &:nth-child(1){ color: rgba(0,0,0,0.85); font-size: 32rpx; font-weight: 500; }
                &:nth-child(2){
                    font-size: 28rpx; color: rgba(0,0,0,0.45); position: absolute; right: 0; top: 50%; transform: translateY(-50%);
                    &.active{ color: #FF5833; }
                }
            }
        }
        .center{
            width: 100%; margin-top: 26rpx; box-sizing: border-box; padding-left: 190rpx; min-height: 170rpx; position: relative;
            .img{
                width: 170rpx; height: 170rpx; position: absolute; left: 0; top: 0;
                image{ border-radius: 10rpx; }
            }
            .text{
                width: 100%;
                .title{ line-height: 33rpx; color: rgba(0,0,0,0.85); font-size: 28rpx; font-weight: 500; }
                .tag{
                    width: 100%; margin-top: 20rpx; display: flex; justify-content: space-between; align-items: center;
                    view{
                        &:nth-child(1){
                            display: flex; align-items: center;
                            text{ background: #F4F4F4; border-radius: 2rpx; height: 48rpx; line-height: 48rpx; padding: 0 24rpx; color: rgba(0,0,0,0.65); font-size: 24rpx; }
                        }
                        &:nth-child(2){ color: rgba(0,0,0,0.65); font-size: 24rpx; }
                    }
                }
                .money{ margin-top: 30rpx; text-align: right; color: rgba(0,0,0,0.85); font-size: 28rpx; line-height: 33rpx; }
            }
        }
        .bottom{
            width: 100%; margin-top: 24rpx; border-top: 1rpx solid  rgba(0,0,0,0.1); padding-top: 24rpx; display: flex; align-items: center; justify-content: flex-end;
            view{
                width: 128rpx; height: 60rpx; border-radius: 10rpx; border: 2rpx solid #A2A2A4; line-height: 60rpx; text-align: center; color: rgba(0,0,0,0.45); font-size: 24rpx; margin-right: 32rpx;
                &:last-child{ margin-right: 0; }
                &.active{ border-color: #FF5833; color: #FF5833; }
            }
        }
    }
}
</style>