<template>
    <div class="flex chatlistitem relative -mr-1">
        <div class="self-center mr-4 flex-shrink-0">
            <img
                v-if="userType === eRole.staff"
                class="w-10 h-10 rounded-md object-cover"
                src="@/assets/icons/avatar.png"
                alt="avatar"
            />
            <img
                v-else-if="isRobootCard"
                class="w-10 h-10 rounded-md object-contain"
                :class="{'filterGray': isDeleted}"
                src="@/assets/img/roboot.png"
                alt="avatar"
            />
            <img
                v-else-if="!isRobootCard"
                class="w-10 h-10 rounded-md object-contain"
                src="@/assets/icons/staff.png"
                alt="avatar"
            />
        </div>
        <div class="flex-grow right-box overflow-hidden pr-1">
            <div class="flex justify-between mt-5">
                <div
                    class="id whitespace-nowrap overflow-hidden overflow-ellipsis flex-grow flex-shrink"
                >{{ displayName }}</div>
                <div
                    class="txt whitespace-nowrap overflow-hidden overflow-ellipsis flex-shrink-0"
                >{{ datetime && timestampFormat2(datetime) }}</div>
            </div>
            <div class="flex justify-between mb-5 mt-1">
                <div
                    class="overflow-hidden overflow-ellipsis whitespace-nowrap txt"
                >{{ latest_msg_content }}</div>
                <div
                    v-if="unReadMsgNum"
                    class="dot flex items-center justify-center rounded-full flex-shrink-0 flex-grow-0 px-1"
                >{{ unReadMsgNum }}</div>
            </div>
        </div>
    </div>
</template>
<script setup lang="ts">
import { eRole } from "@/types/roleType";
import { timestampFormat2 } from "@/utils/time";
import { PropType } from "@vue/runtime-core";

const props = defineProps({
    avatar_url: { type: String, default: '--' },
    id: { type: String, default: '--' },
    latest_msg_content: { type: String, default: '--' },
    unReadMsgNum: {
        type: Number,
        default: 10
    },
    displayName: String,
    datetime: {
        type: Number,
    },
    userType: {
        type: Number as PropType<eRole>
    },
    isRobootCard: {
        type: Boolean
    },
    isDeleted: {
        type: Boolean
    }
})

</script>
<style lang="less">
.chatlistitem {
    .id {
        font-size: 14px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #333333;
    }
    .txt {
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #8d92af;
    }
    .dot {
        height: 20px;
        min-width: 20px;
        background: #f03a30;
        box-shadow: 0px 4px 6px 0px rgba(240, 58, 48, 0.5);
        font-size: 12px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #ffffff;
    }
    .right-box {
        border-bottom: 1px solid #eaeaeb;
    }
}
</style>