boursecu_user/src/views/base/wallet/components/BoursecuBankAccountPicker.vue

<template>
  <div ref="rootRef" class="boursecu-bank-picker" :class="`boursecu-bank-picker--${variant}`">
    <template v-if="variant === 'mobile'">
      <div class="boursecu-bank-picker__header">
        <span class="boursecu-bank-picker__heading">واریز به</span>
        <button type="button" class="boursecu-bank-picker__add" @click="$emit('add-account')">
          افزودن کارت
        </button>
      </div>

      <button
        type="button"
        class="boursecu-bank-picker__trigger"
        :disabled="!items.length"
        @click="toggleOpen"
      >
        <template v-if="selectedCard">
          <BoursecuBankAccountOption :card="selectedCard" compact />
          <BasicIcon
            icon="vuesax-linear:arrow-down"
            size="18"
            class="boursecu-bank-picker__chevron"
            :class="{ 'boursecu-bank-picker__chevron--open': isOpen }"
          />
        </template>
        <span v-else class="boursecu-bank-picker__empty">حساب بانکی ثبت نشده است</span>
      </button>

      <Teleport to="body">
        <div v-if="isOpen && items.length" class="boursecu-bank-picker__overlay" @click="close">
          <div class="boursecu-bank-picker__sheet" @click.stop>
          <div
            v-for="card in items"
            :key="card.id"
            class="boursecu-bank-picker__sheet-item"
            :class="{ 'boursecu-bank-picker__sheet-item--active': card.id === selectedId }"
          >
            <button
              type="button"
              class="boursecu-bank-picker__sheet-select"
              @click="selectCard(card.id)"
            >
              <BoursecuBankAccountOption :card="card" />
            </button>
            <button
              type="button"
              class="boursecu-bank-picker__delete"
              aria-label="حذف حساب"
              @click.stop="requestDelete(card)"
            >
              <BasicIcon icon="vuesax-linear:trash" size="18" />
            </button>
          </div>
          </div>
        </div>
      </Teleport>
    </template>

    <template v-else>
      <div v-if="!items.length" class="boursecu-bank-picker__empty boursecu-bank-picker__empty--desktop">
        حساب بانکی ثبت نشده است
      </div>
      <div v-else class="boursecu-bank-picker__list">
        <div
          v-for="card in items"
          :key="card.id"
          class="boursecu-bank-picker__list-item"
          :class="{ 'boursecu-bank-picker__list-item--active': card.id === selectedId }"
        >
          <button
            type="button"
            class="boursecu-bank-picker__list-select"
            @click="selectCard(card.id)"
          >
            <BoursecuBankAccountOption :card="card" />
            <BasicIcon
              v-if="card.id === selectedId"
              icon="vuesax-linear:arrow-up-2"
              size="18"
              class="boursecu-bank-picker__list-chevron"
            />
          </button>
          <button
            type="button"
            class="boursecu-bank-picker__delete"
            aria-label="حذف حساب"
            @click.stop="requestDelete(card)"
          >
            <BasicIcon icon="vuesax-linear:trash" size="18" />
          </button>
        </div>
      </div>
    </template>
  </div>
</template>

<script setup lang="ts">
import { computed, ref, watch } from 'vue'
import { onClickOutside } from '@vueuse/core'
import BasicIcon from '@/components/BasicPacks/BasicIcon.vue'
import type { Card } from '@/models/wallet'
import { deleteCard } from '@/api/wallet'
import { confirmDeleteItem } from '@/utils/useConfirm'
import BoursecuBankAccountOption from './BoursecuBankAccountOption.vue'

const props = withDefaults(
  defineProps<{
    items: Card[]
    id?: number | string
    variant?: 'mobile' | 'desktop'
  }>(),
  { variant: 'mobile' },
)

const emit = defineEmits<{
  'update:id': [value: number | string | undefined]
  'add-account': []
  'card-deleted': []
}>()

const rootRef = ref<HTMLElement | null>(null)
const isOpen = ref(false)

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

const selectedCard = computed(() =>
  props.items.find((item) => item.id === selectedId.value) ?? props.items[0],
)

watch(
  () => props.items,
  (items) => {
    if (!items.length) {
      selectedId.value = undefined
      return
    }
    if (!items.some((item) => item.id === selectedId.value)) {
      selectedId.value = items[0]?.id
    }
  },
  { immediate: true },
)

function toggleOpen() {
  if (!props.items.length) {
    return
  }
  isOpen.value = !isOpen.value
}

function close() {
  isOpen.value = false
}

function selectCard(cardId?: number) {
  selectedId.value = cardId
  isOpen.value = false
}

function requestDelete(card: Card) {
  if (card.id == null) {
    return
  }

  confirmDeleteItem('این حساب بانکی', card.id, deleteCard, () => {
    emit('card-deleted')
  })
}

if (props.variant === 'mobile') {
  onClickOutside(rootRef, close)
}

watch(isOpen, (open) => {
  if (typeof document === 'undefined') return
  document.body.style.overflow = open ? 'hidden' : ''
})
</script>

<style scoped lang="less">
.boursecu-bank-picker {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 1;
}

.boursecu-bank-picker__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.boursecu-bank-picker__heading {
  font-size: 0.875rem;
  font-weight: 600;
  color: #6b7280;
}

.boursecu-bank-picker__add {
  appearance: none;
  border: none;
  background: transparent;
  padding: 0;
  font-size: 0.875rem;
  font-weight: 700;
  color: #2563eb;
  cursor: pointer;
}

.boursecu-bank-picker__trigger {
  appearance: none;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border: none;
  border-radius: 14px;
  background: #eceff1;
  cursor: pointer;
  text-align: right;
}

.boursecu-bank-picker__trigger:disabled {
  cursor: default;
}

.boursecu-bank-picker__chevron {
  flex-shrink: 0;
  color: #6b7280;
  transition: transform 0.2s ease;
}

.boursecu-bank-picker__chevron--open {
  transform: rotate(180deg);
}

.boursecu-bank-picker__empty {
  width: 100%;
  text-align: center;
  font-size: 0.875rem;
  color: #6b7280;

  &--desktop {
    padding: 24px 0;
  }
}

.boursecu-bank-picker__overlay {
  position: fixed;
  inset: 0;
  z-index: 5200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
  background: rgba(15, 23, 42, 0.28);
  backdrop-filter: blur(2px);
}

.boursecu-bank-picker__sheet {
  width: min(100%, 22rem);
  max-height: min(70vh, 28rem);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.16);
}

.boursecu-bank-picker__sheet-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  border-radius: 12px;
  transition: background-color 0.15s ease;

  &--active,
  &:hover {
    background: #eceff1;
  }
}

.boursecu-bank-picker__sheet-select {
  appearance: none;
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  padding: 10px 0 10px 12px;
  cursor: pointer;
  text-align: right;
}

.boursecu-bank-picker__delete {
  appearance: none;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  margin-inline-end: 8px;
  border: none;
  border-radius: 10px;
  background: transparent;
  color: #dc2626;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;

  &:hover {
    background: rgba(220, 38, 38, 0.08);
    color: #b91c1c;
  }
}

.boursecu-bank-picker--desktop {
  gap: 0;
  flex: 1;
  min-height: 0;
}

.boursecu-bank-picker__list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 0 24px 24px;
  overflow-y: auto;
  flex: 1;
}

.boursecu-bank-picker__list-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  border-radius: 12px;
  transition: background-color 0.15s ease;

  &--active {
    background: #eceff1;
  }

  &:hover:not(&--active) {
    background: #f8fafc;
  }
}

.boursecu-bank-picker__list-select {
  appearance: none;
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border: none;
  border-radius: 12px;
  background: transparent;
  padding: 10px 0 10px 12px;
  cursor: pointer;
  text-align: right;
}

.boursecu-bank-picker__list-chevron {
  flex-shrink: 0;
  color: #6b7280;
}
</style>