<template>
  <div v-if="object" class="mt-3 deal-obj-card mr-4 sm:w-1/2 md:w-1/3 lg:w-full p-4 flex">
    <div class="w-full flex">
      <div class="md:w-1/4 mr-2 flex items-center justify-center overflow-hidden h-50">
        <img
            v-if="object.photos && object.photos.length > 0"
            :src="object.photos[0].photo"
            alt="Фото объекта"
            class="h-full w-full object-cover"
        />
      </div>
      <div class="md:w-3/4 ml-2 w-full">
        <div class="created_at flex">
          <div class="created_at mr-4">{{ formattedDate }}</div>
          <div class="mx-4">{{ object.operation_type === 0 ? 'Сдается' : object.operation_type === 1 ? 'Продается' : '' }}</div>
          <div class="ml-4">ID: {{ object.id }}</div>
          <div class="ml-auto cursor-pointer" @click="closeDealObject">
            <img src="@/shared/assets/icons/close.svg" alt="Close">
          </div>
        </div>
        <div class="mt-4 flex">
          <p class="title">{{ object.nazv }}</p>
        </div>
        <div class="mt-4 flex items-center justify-between">
          <div>Тип объекта: {{ object.type }}</div>
          <div>Стоимость объекта: {{ formatPrice(object.stoim) }} рублей</div>
        </div>
        <div class="mt-4 flex justify-between items-center">
          <div>
            <button class="history-task ml-auto flex add-event" :data-id="object.id">
              <img src="@/shared/assets/icons/history-task.svg" alt="История и задачи">
              <span class="ml-4">История и задачи</span>
            </button>
          </div>
          <div>Добавил: {{ object.add_user && object.add_user.fio ? object.add_user.fio : '' }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue';

import dayjs from 'dayjs';
import ru from 'dayjs/locale/ru';

const props = defineProps({
  object: {
    type: Object,
    required: true
  },
  side: {
    type: String,
    required: true
  },
  deal: {
    type: Object,
    required: true
  },
});

const emit = defineEmits(['closeDealObject']);

// Инициализация выбранных объектов при монтировании
// onMounted(() => {
//   if (props.side === 'sideOne' && props.deal.side_one_object_id) {
//     selectedClient.value = props.deal.side_one_clients;
//   } else if (props.side === 'sideTwo' && props.deal.side_two_object_id) {
//     selectedClient.value = props.deal.side_two_clients;
//   }
// });

const formattedDate = computed(() => {
  dayjs.locale(ru);
  return dayjs(props.object.date_add).locale('ru').format('D MMMM YYYY H:m');
});


function formatPrice(value) {
  return new Intl.NumberFormat('ru-RU').format(value);
}

// Обработка закрытия объекта
const closeDealObject = () => {
  //isVisible.value = false;
  emit('closeDealObject', props.side);
};

</script>

<style>
.deal-obj-card {
  background: linear-gradient(360deg, #F5F5F5 0%, #FFFFFF 100%);
  border: 1px solid #E0E0E0;
  border-radius: 5px;

  .created_at, .stage, .obj-id p {
    font-family: 'Lato',sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 100%;
    color: #757575;
  }
  .title {
    font-family: 'Lato',sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 18px;
    line-height: 22px;
    color: #000000;
  }
  .history-task {
    box-sizing: border-box;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 10px 12px;
    background: linear-gradient(360deg, #F5F5F5 0%, #FFFFFF 100%);
    border: 1px solid #CDCED0;
    border-radius: 3px;

    span {
      font-family: 'Lato', sans-serif;
      font-style: normal;
      font-weight: 400;
      font-size: 14px;
      line-height: 100%;
      display: flex;
      align-items: center;
      text-align: center;
      color: #848484;
    }
  }

  .client {
    font-family: 'Lato', sans-serif;
    font-weight: 400;
    font-style: normal;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    font-size: 14px;
    line-height: 17px;
    align-content: flex-start;
    padding: 8px 8px 8px 12px;
    background: #FFFFFF;
    opacity: 0.8;
    border: 1px solid #E0E0E0;
    border-radius: 3px;

    span {
      color: #757575;
      margin-right: 5px;
    }
    p {
      text-decoration-line: underline;
      color: #000000;
    }
  }

}
</style>
