<template>
    <app-layout title="订单" btnType="unset">
        <view class="select-group">
            <view
                class="select-item"
                v-for="(selectItem, selectIndex) in tabList"
                :key="selectIndex"
                :class="{ active: tabIndex == selectIndex }"
                @click="tabIndex = selectIndex"
            >
                <text class="text">{{ selectItem.name }}</text>
            </view>
        </view>
        <view class="order-list-group">
            <swiper
                class="list-tab-list"
                :current="tabIndex"
                :duration="300"
                @change="switchTab($event.detail.current)"
                :style="{ height: tabHeight + 'px' }"
            >
                <block v-for="(tabItem, tabIdx) in tabList" :key="tabIdx">
                    <swiper-item>
                        <view class="tab-item" :class="['tab' + tabIdx]">
                            <view class="order-list">
                                <view
                                    class="order-item"
                                    v-for="(item, index) in tabItem.list"
                                    :key="index"
                                    @click="toDetail(item.id, item.state, item.listType, item.orderType)"
                                >
                                    <order-item :order="item" :index="index">
                                        <view class="action-group">
                                            <order-action :order="item" @afterPay="afterPay" />
                                        </view>
                                    </order-item>
                                </view>
                            </view>
                            <view class="more-list">
                                <widget-load-more :hasMore="tabItem.more" />
                            </view>
                        </view>
                    </swiper-item>
                </block>
            </swiper>
        </view>
    </app-layout>
</template>

<script>
import AppLayout from "@/components/layout/layout";
import OrderItem from "@/components/order/item";
import OrderAction from "@/components/order/action";
import WidgetLoadMore from "@/components/widgets/loadmore";
export default {
    name: "order",
    data() {
        return {
            tabIndex: 0,
            tabHeight: 0,
            tabList: [
                {
                    listType: "t1",
                    name: "购买订单",
                    page: 1,
                    more: true,
                    list: [],
                },
                {
                    listType: "t2",
                    name: "报/议价订单",
                    page: 1,
                    more: true,
                    list: [],
                },
                {
                    listType: "t3",
                    name: "货运订单",
                    page: 1,
                    more: true,
                    list: [],
                },
            ],
        };
    },
    components: {
        AppLayout,
        OrderItem,
        OrderAction,
        WidgetLoadMore,
    },
    onLoad() {},
    onShow() {
        this.switchTab(this.tabIndex);
    },
    onReady() {},
    onReachBottom() {
        this.loadData();
    },
    onPullDownRefresh() {
        this.switchTab(this.tabIndex);
        uni.stopPullDownRefresh();
    },
    methods: {
        /**
         * 切换tab页
         */
        switchTab(index) {
            this.tabIndex = index;
            let currentTab = this.tabList[index];
            currentTab.page = 1;
            currentTab.more = true;
            currentTab.list = [];
            this.loadData();
        },
        /**
         * 动态设置页面高度
         */
        setTabHeight() {
            let element = ".tab" + this.tabIndex;
            let query = uni.createSelectorQuery().in(this);
            query.select(element).boundingClientRect();
            query.exec((res) => {
                if (res && res[0]) {
                    this.tabHeight = res[0].height;
                }
            });
        },
        /**
         * 加载列表数据
         */
        loadData() {
            let currentTab = this.tabList[this.tabIndex];
            return new Promise((resolve, reject) => {
                if (!currentTab.more) {
                    return;
                }
                this.$models.order
                    .orderList({
                        request: {
                            api: "order.list." + currentTab.listType,
                            data: {
                                page: currentTab.page,
                                status: currentTab.status,
                            },
                        },
                        listType: currentTab.listType,
                    })
                    .then((orderList) => {
                        if (orderList.length == 0) {
                            currentTab.more = false;
                        } else {
                            currentTab.page++;
                            currentTab.list = currentTab.list.concat(orderList);
                        }
                        this.$nextTick(() => {
                            this.setTabHeight();
                        });
                        return resolve();
                    });
            });
        },
        /**
         * 跳转详情
         */
        toDetail(id, state, listType, orderType) {
            let tab = "detail";
            // 报价订单未选择师傅 跳转后切换到师傅列表
            if (listType == "t2" && orderType == 2 && state == 0) {
                tab = "worker";
            }
            this.$utils.toPage("/pages/order/detail?list=" + listType + "&tab=" + tab + "&id=" + id);
        },
        /**
         * 支付后操作
         */
        afterPay() {
            this.switchTab(this.tabIndex);
        },
    },
};
</script>

<style lang="less" scoped>
.select-group {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #ffffff;
    margin-bottom: 20rpx;
    .select-item {
        width: 210rpx;
        height: 115rpx;
        box-sizing: border-box;
        text-align: center;
        .text {
            font-size: 30rpx;
            color: #999999;
            line-height: 115rpx;
        }
    }
    .select-item.active {
        border-bottom: 7rpx solid #8b9aeb;
        .text {
            font-weight: bold;
            color: #8b9aeb;
        }
    }
}
.order-list-group {
    width: 100%;
    .list-tab-list {
        width: 100%;
    }
    .more-list {
        width: 100%;
        padding: 50rpx 0;
    }
    .order-item {
        width: 100%;
        margin-bottom: 30rpx;
    }
    .order-item:last-child {
        margin-bottom: 0;
    }
    .action-group {
        width: 100%;
        padding: 30rpx 0;
    }
}
</style>