<template>
  <div class="flex chatlistitem relative -mr-1">
    <div class="self-center mr-4 flex-shrink-0">
      <img
        v-if="userType !== eRole.user"
        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";

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>
