<template>
    <z-paging
        auto-show-back-to-top
        :auto="i == index"
        ref="paging"
        v-model="dataList"
        :data-key="i"
        @query="queryList"
        :fixed="false"
        height="100%"
    >
        <block v-for="(item, index) in dataList" :key="index">
            <order-card :orderInfo="item">
                <order-footer
                    :orderId="item?.id"
                    :mobile="item?.mobile"
                    :staffId="item.staffId"
                    :orderStatus="item.orderStatus"
                    :cancel="item.cancelBtn"
                    :evaluate="item.commentBtn"
                    :contact="item.contactBtn"
                    :pay="item.pay_btn"
                    :confirmService="item.serviceBtn"
                    :verification="item.verificationBtn"
                    :goodsImage="item.orderGoodsDetailVo.imageUrl"
                    :goodsName="item.orderGoodsDetailVo.goodsName"
                    :type="2"
                    :appointTime="item.appointTime"
                    :appointTimeStartStr="item.appointTimeStart"
                    :isDispatch="item.isDispatch"
                    :uploadServiceImgBtn="item.uploadServiceImgBtn"
                    @refresh="queryList"
                />
            </order-card>
        </block>
    </z-paging>
</template>

<script lang="ts" setup>
import { apiStaffOrderLists } from '@/api/order'
import orderFooter from '@/components/order-footer/index.vue'
import { nextTick, ref, shallowRef, unref, watch } from 'vue'
import orderCard from './order-card.vue'

const props = withDefaults(
    defineProps<{
        orderStatus: number | string
        i: number
        index: number
        refresh: boolean
    }>(),
    {
        orderStatus: '',
        refresh: false
    }
)

const paging = shallowRef<any>(null)
const dataList = ref<any>([])
const isFirst = ref<boolean>(true)

watch(
    () => props.index,
    async () => {
        await nextTick()
        if (props.i == props.index && unref(isFirst)) {
            isFirst.value = false
            paging.value?.reload()
        }
    },
    { immediate: true }
)

watch(
    () => props.refresh,
    val => {
        console.log(val, 'val')
        val && paging.value?.reload()
    }
)

const queryList = async (pageNo = 1, pageSize = 10) => {
    try {
        const { lists } = await apiStaffOrderLists({
            orderStatus: props.orderStatus,
            pageNo,
            pageSize
        })
        if (paging.value) {
            paging.value.complete(lists)
        } else {
            queryList()
        }
    } catch (e) {
        console.log('报错=>', e)
        //TODO handle the exception
        paging.value.complete(false)
    }
}
</script>

<style scoped></style>
