<script setup lang="ts">
import firendItem from "./friend_item.vue";
import { Pagination } from "ant-design-vue";
import { ref } from "vue";
import {
    Card,
    CardContent,
    CardHeader,
    CardTitle,
} from '../../../../../../packages/@core/ui-kit/shadcn-ui';
import type { friendRecord } from "../../../model/type";
import CardFooter from "../../../../../../packages/@core/ui-kit/shadcn-ui/src/ui/card/CardFooter.vue";
defineProps({
    Items: {
        type: Array as () => friendRecord[],
        required: true
    },
    title: {
        type: String,
        required: true
    }
})
const currentPage = ref(1);
</script>

<template>
    <Card style="background-color: rgb(236, 214, 179);" class="hover:shadow-lg">
        <CardHeader class="py-4 border-b border-gray-200">
            <CardTitle class="text-lg">
                <div class="flex">
                    <span class="text-center text-black">{{ title }}</span>
                </div>
            </CardTitle>
        </CardHeader>
        <CardContent class="flex flex-wrap p-0 items-center justify-center ">
                <template v-if="Items.length === 0">
                    <div class="flex flex-col items-center justify-center w-full h-full py-10">
                        <p class="text-gray-500">暂无好友数据</p>
                    </div>
                </template>
            <template v-for="(item, index) in Items.slice((currentPage - 1) * 10, currentPage * 10)" :key="index">
                <firendItem :friend="item"></firendItem>
            </template>
        </CardContent>
        <CardFooter class="py-4 flex flex-col items-center border-t border-gray-200 mt-2">
            <Pagination 
            v-model:current="currentPage"
            :total="Items.length"
            :pageSize="10"
            :showSizeChanger="false"
            >

            </Pagination>
        </CardFooter>
    </Card>
</template>