<template>
  <van-swipe-cell>
    <div
      @click="$emit('onChatPage')"
      class="w-full h-82 relative flex justify-start items-center px-16 mb-20"
    >
      <div class="w-48 h-48">
        <van-badge v-if="messagesNumber > 0" v-bind="messageNumber(messagesNumber)" max="99">
          <div
            v-if="itemData?.avatar"
            class="w-48 h-48 rounded-full overflow-hidden flex justify-center items-center"
          >
            <img class="w-full h-full shrink-0 object-cover" :src="itemData?.avatar" alt="" />
          </div>
          <div
            v-else
            class="w-48 h-48 bg-[#E7E7E7] rounded-full overflow-hidden flex justify-center items-center"
          >
            <img
              class="w-24 h-24 shrink-0 object-cover"
              src="~/assets/img/chat/user-grey.svg"
              alt=""
            />
          </div>
        </van-badge>

        <template v-else>
          <div
            v-if="itemData?.avatar"
            class="w-48 h-48 rounded-full overflow-hidden flex justify-center items-center"
          >
            <img class="w-full h-full shrink-0 object-cover" :src="itemData?.avatar" alt="" />
          </div>
          <div
            v-else
            class="w-48 h-48 bg-[#E7E7E7] rounded-full overflow-hidden flex justify-center items-center"
          >
            <img
              class="w-24 h-24 shrink-0 object-cover"
              src="~/assets/img/chat/user-grey.svg"
              alt=""
            />
          </div>
        </template>
      </div>

      <div class="h-48 w-245 ml-12 flex flex-wrap">
        <h1 class="line-clamp-1 mb-8 w-full text-xl text-black-3 font-semibold">单个会话</h1>
        <p class="line-clamp-1 w-full h-20 text-base text-black/[0.6] leading-3xl">你吃饭了么</p>
      </div>

      <div class="w-35 h-48 shrink-0">
        <p class="text-black/[0.6] text-sm text-end">02:06{{ itemData?.time }}</p>

        <div v-if="itemData?.isNotDisturb == 1" class="w-full h-16 shrink-0 mt-12 flex justify-end">
          <img
            class="w-16 h-16 object-cover"
            src="~/assets/img/chat/close-remind.svg
            "
            alt=""
          />
        </div>
      </div>
      <div class="absolute bottom-0 right-0 w-[96%] h-1 border-b-[1px]"></div>
    </div>

    <template #right>
      <div class="pl-2 h-full">
        <van-button
          style="height: 100%"
          square
          text="设为免打扰"
          @click="$emit('onNoBother')"
          type="danger"
          color="#FF9300"
          class="delete-button h-full"
        />
        <van-button
          style="height: 100%"
          square
          text="不显示聊天"
          @click="$emit('onNoBother')"
          type="danger"
          color="#E37318"
          class="delete-button"
        />
        <van-button
          style="height: 100%"
          square
          text="删除聊天"
          @click="$emit('onConvDelete')"
          type="danger"
          class="delete-button"
        />
      </div>
    </template>
  </van-swipe-cell>
</template>

<script setup>
defineProps({
  itemData: {
    type: Object,
    default: () => ({})
  }
})
defineEmits(['onNoBother', 'onConvDelete', 'onChatPage'])

const messagesNumber = ref(10)

// 消息数量通知的展示  需要动态的展示
const messageNumber = (content) => {
  let messageNumberObj = {}
  if (content <= 1) {
    messageNumberObj = {
      offset: [-5, 4],
      dot: true,
      content
    }
  }
  if (content > 1) {
    messageNumberObj = {
      offset: [-10, 7],
      content
    }
  }
  return messageNumberObj
}
</script>

<style lang="scss" scoped></style>
