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

<template>
  <v-dialog v-model="dialog" max-width="700px">
    <v-card>
      <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-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="text-subtitle-2 text-grey 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>
                  <template v-slot:prepend>
                    <v-icon color="primary">mdi-package-variant</v-icon>
                  </template>
                  <v-list-item-title>محصول</v-list-item-title>
                  <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>
                </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>
            </v-card>
          </v-col>

          <v-col cols="12" md="6">
            <v-card variant="outlined" class="pa-4">
              <div class="text-subtitle-2 text-grey 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>
                    {{ serial.warrantyEndDate ? formatDate(serial.warrantyEndDate) : 'تعیین نشده' }}
                  </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>
            </v-card>
          </v-col>

          <v-col cols="12" v-if="serial.description">
            <v-card variant="outlined" class="pa-4">
              <div class="text-subtitle-2 text-grey 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="text-subtitle-2 text-grey 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 'active': return 'success'
    case 'inactive': return 'grey'
    case 'expired': return 'warning'
    case 'used': return 'info'
    default: return 'grey'
  }
}

const getStatusText = (status: string) => {
  switch (status) {
    case 'active': return 'فعال'
    case 'inactive': return 'غیرفعال'
    case 'expired': return 'منقضی شده'
    // case 'used': return 'استفاده شده'
    default: return status
  }
}

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 scoped>
.v-dialog {
  direction: rtl;
}
</style>