<!-- 使用 type="home" 属性设置首页，其他页面不需要设置，默认为page -->
<route lang="jsonc">{
	"layout": "tabbar",
	"style": {
		// 'custom' 表示开启自定义导航栏，默认 'default'
		"navigationStyle": "custom",
		"navigationBarTitleText": "首页"
	}
}</route>

<template>
    <view class="">
        <view class="order-list sticky top-0 left-0 z-50 bg-[#F6F7F8] pb-10rpx">
            <wd-navbar safeAreaInsetTop custom-class='!bg-[#F6F7F8]' :bordered="false" placeholder>
                <template #left>
                    <!-- <view class="search-box">
                        <wd-search v-model="keywords" hide-cancel placeholder-left light placeholder="搜索订单信息"></wd-search>
                    </view> -->
                    <view class="search-box flex items-center ml-26rpx" @click="Order.handleToSearch">
                        <wd-search placeholder="搜索订单信息" hide-cancel disabled :placeholder-left="true"
                            placeholderStyle="text-align:left;padding-left: 24rpx;line-heigt: 44rpx;color: #C9C9C9; font-size: 32rpx;font-weight: normal;">
                        </wd-search>
                    </view>
                </template>
            </wd-navbar>
            <view class="tabs">
                <wd-tabs v-model="tab" swipeable slidable="always" :lazy="false" @click="Order.handleChangeTabs">
                    <wd-tab title="全部" :name="AdminOrderStatusText.All"></wd-tab>
                    <wd-tab title="待使用" :name="AdminOrderStatusText.ToUse"></wd-tab>
                    <wd-tab title="使用中" :name="AdminOrderStatusText.Consuming"></wd-tab>
                    <wd-tab title="已完成" :name="AdminOrderStatusText.Finished"></wd-tab>
                </wd-tabs>
            </view>
        </view>

         <view class="tabs mt-18rpx mx-30rpx">
            <mescroll-body ref="mescrollItem0" @init="mescrollInit" @down="downCallback" @up="Order.upCallback" :down="downOption" :up="upOption">
                <view class="mb-20rpx" v-for="(item, index) in list" :key="index">
                    <combo-card :type="OrderSource.Admin" :order="item" @refresh="Order.handleResetSearch"></combo-card>
                </view>
            </mescroll-body>
        </view>

        <!-- 弹出框 -->
        <wd-message-box></wd-message-box>
    </view>
</template>

<script lang="ts" setup>
    import { getTeaSpecialistOrderList } from '@/api/teaSpecialist-order'
    import ComboCard from '@/components/order/ComboCard.vue'
	import { onPageScroll, onReachBottom } from '@dcloudio/uni-app'
	import useMescroll from "@/uni_modules/mescroll-uni/hooks/useMescroll.js"
    import { OrderSource,  AdminOrderStatusText, TeaSpecialistOrderStatusText, TeaSpecialistOrderStatusValue, AdminOrderStatusValue } from '@/utils/order'
    import { router } from '@/utils/tools'
    import { getStoreOrderList} from '@/api/order'
    import { useStoreStore } from '@/store'

    const useStore = useStoreStore()

    /* mescroll */
	const { mescrollInit, downCallback, getMescroll } = useMescroll(onPageScroll, onReachBottom) // 调用mescroll的hook
    const downOption = {
		auto: true
	}
	const upOption = {
		auto: true,
		textNoMore: '~ 已经到底啦 ~', //无更多数据的提示
	}
	const list = ref<Array<any>>([]) // 茶艺师列表
    const keywords = ref<string>('')
    const orderStatus = ref<string>('')
	// const canReset = ref<boolean>(false) // 避免onShow重复加载

    // tab
    const tab = ref<string>('all')

    // onShow(() => {
    //     if (canReset.value) {
    //         list.value = []
    //         getMescroll().resetUpScroll();
	// 	}
	// 	canReset.value = true
    // })

    onLoad((args) => {
        uni.$on('refreshOrderList', () => {
            list.value = []
            getMescroll().resetUpScroll()
        })

        // 根据传过来的参数决定显示哪个tab
        if (args.orderStatus) {
            tab.value = args.orderStatus
        }
    })

    onUnload(() => {
        uni.$off('refreshOrderList')
    })

    const Order = {
        // 上拉加载的回调: 其中num:当前页 从1开始, size:每页数据条数,默认10
		upCallback: (mescroll) => {
            const filter = {
				page: mescroll.num, 
				size: mescroll.size,
                store_id: useStore.defaultStore.id,
				order_status: orderStatus.value,
                search: keywords.value,
			}

            getStoreOrderList(filter).then((res) => {
				const curPageData = res.list || [] // 当前页数据
				if(mescroll.num == 1) list.value = [] // 第一页需手动制空列表
				list.value = list.value.concat(curPageData) //追加新数据
				mescroll.endSuccess(curPageData.length, Boolean(res.more))
			}).catch(() => {
				mescroll.endErr() // 请求失败, 结束加载
			})
		},

        /**
		 * 跳转茶室搜索
		 */
		handleToSearch: () => {
			uni.$on('refreshTeaRoomList', params => {
				keywords.value = params.keywords
				Order.handleResetSearch()
				
				uni.$off('refreshTeaRoomList')
			})
			router.navigateTo(`/pages/search/search?keywords=${keywords.value}`)
		},

		/**
		 * 重置搜索
		 */
		handleResetSearch: () => {
			list.value = []
			getMescroll().resetUpScroll()
		},

        /**
         * 切换tab
         * @param e 
         */
        handleChangeTabs: (e: {index: number, name: string}) => {
            tab.value = e.name
            if (e.name === AdminOrderStatusText.Pending) {
                orderStatus.value =  '0'
            } else {
                orderStatus.value = AdminOrderStatusValue[e.name] || ''
            }

            // 切换tab时,重置当前的mescroll
            list.value = []
            getMescroll().resetUpScroll();
        },

        // 返回上一页
        handleBack: () => {
            uni.navigateBack({
                delta: 1
            })
        },
    }

    /**
     * 监听默认店铺变化，刷新列表
     */
    watch(
        () => useStore.defaultStore.id,
        (newId, oldId) => {
            if (newId !== oldId) {
                // 这里写刷新逻辑，比如重置列表并重新请求
                list.value = []
                getMescroll().resetUpScroll()
            }
        }
    )

</script>

<style lang="scss">
    page {
	    background-color: $cz-page-background;
    }

    .order-list {
        :deep() {
            .wd-navbar__left {
                width: 100%;
            }
        }
    }

    .tabs {
        :deep() {
            .wd-tabs,
            .wd-tabs__nav  {
                background-color: transparent !important;
            }

            .wd-tabs__nav-item {
                font-weight: 400 !important;
                font-size: 28rpx !important;
                color: #606266 !important;
                line-height: 40rpx !important;
                padding: 0 30rpx !important;
            }

            .wd-tabs__nav-item.is-active {
                font-weight: 500 !important;
                color: #303133 !important;
                font-size: 32rpx !important;
                line-height: 44rpx !important;
            }
        }
    }

    .search-box {
        display: flex;
        height: 100%;
        margin-right: 40px;
        --wot-search-padding: 0;
        --wot-search-side-padding: 0;

        :deep() {
            .wd-search {
                background: transparent !important;
                width: 100% !important;
            }

            .wd-search__block {
                background-color: #fff !important;
            }

            .wd-search__input {
                // #ifdef MP
                padding-left: 32px !important;
                padding-right: 32px !important;
                // #endif

                // #ifndef MP
                padding-right: 0 !important;
                // #endif
            }
        }
    }
</style>
