<template>
  <div :class="{
         'bg-purple': !room.is_my_message && !room.is_reading
       }" class="relative flex items-center px-2 xl:px-8 hover:bg-indigo-300 cursor-pointer transition-colors"
       @click="selectRoom(room)"
  >
    <div v-if="!room.is_reading && !room.is_my_message" class="absolute bottom-1 right-3 text-xxs text-white">
      <span>не прочитано</span>
    </div>
    <div v-if="room.is_my_message" class="absolute bottom-0 right-3">
      <div v-show="!room.is_reading" class="flex relative w-[30px] h-[24px] text-gray-light">
        <svg xmlns="http://www.w3.org/2000/svg"
             width="16"
             height="16" viewBox="0 0 24 24"
             fill="none" stroke="currentColor"
             stroke-width="2" stroke-linecap="round"
             stroke-linejoin="round" class="absolute top-0 right-0"
        ><polyline points="20 6 9 17 4 12"></polyline></svg>
      </div>
      <div v-show="room.is_reading" class="flex relative w-[30px] h-[24px] text-orange">
        <svg xmlns="http://www.w3.org/2000/svg"
             width="16"
             height="16" viewBox="0 0 24 24"
             fill="none" stroke="currentColor"
             stroke-width="2" stroke-linecap="round"
             stroke-linejoin="round" class="absolute top-0 right-[5px]"
        ><polyline points="20 6 9 17 4 12"></polyline></svg>
        <svg xmlns="http://www.w3.org/2000/svg"
             width="16"
             height="16" viewBox="0 0 24 24"
             fill="none" stroke="currentColor"
             stroke-width="2" stroke-linecap="round"
             stroke-linejoin="round" class="absolute top-0 right-0"
        ><polyline points="20 6 9 17 4 12"></polyline></svg>
      </div>
    </div>

    <div class="absolute top-2 right-2 text-xxs lg:text-xs text-gray-light">
      {{ room.updated_at_human }}
    </div>
    <user-avatar :user="room.correspond" size="small"
                 class="flex-shrink-0 w-10 h-10 lg:w-12 lg:h-12 xl:w-14 xl:h-14 text-sm xl:text-lg"
    />
    <div class="ml-3 flex flex-col w-4/5 overflow-hidden">
      <span class="text-sm lg:text-base block text-white">{{ room.correspond.name }}</span>
      <span class="text-xs lg:text-sm truncate text-gray-light">
        <span v-if="room.is_my_message" class="text-orange">Вы:</span>
        {{ room.message }}
      </span>
    </div>
  </div>
</template>

<script>
import UserAvatar from '@/Shared/Misc/UserAvatar.vue'
export default {
    components: {
        UserAvatar,
    },
    props: {
        room: {
            type: Object,
            default: () => {}
        },
    },
    emits:{
        'select-room': null
    },

    setup(props, {emit}){
        const selectRoom = (room) => {
            emit('select-room', room)
        }

        return {
            selectRoom
        }
    },

}
</script>
