<template>
  <BasicModal
    title="جزئیات درخواست"
    title-en="Request Details"
    width="95%"
    max-width="56rem"
    min-width="auto"
  >
    <div class="request-details">
      <div class="request-details__row request-details__row--summary">
        <LineInfoBlock
          title="نام و نام خانوادگی درخواست کننده"
          :desc="request.requesterName || '—'"
        />
        <LineInfoBlock title="تاریخ ثبت درخواست" :numeric-desc="request.requestDate || '—'" />
        <LineInfoBlock title="شماره تماس" :numeric-desc="request.phone || '—'" />
        <LineInfoBlock title="وضعیت" :desc="request.statusLabel || '—'" />
      </div>

      <div class="request-details__row">
        <LineInfoBlock title="آدرس" :desc="request.address || '—'" />
      </div>

      <div class="request-details__row request-details__row--body">
        <LineInfoBlock title="توضیحات" :desc="request.description || '—'" />
      </div>
    </div>
  </BasicModal>
</template>

<script setup>
import { computed } from 'vue'
import useModal from '@/composables/useModal'
import BasicModal from '@/components/BasicModal.vue'
import LineInfoBlock from '@/components/blocks/LineInfoBlock.vue'

defineOptions({ name: 'RequestDetailsModal' })

const { getModal } = useModal()

const request = computed(() => getModal('RequestDetailsModal')?.data ?? {})
</script>

<style lang="scss" scoped>
.request-details {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  font-family: var(--font-family-fa);

  &__row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;

    &--summary {
      flex-direction: row;
      justify-content: flex-start;

      :deep(.line-info) {
        flex: 1 1 auto;
        min-width: 8rem;
      }
    }

    &--body :deep(.line-info__desc) {
      line-height: 1.7;
    }
  }
}
</style>
