<template>
    <app-layout headerBackgroundColor="#F6F6F6" backgroundColor="#F6F6F6" title="订单详情" textColor="dark">
        <view class="state-textbox">
            <text class="state-text">等待您选择师傅</text>
            <text class="state-desc">为保证师傅按时上门，建议尽快选择师傅并完成支付 </text>
        </view>
        <view class="order-detail-header">
            <view class="select-group">
                <view class="select-item" :class="{ active: tabIndex == 0 }" @click="tabIndex = 0">
                    <text class="text">服务师傅</text>
                </view>
                <view class="select-item" :class="{ active: tabIndex == 1 }" @click="tabIndex = 1">
                    <text class="text">订单详情</text>
                </view>
            </view>
        </view>
        <view class="order-detail-body">
            <swiper
                class="list-tab-list"
                :current="tabIndex"
                :duration="300"
                @change="changeTab"
                :style="{ height: tabHeight + 'px' }"
            >
                <swiper-item>
                    <view class="detail-tab tab0">选择师傅</view>
                </swiper-item>
                <swiper-item>
                    <view class="detail-tab tab1">2</view>
                </swiper-item>
            </swiper>
        </view>
    </app-layout>
</template>

<script>
import AppLayout from "@/components/layout/layout";
export default {
    name: "order-detail",
    data() {
        return {
            tabIndex: 0,
            tabHeight: 0,
            order: {
                id: 1,
                orderId: "xxgfdkgn1223",
                cate: "家具安装",
                explain: "我想要安装一个书柜，需要上墙啊啊啊啊",
                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,
                    },
                ],
            },
        };
    },
    components: {
        AppLayout,
    },
    onLoad(e) {
        if (e.type && e.type == "detail") {
            this.switchTab(1);
        } else {
            this.switchTab(0);
        }
    },
    onShow() {},
    onReady() {},
    onReachBottom() {},
    onPullDownRefresh() {},
    methods: {
        switchTab(index) {
            this.tabIndex = index;
            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;
                }
            });
        },
    },
};
</script>

<style lang="less" scoped>
.state-textbox {
    width: 750rpx;
    box-sizing: border-box;
    background: #8c9bec;
    padding: 30rpx;
    color: #ffffff;
    text-align: center;
    .state-text {
        display: block;
        font-size: 40rpx;
        font-weight: bold;
        line-height: 40rpx;
        margin-bottom: 26rpx;
    }
    .state-desc {
        display: block;
        font-size: 24rpx;
        line-height: 24rpx;
    }
}
.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;
        }
    }
}
</style>