hesabixCore/webUI/src/components/plugins/warranty/SerialViewDialog.vue

<template>
  <v-dialog v-model="dialog" max-width="700px">
    <v-card class="serial-view">
      <v-card-title class="d-flex align-center p-3 gap-2">
        <v-icon class="mr-3" color="primary">mdi-shield-check</v-icon>
        <span>جزئیات سریال گارانتی</span>
        <v-spacer></v-spacer>
        <v-chip :color="getStatusColor(serial?.status)" size="small">
          {{ getStatusText(serial?.status) }}
        </v-chip>
        <v-chip v-if="serial?.expired" color="error" size="small" class="opacity-100">
          منقضی شده
        </v-chip>
      </v-card-title>

      <v-card-text v-if="serial">
        <v-row>
          <v-col cols="12" md="6">
            <v-card variant="outlined" class="pa-4">
              <div class="section-title mb-2">اطلاعات سریال</div>
              <v-list>
                <v-list-item>
                  <template v-slot:prepend>
                    <v-icon color="primary">mdi-barcode</v-icon>
                  </template>
                  <v-list-item-title>سریال گارانتی</v-list-item-title>
                  <v-list-item-subtitle class="font-weight-bold">
                    {{ serial.serialNumber }}
                  </v-list-item-subtitle>
                </v-list-item>

                <v-list-item v-if="serial.commoditySerial">
                  <template v-slot:prepend>
                    <v-icon color="primary">mdi-barcode</v-icon>
                  </template>
                  <v-list-item-title>سریال کالا</v-list-item-title>
                  <v-list-item-subtitle class="font-weight-bold">
                    {{ serial.commoditySerial }}
                  </v-list-item-subtitle>
                </v-list-item>

                <v-list-item>
                  <template v-slot:prepend>
                    <v-icon color="primary">mdi-package-variant</v-icon>
                  </template>
                  <v-list-item-title>کالا</v-list-item-title>
                  <router-link :to="`/acc/commodity/mod/${serial.commodity?.code}`">
                    <v-list-item-subtitle>
                      <div class="font-weight-bold">{{ serial.commodity?.name }}</div>
                      <div class="text-caption">کد: {{ serial.commodity?.code }}</div>
                    </v-list-item-subtitle>
                  </router-link>
                </v-list-item>

                <v-list-item>
                  <template v-slot:prepend>
                    <v-icon color="primary">mdi-calendar</v-icon>
                  </template>
                  <v-list-item-title>تاریخ ثبت</v-list-item-title>
                  <v-list-item-subtitle>{{ formatDate(serial.dateSubmit) }}</v-list-item-subtitle>
                </v-list-item>
                <v-list-item v-if="serial.allocatedToDocumentCode">
                  <template v-slot:prepend>
                    <v-icon color="primary">mdi-file-document</v-icon>
                  </template>
                  <v-list-item-title>سند مرتبط</v-list-item-title>
                  <router-link :to="`/acc/storeroom/ticket/view/${serial.allocatedToDocumentCode}`">
                    <v-list-item-subtitle class="font-weight-bold text-primary opacity-100">
                      {{ serial.allocatedToDocumentCode }}
                    </v-list-item-subtitle>
                  </router-link>
                </v-list-item>
              </v-list>
            </v-card>
          </v-col>

          <v-col cols="12" md="6">
            <v-card variant="outlined" class="pa-4">
              <div class="section-title mb-2">اطلاعات گارانتی</div>
              <v-list>
                <v-list-item>
                  <template v-slot:prepend>
                    <v-icon color="success">mdi-calendar-start</v-icon>
                  </template>
                  <v-list-item-title>شروع گارانتی</v-list-item-title>
                  <v-list-item-subtitle>
                    {{ serial.warrantyStartDate ? formatDate(serial.warrantyStartDate) : 'تعیین نشده' }}
                  </v-list-item-subtitle>
                </v-list-item>

                <v-list-item>
                  <template v-slot:prepend>
                    <v-icon color="warning">mdi-calendar-end</v-icon>
                  </template>
                  <v-list-item-title>پایان گارانتی</v-list-item-title>
                  <v-list-item-subtitle>
                    <div class="d-inline-flex align-center">
                      <span>{{ serial.warrantyEndDate ? formatDate(serial.warrantyEndDate) : 'تعیین نشده' }}</span>
                    </div>
                  </v-list-item-subtitle>
                </v-list-item>

                <v-list-item>
                  <template v-slot:prepend>
                    <v-icon color="info">mdi-account</v-icon>
                  </template>
                  <v-list-item-title>ثبت کننده</v-list-item-title>
                  <v-list-item-subtitle>{{ serial.submitter?.name }}</v-list-item-subtitle>
                </v-list-item>

                <v-list-item v-if="serial.buyer">
                  <template v-slot:prepend>
                    <v-icon color="info">mdi-account-check</v-icon>
                  </template>
                  <v-list-item-title>خریدار</v-list-item-title>
                  <router-link :to="`/acc/persons/card/view/${serial.buyer?.code}`">
                    <v-list-item-subtitle class="opacity-100">
                      <div class="font-weight-bold text-primary">{{ serial.buyer?.nikename || serial.buyer?.name }}
                      </div>
                      <div class="text-caption">{{ serial.buyer?.mobile }}</div>
                    </v-list-item-subtitle>
                  </router-link>
                </v-list-item>

                <v-list-item v-if="serial.activation">
                  <template v-slot:prepend>
                    <v-icon :color="serial.activation === 'active' ? 'success' : 'warning'">mdi-shield-check</v-icon>
                  </template>
                  <v-list-item-title>وضعیت فعال‌سازی</v-list-item-title>
                  <v-list-item-subtitle>
                    <v-chip :color="serial.activation === 'active' ? 'success' : 'warning'" size="small">
                      {{ serial.activation === 'active' ? 'فعال' : 'غیرفعال' }}
                    </v-chip>
                  </v-list-item-subtitle>
                </v-list-item>

                <v-list-item v-if="serial.activation && serial.activationAt">
                  <template v-slot:prepend>
                    <v-icon color="success">mdi-calendar-check</v-icon>
                  </template>
                  <v-list-item-title>تاریخ فعال‌سازی</v-list-item-title>
                  <v-list-item-subtitle>{{ formatDate(serial.activationAt) }}</v-list-item-subtitle>
                </v-list-item>
              </v-list>
            </v-card>
          </v-col>

          <v-col cols="12" v-if="serial.description">
            <v-card variant="outlined" class="pa-4">
              <div class="section-title mb-2">توضیحات</div>
              <p class="text-body-1">{{ serial.description }}</p>
            </v-card>
          </v-col>

          <v-col cols="12" v-if="serial.notes">
            <v-card variant="outlined" class="pa-4">
              <div class="section-title mb-2">یادداشت‌ها</div>
              <p class="text-body-1">{{ serial.notes }}</p>
            </v-card>
          </v-col>
        </v-row>
      </v-card-text>

      <v-card-actions>
        <v-spacer></v-spacer>
        <v-btn color="primary" @click="close">بستن</v-btn>
      </v-card-actions>
    </v-card>
  </v-dialog>
</template>

<script setup lang="ts">
import moment from 'jalali-moment';
import { computed } from 'vue'

const props = defineProps<{
  modelValue: boolean
  serial?: any
}>()

const emit = defineEmits<{
  'update:modelValue': [value: boolean]
  close: []
}>()

const dialog = computed({
  get: () => props.modelValue,
  set: (value) => emit('update:modelValue', value)
})

const close = () => {
  emit('close')
}

const getStatusColor = (status: string) => {
  switch (status) {
    case 'available': return 'success'
    case 'allocated': return 'info'
    case 'verified': return 'primary'
    case 'bound': return 'warning'
    case 'consumed': return 'teal'
    case 'void': return 'grey'
    default: return 'grey'
  }
}

const getStatusText = (status: string) => {
  switch (status) {
    case 'available': return 'آزاد'
    case 'allocated': return 'تخصیص یافته'
    case 'verified': return 'تأیید شده'
    case 'bound': return 'متصل'
    case 'consumed': return 'مصرف شده'
    case 'void': return 'باطل'
    default: return 'نامشخص'
  }
}

const formatDate = (date: string) => {
  if (!date) return '-'

  if (date.includes('/') && date.split('/')[0].length === 4) {
    return date
  }

  try {
    const dateObj = new Date(date)
    if (isNaN(dateObj.getTime())) return '-'

    const jMoment = moment(dateObj)
    const persianYear = jMoment.jYear()
    const persianMonth = jMoment.jMonth() + 1
    const persianDay = jMoment.jDate()

    return `${persianYear}/${persianMonth.toString().padStart(2, '0')}/${persianDay.toString().padStart(2, '0')}`
  } catch (error) {
    return date
  }
}
</script>

<style>
.v-dialog {
  direction: rtl;
}

/* .serial-view .v-card-title {
  color: #fff;
} */

.serial-view .v-icon {
  opacity: 0.95;
}

.serial-view .v-list-item-title {
  font-weight: 600;
  color: #263238;
}

.serial-view .v-list-item-subtitle {
  color: #111;
  font-weight: 600;
}

.serial-view .v-list-item__prepend .v-icon {
  color: #0a4798 !important;
}

.serial-view .section-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: #37474f;
}

.serial-view .v-card[variant="outlined"] {
  border-color: #e0e0e0 !important;
}

.v-list-item--one-line .v-list-item-subtitle {
  -webkit-line-clamp: unset !important;
  line-clamp: unset !important;
}
</style>