<!--
 * @Author: 王翠碧 1254597151@qq.com
 * @Date: 2023-05-22 22:41:29
 * @LastEditors: micky 1254597151@qq.com
 * @LastEditTime: 2023-09-07 19:09:50
 * @FilePath: \uniapp\src\bundle\pages\service_order\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <view class="order-list">
        <!-- :auth="true" 是表示需要权限登录的 -->
        <tabs
            :current="current"
            @change="handleChange"
            height="80"
            bar-width="60"
            :font-size="32"
            :barStyle="{ bottom: '0' }"
            :auth="true"
            activeColor="#1296DB"
        >
            <tab v-for="(item, i) in tabList" :key="i" :name="item.name">
                <view class="orderList pt-[20rpx]" v-if="isLogin">
                    <orderList
                        :orderStatus="item.orderStatus"
                        :i="i"
                        :index="current"
                        :refresh="item.refresh"
                    ></orderList>
                </view>
            </tab>
        </tabs>

        <tabbar />
    </view>
</template>

<script lang="ts" setup>
import { ref, computed } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import orderList from './components/order-list.vue'
import tab from '@/components/tab/tab.vue'
import tabs from '@/components/tabs/tabs.vue'
import { useUserStore } from '@/stores/user'

const userStore = useUserStore()

// 是否登录
const isLogin = computed(() => userStore.token)

const tabList = ref<any>([
    {
        name: '全部',
        orderStatus: '',
        refresh: false
    },
    {
        name: '预约中',
        orderStatus: 1,
        refresh: false
    },
    {
        name: '服务中',
        orderStatus: 2,
        refresh: false
    },
    {
        name: '已完成',
        orderStatus: 3,
        refresh: false
    },
    {
        name: '已取消',
        orderStatus: 4,
        refresh: false
    }
])
const current = ref<number>(0)
const handleChange = (index: number) => {
    current.value = Number(index)
    tabList.value[index].refresh = true
    setTimeout(() => {
        tabList.value[index].refresh = false
    }, 200)
}

onLoad(async (options: { type?: any }) => {
    current.value = options?.type * 1 || 0
})
</script>

<style lang="scss">
.container {
    display: flex;
    height: 100vh;
    overflow: hidden;
    flex-direction: column;
}

.main {
    flex: 1;
    min-height: 0;
    overflow: scroll;
    swiper {
        height: 100%;
    }
}
.orderList {
    height: calc(100vh - 86px - env(safe-area-inset-bottom));
}
</style>
