<template>
    <app-layout title="订单" btnType="unset">
        <view class="select-group">
            <view
                class="select-item"
                v-for="(selectItem, selectIndex) in tabList"
                :key="selectIndex"
                :class="[tabIndex == selectIndex ? 'active' : '']"
                @click="switchTab(selectIndex)"
            >
                <text class="text">{{ selectItem.name }}</text>
            </view>
        </view>
        <view class="order-list-group">
            <swiper
                class="list-tab-list"
                :current="tabIndex"
                :duration="300"
                @change="changeTab"
                :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)"
                                >
                                    <order-item :order="item" :index="index">
                                        <view class="action-group">
                                            <order-action :order="item" />
                                        </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: [
                {
                    type: "all",
                    name: "全部订单",
                    more: false,
                    list: [
                        {
                            id: 1,
                            orderId: "xxgfdkgn1223",
                            cate: "家具安装",
                            content: "我想要安装一个书柜，需要上墙啊啊啊啊",
                            createTime: "2022-10-18 10:56:34",
                            serviceTime: "2022-10-18 10:56:34",
                            orderType: 2,
                            state: 1,
                            worker: {
                                id: 1,
                                name: "张师傅",
                                cover: require("@/static/temp/order/1.png"),
                                price: 306.0,
                                type: 1,
                                times: 687,
                                favorable_rate: 99.8,
                                grade: 4.5,
                            },
                            workerList: [
                                {
                                    id: 1,
                                    name: "张师傅",
                                    cover: require("@/static/temp/order/1.png"),
                                    price: 306.0,
                                    type: 1,
                                    times: 687,
                                    favorable_rate: 99.8,
                                    grade: 4.5,
                                },
                                {
                                    id: 1,
                                    name: "王师傅",
                                    cover: require("@/static/temp/order/1.png"),
                                    price: 306.0,
                                    type: 1,
                                    times: 687,
                                    favorable_rate: 99.8,
                                    grade: 4.5,
                                },
                                {
                                    id: 1,
                                    name: "李师傅",
                                    cover: require("@/static/temp/order/1.png"),
                                    price: 306.0,
                                    type: 1,
                                    times: 687,
                                    favorable_rate: 99.8,
                                    grade: 4.5,
                                },
                            ],
                        },
                        {
                            id: 2,
                            orderId: "xxgfdkgn1224",
                            cate: "家具安装",
                            content: "我想要安装一个书柜，需要上墙啊啊啊啊",
                            createTime: "2022-10-18 10:56:34",
                            serviceTime: "2022-10-18 10:56:34",
                            orderType: 1,
                            state: 3,
                            worker: {
                                id: 1,
                                name: "张师傅",
                                cover: require("@/static/temp/order/1.png"),
                                price: 306.0,
                                type: 2,
                                times: 687,
                                favorable_rate: 99.8,
                                grade: 4.5,
                            },
                            workerList: [],
                        },
                        {
                            id: 3,
                            orderId: "xxgfdkgn1225",
                            cate: "家具安装",
                            content: "我想要安装一个书柜，需要上墙啊啊啊啊",
                            createTime: "2022-10-18 10:56:34",
                            serviceTime: "2022-10-18 10:56:34",
                            orderType: 1,
                            state: 2,
                            worker: {
                                id: 1,
                                name: "张师傅",
                                cover: require("@/static/temp/order/1.png"),
                                price: 306.0,
                                type: 2,
                                times: 687,
                                favorable_rate: 99.8,
                                grade: 4.5,
                            },
                            workerList: [],
                        },
                    ],
                },
                {
                    type: "refund",
                    name: "退款记录",
                    more: true,
                    list: [
                        {
                            id: 3,
                            orderId: "xxgfdkgn1224",
                            cate: "家具安装",
                            content: "我想要安装一个书柜，需要上墙啊啊啊啊",
                            createTime: "2022-10-18 10:56:34",
                            serviceTime: "2022-10-18 10:56:34",
                            orderType: 1,
                            state: 8,
                            worker: {
                                id: 1,
                                name: "张师傅",
                                cover: require("@/static/temp/order/1.png"),
                                price: 306.0,
                                type: 1,
                                times: 687,
                                favorable_rate: 99.8,
                                grade: 4.5,
                            },
                            workerList: [],
                        },
                    ],
                },
            ],
        };
    },
    components: {
        AppLayout,
        OrderItem,
        OrderAction,
        WidgetLoadMore,
    },
    onLoad() {
        this.$nextTick(() => {
            this.setTabHeight();
        });
    },
    onShow() {},
    onReady() {},
    onReachBottom() {},
    onPullDownRefresh() {},
    methods: {
        switchTab(index) {
            this.tabIndex = index;
            this.loadData();
            this.$nextTick(() => {
                this.setTabHeight();
            });
        },
        changeTab(e) {
            this.switchTab(e.detail.current);
        },
        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() {},
        toDetail(id, state) {
            let type = "detail";
            if (state == this.$models.order.state.NO_SELECT_WORKER) {
                type = "worker";
            }
            this.$utils.toPage("/pages/order/detail?type=" + type + "&id=" + id);
        },
    },
};
</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>