<template>
    <view class="flex flex-col h-screen">
        <w-navbarComp>
            <template #left>
                <view class="back-icon" @click="handleBack">
                    <TIcon name="icon-left" :size="30" />
                </view>
            </template>
            <template #title>
                <view class="w-4/5 flex items-center justify-center">
                    <date-picker
                        :bindingDate="queryParams.date"
                        format="YYYY-MM"
                        @confirm="confirmDate"
                    />
                </view>
            </template>
        </w-navbarComp>
        <view class="flex-1 overflow-auto px-[24rpx] pt-[24rpx] bg-[#F8F8F8]">
            <z-paging
                ref="paging"
                v-model="dataList"
                @query="queryList"
                :fixed="false"
                height="100%"
            >
                <summary-card
                    v-for="(item, index) in dataList"
                    :key="`unique-${index}`"
                    :item="item"
                />
            </z-paging>
        </view>
    </view>
</template>

<script setup lang="ts">
import { onLoad } from '@dcloudio/uni-app'
import { ref, reactive } from 'vue'
import summaryCard, { ISummaryCard } from './summary-card.vue'
import { useZPaging } from '@/hooks/useZPaging'
import datePicker from '@/components/date-picker/date-picker.vue'
import { apiSummaryLists } from '@/api/summary'
import { formatDate } from '@/utils/util'

const dataList = ref<ISummaryCard[]>([])
const queryParams = reactive({
    date: formatDate(new Date().getTime(), 'YYYY-MM')
})

const { paging, queryList, refresh } = useZPaging(queryParams, apiSummaryLists)
const confirmDate = (selectedDate: number) => {
    queryParams.date = formatDate(selectedDate, 'YYYY-MM')
    refresh(queryParams)
}
const handleBack = () => {
    uni.navigateBack()
}
const bindingType = ref('')
onLoad(option => {
    bindingType.value = option?.type || ''
})
</script>
<style scoped></style>
