<template>
    <n-thing @click="goDetail">
        <template #avatar>
            <n-avatar
                @click.stop="goAgent"
                v-if="chatRole.pic"
                class="!block"
                round
                :size="size === 'mini' ? 40 : 88"
                :src="chatRole.pic"
            >
            </n-avatar>
            <n-avatar @click.prevent="goAgent" v-else class="!block" round :size="size === 'mini' ? 40 : 88">
                {{ chatRole.name?.[0] }}
            </n-avatar>
        </template>
        <template #header>
            <div class="text-lg font-semibold" :class="{ '!text-base': size === 'mini' }">{{ chatRole.name }}</div>
        </template>
        <template #header-extra> </template>
        <template #description>
            <div class="text-xs text-[#797A8A]" v-if="size == 'mini'">{{ timeStr }}</div>
            <div class="text-xs text-[#797A8A]" v-else>
                {{ chatRole.chatted }}人聊过｜{{ chatRole.dynamicNumber }}个动态
            </div>
            <n-space size="small" class="mt-2" v-if="size !== 'mini'">
                <n-tag
                    :bordered="false"
                    :color="{
                        color: getColor(),
                        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 items-center">
                <div v-if="size !== 'mini'">{{ timeStr }}</div>
                <div class="flex-1"></div>
                <div class="flex items-center" v-if="isList">
                    <img src="@/assets/icon_pingjia.png" class="w-[24px]" alt="" />
                    <span>{{ info.commentNum }}</span>
                </div>
                <like-btn class="ml-[10px]" @like="like" :liked="info.isLiked">{{ info.momentsLikeCount }}</like-btn>
            </div>
        </template>
    </n-thing>
</template>

<script setup lang="ts">
import { NAvatar, NThing, NSpace, NTag, NImage } from 'naive-ui'
import { computed } from 'vue'
import { LikeBtn } from '@/components/common'
import { formatDistanceToNowStrict, isToday, format } from 'date-fns'
import zhCN from 'date-fns/locale/zh-CN'
import { getColor } from '@/plugins/TabColors'
import { fetchLikeMoments } from '@/api'
import { useUserStore } from '@/store'

interface Emit {
    (ev: 'goDetail', id: number | null): void
    (ev: 'goAgent', id: number | null): void
    (ev: 'update:info', data: any): void
}

const props = defineProps({
    info: {
        type: Object,
        default: () => {
            return {}
        }
    },
    size: {
        type: String,
        default: 'medium'
    },
    isList: {
        type: Boolean,
        defalut: true
    }
})

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 formatDistanceToNowStrict(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)
}

function goAgent() {
    emit('goAgent', props.info.userId)
}

const userStore = useUserStore()
function like() {
    fetchLikeMoments(userStore.userInfo.id, props.info.id).then(res => {
        if (props.info.isLiked) {
            emit('update:info', {
                ...props.info,
                isLiked: false,
                momentsLikeCount: props.info.momentsLikeCount - 1
            })
        } else {
            emit('update:info', {
                ...props.info,
                isLiked: true,
                momentsLikeCount: props.info.momentsLikeCount + 1
            })
        }
    })
}
</script>
<style lang="less" scoped>
:deep(.n-thing-header-wrapper) {
    display: flex;
    flex-direction: column;
    justify-content: center;
}
</style>
