<template>
  <BasicModal
    title="جزئیات اعزام"
    title-en="Dispatch Details"
    width="95%"
    max-width="56rem"
    min-width="auto"
  >
    <div class="dispatch-details">
      <div class="dispatch-details__row dispatch-details__row--summary">
        <LineInfoBlock
          title="نام مأموریت/اعزام"
          :desc="dispatch.missionName || dispatch.title || '—'"
        />
        <LineInfoBlock title="کد اعزام" :numeric-desc="dispatch.code || '—'" />
        <LineInfoBlock title="تاریخ اعزام" :numeric-desc="dispatch.dispatchDate || '—'" />
        <LineInfoBlock title="وضعیت فعلی" :desc="dispatch.statusLabel || '—'" />
        <LineInfoBlock title="نام درخواست کننده" :desc="dispatch.requesterName || '—'" />
      </div>

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

      <div class="dispatch-details__row dispatch-details__row--body">
        <LineInfoBlock title="نتیجه یا دستاورد مأموریت" :desc="dispatch.result || '—'" />
      </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: 'DispatchDetailsModal' })

const { getModal } = useModal()

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

<style lang="scss" scoped>
.dispatch-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>
