boursecu_user/src/views/base/address/components/Item.vue

<template>
  <div v-if="variant === 'desktop'" class="daddr-card">
    <p class="daddr-card__address">{{ item.address }}</p>

    <div class="daddr-card__meta">
      <div class="daddr-card__row">
        <span class="daddr-card__label">استان:</span>
        <span class="daddr-card__value">{{ item.province }}</span>
      </div>
      <div class="daddr-card__row">
        <span class="daddr-card__label">شهر:</span>
        <span class="daddr-card__value">{{ item.city }}</span>
      </div>
      <div class="daddr-card__row">
        <span class="daddr-card__label">کد پستی:</span>
        <span class="daddr-card__value">{{ item.zip }}</span>
      </div>
      <div class="daddr-card__row">
        <span class="daddr-card__label">شماره تلفن:</span>
        <span class="daddr-card__value">{{ item.phone }}</span>
      </div>
    </div>

    <div class="daddr-card__actions">
      <button
        type="button"
        class="daddr-card__icon-btn daddr-card__icon-btn--edit"
        @click.stop="emits('edit', item)"
      >
        <BasicIcon color="green" icon="vuesax-linear:edit" size="18" />
      </button>
      <button
        type="button"
        class="daddr-card__icon-btn daddr-card__icon-btn--danger"
        @click.stop="deleteConfirmVisible = true"
      >
        <BasicIcon color="red" icon="vuesax-linear:trash" size="18" />
      </button>
    </div>

    <div class="daddr-card__footer">
      <span class="daddr-card__date">{{ formatAddressDate(item.created_at) }}</span>
    </div>

    <DialogVant
      v-model:show="deleteConfirmVisible"
      :close-on-click-overlay="false"
      :time-out="-1"
      teleport="body"
    >
      <template #title>
        <div class="flex flex-col items-center">
          <div class="p-5 text-sm">آیا از حذف آدرس اطمینان دارید؟</div>
        </div>
      </template>
      <template #button>
        <div class="text-center text-red flex items-center justify-center" @click="deleteItem">
          <a-spin :spinning="deleteLoading" size="small">تایید</a-spin>
        </div>
        <div class="text-center" @click="deleteConfirmVisible = false">انصراف</div>
      </template>
    </DialogVant>
  </div>

  <div v-else class="shadow mb-2 p-2 rounded-lg">
    <div class="flex justify-between">
      <div>
        <div class="font-semibold text-base mb-2">{{ item.address }}</div>
      </div>
    </div>
    <div class="flex flex-col gap-2 mt-2">
      <BasicInfoItem is-line title="استان" :value="item.province" />
      <BasicInfoItem is-line title="شهر" :value="item.city" />
      <BasicInfoItem is-line title="کد پستی" :value="item.zip" />
      <BasicInfoItem is-line title="شماره تلفن" :value="item.phone" />
    </div>
    <a-divider class="!my-3" />

    <div class="flex justify-between mt-1">
      <div class="mb-2">{{ formatAddressDate(item.created_at) }}</div>
      <div class="flex gap-2">
        <BasicIcon
          color="red"
          icon="vuesax-linear:trash"
          class="p-1"
          @click.stop="deleteConfirmVisible = true"
        />
        <BasicIcon
          color="green"
          icon="vuesax-linear:edit"
          class="p-1"
          @click.stop="emits('edit', item)"
        />
      </div>
    </div>

    <DialogVant
      v-model:show="deleteConfirmVisible"
      teleport="body"
      :close-on-click-overlay="false"
      :time-out="-1"
    >
      <template #title>
        <div class="flex flex-col items-center">
          <div class="p-5 text-sm">آیا از حذف آدرس اطمینان دارید؟</div>
        </div>
      </template>
      <template #button>
        <div class="text-center text-red flex items-center justify-center" @click="deleteItem">
          <a-spin :spinning="deleteLoading" size="small">تایید</a-spin>
        </div>
        <div class="text-center" @click="deleteConfirmVisible = false">انصراف</div>
      </template>
    </DialogVant>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { toJalali } from '@/utils/useDateTime'
import BasicIcon from '@/components/BasicPacks/BasicIcon.vue'
import BasicInfoItem from '@/components/BasicPacks/BasicInfoItem.vue'
import DialogVant from '@/components/DialogVant.vue'
import type { Address } from '@/models/address'
import { deleteAddress } from '@/api/address'

const deleteLoading = ref(false)
const deleteConfirmVisible = ref(false)

const props = withDefaults(
  defineProps<{
    item: Address
    variant?: 'mobile' | 'desktop'
  }>(),
  { variant: 'mobile' },
)

const emits = defineEmits<{
  edit: [item: Address]
  refresh: []
}>()

function formatAddressDate(dateTime?: string) {
  if (!dateTime) return ''
  const formatted = toJalali(dateTime)
  return formatted.includes('Invalid') ? '' : formatted
}

async function deleteItem() {
  try {
    deleteLoading.value = true
    await deleteAddress(props.item.id!)
    deleteConfirmVisible.value = false
    emits('refresh')
  } catch (e) {
    console.log(e)
  } finally {
    deleteLoading.value = false
  }
}
</script>