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

<template>
  <div ref="rootRef" class="boursecu-bank-picker">
    <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>

    <div v-if="isOpen && items.length" class="boursecu-bank-picker__dropdown">
      <button
        v-for="card in items"
        :key="card.id"
        type="button"
        class="boursecu-bank-picker__option"
        :class="{ 'boursecu-bank-picker__option--active': card.id === selectedId }"
        @click="selectCard(card.id)"
      >
        <BoursecuBankAccountOption :card="card" />
      </button>
    </div>
  </div>
</template>

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

const props = defineProps<{
  items: Card[]
  id?: number | string
}>()

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

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],
)

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

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

onClickOutside(rootRef, () => {
  isOpen.value = false
})
</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;
}

.boursecu-bank-picker__dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  left: 0;
  z-index: 30;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.14);
}

.boursecu-bank-picker__option {
  appearance: none;
  width: 100%;
  border: none;
  border-radius: 12px;
  background: transparent;
  padding: 10px 12px;
  cursor: pointer;
  text-align: right;
  transition: background-color 0.15s ease;
}

.boursecu-bank-picker__option--active,
.boursecu-bank-picker__option:hover {
  background: #eceff1;
}
</style>