<template>
    <z-paging
        auto-show-back-to-top
        :auto="i == index"
        ref="paging"
        v-model="dataList"
        :data-key="i"
        :fixed="false"
        height="100%"
        :auto-clean-list-when-reload="true"
        :auto-scroll-to-top-when-reload="false"
        :empty-view-img="NoDrawEmpty"
        empty-view-text="暂无记录~"
        @query="queryList"
    >
        <view class="px-[30rpx]">
            <block v-for="(item, index) in dataList" :key="index">
                <DrawCard :value="item" :status="item.status"></DrawCard>
            </block>
        </view>
    </z-paging>
</template>

<script lang="ts" setup>
import { ref, watch, nextTick, shallowRef } from 'vue'
import { qrcodeRecord } from '@/api/qrcode'
import DrawCard from './components/index.vue'
import NoDrawEmpty from '@/packages/static/images/drawing/empty.png'

const emit = defineEmits(['click'])
const props = withDefaults(
    defineProps<{
        i?: number
        index?: number
        status?: number
        setTaskRecordFunc: any
    }>(),
    {
        i: 0,
        index: 0,
        status: 3,
        setTaskRecordFunc: () => {}
    }
)

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

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

const queryList = async (pageNo: number, pageSize: number) => {
    try {
        const { lists } = await qrcodeRecord({
            status: props.status,
            pageNo,
            pageSize
        })
        if (props.i == props.index) {
            props.setTaskRecordFunc({
                reload: paging.value,
                lists: lists
            })
        }
        paging.value.complete(lists)
    } catch (e) {
        console.log('报错=>', e)
        //TODO handle the exception
        paging.value.complete(false)
    }
}
</script>

<style scoped></style>
