<script setup lang="ts">
import {Tag} from "ant-design-vue";
import { VbenAvatar } from '../../../../../../packages/@core/ui-kit/shadcn-ui/src/components';
import type {friendRecord} from "#/model/type";
defineProps({
    // 定义一个名为 "friend" 的 prop，类型为对象，包含好友的相关信息
    friend: {
        type: Object as () => friendRecord,
        required: true, // 这个 prop 是必需的
    },
});
</script>

<template>
    <div class="flex items-center p-4 border-b border-black pl-12  ml-4 mr-4 mt-2 w-[60%]" style="background: rgb(255, 254, 231);border-radius: 1cm; padding: 1px 10px 1px 10px;justify-content: space-between;">
         <VbenAvatar :src="'./' + friend.avatarUrl" class="w-12 h-12 rounded-full " />
         <div class="ml-5 w-full">
            <div class="flex flex-row items-center w-full">
             <h2 class="text-sm font-semibold text-black">{{ friend.NickName }}</h2>
             <Tag class="text-xs ml-2" color="green" v-if="friend.onlineStatus">在线</Tag>
             <Tag class="text-xs ml-2" color="red" v-else>离线</Tag>
            </div>
             <p class="text-xs text-gray-500">uid:{{ friend.Uid }}</p>
         </div>
         <div class="ml-40 flex items-center relative">
            <img src="../../../../public/merge_pic_expplate2.png" />
            <span class="absolute inset-0 flex items-center justify-center text-white font-bold">Lv.{{ friend.Level }}</span>
         </div>
    </div>
</template>