fabric_trade_admin/src/views/orders/components/OrderDetailContent.vue

<script setup lang="ts">
import AdminIcon from '@/components/icons/AdminIcon.vue'
import StatusBadge from '@/components/ui/StatusBadge.vue'
import { formatCurrency, formatMeterage, formatNumber } from '@/utils/format'
import type { Order } from '@/types'

defineProps<{
  order: Order
  settlementLabel: (method: string) => string
  layout?: 'desktop' | 'compact'
}>()

defineEmits<{
  pricing: []
  checks: []
}>()
</script>

<template>
  <div class="order-detail">
    <div class="order-detail__id">
      <strong>{{ order.orderNumber }}</strong>
      <StatusBadge :status="order.status" />
    </div>

    <div class="order-detail__section">
      <h3 class="order-detail__section-title">اطلاعات مشتری</h3>
      <div class="admin-info-grid">
        <div class="admin-info-row">
          <AdminIcon name="building" :size="16" />
          <span class="admin-info-row__label">شرکت:</span>
          <span class="admin-info-row__value">{{ order.customerName }}</span>
        </div>
        <div class="admin-info-row">
          <AdminIcon name="phone" :size="16" />
          <span class="admin-info-row__label">تلفن:</span>
          <span class="admin-info-row__value">{{ order.customerPhone ?? '—' }}</span>
        </div>
        <div class="admin-info-row">
          <AdminIcon name="id-card" :size="16" />
          <span class="admin-info-row__label">شناسه ملی:</span>
          <span class="admin-info-row__value">{{ order.customerNationalId ?? '—' }}</span>
        </div>
        <div class="admin-info-row">
          <AdminIcon name="user" :size="16" />
          <span class="admin-info-row__label">نوع مشتری:</span>
          <span class="admin-info-row__value">{{ order.customerType ?? '—' }}</span>
        </div>
      </div>
    </div>

    <div class="order-detail__section">
      <h3 class="order-detail__section-title">اطلاعات سفارش</h3>
      <div class="admin-info-grid">
        <div class="admin-info-row">
          <span class="admin-info-row__label">شرکت:</span>
          <span class="admin-info-row__value">{{ order.companyName }}</span>
        </div>
        <div class="admin-info-row">
          <span class="admin-info-row__label">روش تسویه:</span>
          <span class="admin-info-row__value">
            {{ settlementLabel(order.settlementMethod) }} — مختص
          </span>
        </div>
        <div class="admin-info-row">
          <span class="admin-info-row__label">متراژ کل:</span>
          <span class="admin-info-row__value">{{ formatMeterage(order.meterage) }}</span>
        </div>
        <div class="admin-info-row">
          <span class="admin-info-row__label">مبلغ کل:</span>
          <span class="admin-info-row__value">
            {{ order.totalAmount != null ? formatCurrency(order.totalAmount) : 'پس از قیمت‌گذاری' }}
          </span>
        </div>
      </div>
    </div>

    <div v-if="order.items?.length" class="order-detail__section">
      <h3 class="order-detail__section-title">محصولات سفارش</h3>
      <div v-if="layout === 'desktop'" class="admin-table-wrap">
        <table class="admin-table admin-table--compact">
          <thead>
            <tr>
              <th>کالیته</th>
              <th>محصول</th>
              <th>رنگ / نوع</th>
              <th>متراژ</th>
              <th>قیمت تأیید شده</th>
              <th>مبلغ کل</th>
              <th>وضعیت</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="item in order.items" :key="item.id">
              <td>{{ item.catalogCode }}</td>
              <td>{{ item.productName }}</td>
              <td>{{ item.color }}</td>
              <td>{{ formatNumber(item.confirmedMeterage ?? item.requestedMeterage) }}</td>
              <td>{{ item.supplyPrice != null ? formatCurrency(item.supplyPrice) : '—' }}</td>
              <td>{{ item.totalAmount != null ? formatCurrency(item.totalAmount) : '—' }}</td>
              <td><StatusBadge status="pending_review" /></td>
            </tr>
          </tbody>
        </table>
      </div>
      <ul v-else class="order-detail__items">
        <li v-for="item in order.items" :key="item.id" class="order-detail__item">
          <strong>{{ item.productName }}</strong>
          <span>{{ item.catalogCode }} · {{ item.color }}</span>
          <span>{{ formatMeterage(item.confirmedMeterage ?? item.requestedMeterage) }}</span>
          <span v-if="item.supplyPrice != null">قیمت: {{ formatCurrency(item.supplyPrice) }}</span>
          <span v-if="item.totalAmount != null">مبلغ: {{ formatCurrency(item.totalAmount) }}</span>
        </li>
      </ul>
    </div>

    <div class="order-detail__footer">
      <button type="button" class="admin-btn admin-btn--primary admin-btn--sm" @click="$emit('pricing')">
        قیمت‌گذاری سفارش
      </button>
      <button
        v-if="order.settlementMethod === 'check'"
        type="button"
        class="admin-btn admin-btn--outline admin-btn--sm"
        @click="$emit('checks')"
      >
        مدیریت چک‌ها
      </button>
    </div>
  </div>
</template>

<style scoped>
.order-detail__id {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
  font-size: 0.9375rem;
}

.order-detail__section {
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--color-border-light);
}

.order-detail__section-title {
  margin: 0 0 12px;
  font-size: 0.875rem;
  font-weight: 700;
}

.order-detail__items {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.order-detail__item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px;
  background: var(--color-border-light);
  border-radius: var(--radius-sm);
  font-size: 0.8125rem;
}

.order-detail__item strong {
  font-size: 0.875rem;
}

.order-detail__item span {
  color: var(--color-text-muted);
}

.order-detail__footer {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 16px;
}
</style>