boursecu_admin/src/pages/menuPages/configuration/SupportMessengersField.vue

<template>
  <div class="support-messengers-field">
    <div
      v-for="(row, index) in rows"
      :key="index"
      class="support-messengers-field__row"
    >
      <a-select
        :value="row.messenger || undefined"
        :disabled="disabled"
        allow-clear
        placeholder="پیام‌رسان"
        class="support-messengers-field__type"
        @update:value="(val) => updateRow(index, { messenger: String(val ?? '') })"
      >
        <a-select-option v-for="opt in messengerOptions" :key="opt.key" :value="opt.key">
          {{ opt.value }}
        </a-select-option>
      </a-select>

      <a-input
        :value="row.id"
        :disabled="disabled"
        allow-clear
        class="support-messengers-field__id"
        :placeholder="supportMessengerIdPlaceholder(row.messenger)"
        @update:value="(val) => updateRow(index, { id: String(val ?? '') })"
      />

      <a-button
        type="text"
        danger
        :disabled="disabled || rows.length <= 1"
        aria-label="حذف"
        @click="removeRow(index)"
      >
        حذف
      </a-button>
    </div>

    <a-button
      type="dashed"
      block
      :disabled="disabled"
      class="support-messengers-field__add"
      @click="addRow"
    >
      افزودن پیام‌رسان
    </a-button>

    <p v-if="rows.length === 0" class="support-messengers-field__hint">
      حداقل یک پیام‌رسان با شناسه معتبر اضافه کنید.
    </p>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import {
  formatSupportMessengers,
  parseSelectOptions,
  parseSupportMessengers,
  supportMessengerIdPlaceholder,
  type SupportMessengerEntryDraft,
} from './settingTypes'

const props = withDefaults(
  defineProps<{
    modelValue: string
    disabled?: boolean
  }>(),
  { disabled: false },
)

const emit = defineEmits<{ 'update:value': [value: string] }>()

const messengerOptions = computed(() =>
  parseSelectOptions({
    key: 'support_messenger',
    description: 'bale,telegram,whatsapp,rubika,eitaa,soroush',
    type: 'select',
  }),
)

const rows = computed<SupportMessengerEntryDraft[]>({
  get() {
    const parsed = parseSupportMessengers(props.modelValue)
    if (parsed.length > 0) return parsed
    return [{ messenger: 'bale', id: '' }]
  },
  set(nextRows) {
    emit('update:value', formatSupportMessengers(nextRows))
  },
})

function commit(nextRows: SupportMessengerEntryDraft[]) {
  emit('update:value', formatSupportMessengers(nextRows))
}

function updateRow(index: number, patch: Partial<SupportMessengerEntryDraft>) {
  const next = rows.value.map((row, i) => (i === index ? { ...row, ...patch } : row))
  commit(next)
}

function addRow() {
  commit([...rows.value, { messenger: 'bale', id: '' }])
}

function removeRow(index: number) {
  const next = rows.value.filter((_, i) => i !== index)
  commit(next.length > 0 ? next : [{ messenger: 'bale', id: '' }])
}
</script>

<style scoped>
.support-messengers-field {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.support-messengers-field__row {
  display: grid;
  grid-template-columns: minmax(120px, 160px) 1fr auto;
  gap: 8px;
  align-items: center;
}

.support-messengers-field__hint {
  margin: 0;
  font-size: 12px;
  color: #6b7280;
}

@media (max-width: 640px) {
  .support-messengers-field__row {
    grid-template-columns: 1fr;
  }
}
</style>