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

<template>
  <div @click="infoVisible = true" 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">{{toJalali(item.created_at)}}</div>
      <div class="flex gap-2 ">
        <BasicIcon color="red" icon="vuesax-linear:trash" @click.stop="deleteConfirmVisible = true" class="p-1"/>
        <BasicIcon color="green" icon="vuesax-linear:edit" @click.stop="emits('edit',item)" class="p-1"/>
      </div>
    </div>

  </div>

<!--  <teleport to="app">-->
    <DialogVant v-model:show="deleteConfirmVisible" teleport="body" :closeOnClickOverlay="false" :timeOut="-1">
      <!--      <template v-slot:img>
              <img :src="registerDelayImage" alt="" class="opacity-80">
            </template>-->

      <template v-slot:title>
        <div class="flex flex-col items-center">
          <div class="p-5 text-sm">
            آیا از حذف آدرس اطمینان دارید؟
          </div>
        </div>
      </template>

      <template v-slot: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>
<!--  </teleport>-->

</template>

<script lang="ts" setup>

import { computed, onMounted, 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 { updatePriceTrigger } from '@/api/triggerPrice'
import { loading } from '@/utils'
import type { Address } from '@/models/address'
import { deleteAddress } from '@/api/address'

const infoVisible = ref<boolean>(false)

const isActive = ref<boolean>(false)

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

interface Prop {
  item: Address
}
function changeActive(val: boolean) {
  console.log(val)
  try {
    loading.value = true
    updatePriceTrigger(props?.item.id, {is_active: val})
  } catch (e) {
    console.log(e)
    isActive.value = !isActive.value
  } finally {
    loading.value = false
  }
}

function returnPriceCondition(val: string) {
  switch (val) {
    case '==': return 'مساوی'
    case '<': return 'کوچکتر'
    // case '==': return 'مساوی'
  }
/*  if (val === '=='){
    return 'مساوی'
  } else if (val === '<'){
    return 'کوچکتر'
  }*/
}

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
  }
}

function returnAction(val: string) {
  switch (val) {
    case 'sms': return 'پیامک'
    case 'email': return 'ایمیل'
    case 'notify': return 'نوتیفیکیشن'
    // case '==': return 'مساوی'
  }
  /*  if (val === '=='){
      return 'مساوی'
    } else if (val === '<'){
      return 'کوچکتر'
    }*/
}


const props = withDefaults(defineProps<Prop>(), {})
const emits = defineEmits(['edit','refresh'])

/*const title = computed(() => {
  if (isUp.value) {
    if (isGold.value) {
      return 'واریز ریالی'
    } else {
      return 'خرید طلا'
    }
  } else {
    if (isGold.value) {
      return 'برداشت ریالی'
    } else {
      return 'فروش طلا'
    }
  }
})*/
</script>

<style scoped>

</style>