<template>
    <n-thing @click="goDetail">
        <template #avatar>
            <n-avatar v-if="chatRole.pic" class="!block" round :size="88" :src="chatRole.pic"> </n-avatar>
            <n-avatar v-else class="!block" round :size="88"> {{ chatRole.name?.[0] }} </n-avatar>
        </template>
        <template #header>
            <div class="text-lg font-semibold">{{ chatRole.name }}</div>
        </template>
        <template #header-extra> </template>
        <template #description>
            <div class="text-xs text-[#797A8A]">1.5w+人聊过｜20个动态</div>
            <n-space size="small" class="mt-2">
                <n-tag
                    :bordered="false"
                    :color="{
                        color: '#D0FEFF',
                        textColor: '#000'
                    }"
                    round
                    size="small"
                    v-for="(item, index) in labels"
                    :key="index"
                >
                    {{ item }}
                </n-tag>
            </n-space>
        </template>
        {{ info.content }}
        <!-- <template #footer>
            <n-image
                width="200"
                object-fit="scale-down"
                class="rounded-lg"
                src="https://07akioni.oss-cn-beijing.aliyuncs.com/07akioni.jpeg"
                :show-toolbar="false"
            />
        </template> -->
        <template #action>
            <div class="flex text-[#939599] text-xs">
                <div>{{ timeStr }}</div>
                <div class="flex1"></div>
                <div></div>
            </div>
        </template>
    </n-thing>
</template>

<script setup lang="ts">
import { NAvatar, NThing, NSpace, NTag, NImage } from 'naive-ui'
import { computed } from 'vue'
import { formatDistanceToNow, isToday, format } from 'date-fns'
import zhCN from 'date-fns/locale/zh-CN'

interface Emit {
    (ev: 'goDetail', id: number | null): void
}

const props = defineProps({
    info: {
        type: Object,
        default: () => {
            return {}
        }
    }
})

const emit = defineEmits<Emit>()

const labels = computed(() => {
    return props.info.chatRole?.labels || []
})

const chatRole = computed(() => {
    return props.info.chatRole || {}
})
const timeStr = computed(() => {
    if (props.info.createdAt) {
        if (isToday(new Date(props.info.createdAt))) {
            return formatDistanceToNow(new Date(props.info.createdAt), { addSuffix: true, locale: zhCN })
        } else {
            return format(new Date(props.info.createdAt), 'MM-dd HH:mm')
        }
    }
    return ''
})

function goDetail() {
    emit('goDetail', props.info.id)
}
</script>
