<template>
    <view class="flex flex-col min-h-0 h-full">
        <option-com
            v-model:startDate="startDate"
            v-model:endDate="endDate"
            :orderAmount="orderAmount"
            :type="type"
            @change="paging?.reload()"
        />
        <view class="h-full">
            <z-paging
                auto-show-back-to-top
                :auto="i == index"
                ref="paging"
                v-model="dataList"
                :data-key="i"
                @query="queryList"
                :fixed="false"
                height="100%"
            >
                <view
                    v-for="(item, index) in dataList"
                    :key="index"
                    class="px-[30rpx] pb-3"
                    @click="goToOrder(item.id)"
                >
                    <card
                        :sn="item.sn"
                        :order_status_desc="item.order_status_desc"
                        :order_goods="item.order_goods"
                        :order_amount="item.order_amount"
                        :true_server_finish_time="item.true_server_finish_time"
                        :order_status="item.order_status"
                        :settle_info="item.settle_info"
                        :type="type"
                        :total_num="item.total_num"
                        :is_settle="item.is_settle"
                    ></card>
                </view>
            </z-paging>
        </view>
    </view>
</template>

<script lang="ts" setup>
import { ref, watch, nextTick, shallowRef } from 'vue'
import cashOutIcon from '../../../static/images/cashOutIcon.png'
import card from './card.vue'
import optionCom from './option.vue'
import { getInComeLists } from '@/api/order'

const props = withDefaults(
    defineProps<{
        type: number
        i: number
        index: number
    }>(),
    {
        type: 0
    }
)

const paging = shallowRef<any>(null)
const dataList = ref<any>([])
const isFirst = ref<boolean>(true)
const startDate = ref('')
const endDate = ref('')
const orderAmount = ref(0)

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

// watch(
//     () => [startDate.value, endDate.value],
//     () => {
//         paging.value?.reload()
//     }
// )

// 去到订单详情页面
const goToOrder = (id: number) => {
    uni.navigateTo({
        url: `/packages/pages/order_detail/order_detail?id=${id}`
    })
}

const queryList = async (page_no: number, page_size: number) => {
    try {
        const { lists, extend } = await getInComeLists({
            type: props.type,
            start_time: startDate.value,
            end_time: endDate.value,
            page_no,
            page_size
        })
        orderAmount.value = extend.settle_amount
        paging.value.complete(lists)
    } catch (e) {
        console.log('报错=>', e)
        //TODO handle the exception
        paging.value.complete(false)
    }
}
</script>

<style scoped></style>
