<script setup>
// select 대체 칩 선택기. 균일한 박스 그리드로 정렬(계좌 등 선택지가 적을 때 드롭다운 대신).
// 사용: <ChipSelect v-model="form.walletId" :options="[{value,label}]" :disabled="..." />
defineProps({
  modelValue: { type: [String, Number], default: '' },
  options: { type: Array, default: () => [] }, // [{ value, label }]
  disabled: { type: Boolean, default: false },
  emptyText: { type: String, default: '선택할 항목이 없습니다' },
})
const emit = defineEmits(['update:modelValue'])
function pick(v, disabled) {
  if (disabled) return
  emit('update:modelValue', v)
}
</script>

<template>
  <div class="chip-select">
    <button
      v-for="o in options"
      :key="String(o.value)"
      type="button"
      class="cs-chip"
      :class="{ active: modelValue === o.value }"
      :disabled="disabled"
      :title="o.label"
      @click="pick(o.value, disabled)"
    >
      {{ o.label }}
    </button>
    <span v-if="!options.length" class="cs-empty">{{ emptyText }}</span>
  </div>
</template>

<style scoped>
/* 계좌 선택 영역: 배경 패널 안에 칩 3개씩 균일 정렬 */
.chip-select {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.4rem;
  min-width: 0; /* 긴 계좌명이 그리드를 부모보다 넓게 밀어 가로 오버플로우 나는 것 방지 */
  box-sizing: border-box;
  background: rgba(127, 127, 127, 0.08);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 0.5rem;
}
.cs-chip {
  min-width: 0; /* 그리드 아이템 기본 min-width:auto(=글자너비) 해제 → 칸이 줄고 긴 이름은 …로 */
  padding: 0.5rem 0.5rem;
  border: 1px solid var(--color-border-hover);
  border-radius: 8px;
  background: var(--color-background);
  color: var(--color-text);
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  line-height: 1.3;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition:
    border-color 0.12s,
    background 0.12s,
    color 0.12s;
}
.cs-chip:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.cs-chip.active {
  border-color: hsla(160, 100%, 37%, 1);
  background: hsla(160, 100%, 37%, 1);
  color: #fff;
  font-weight: 700;
}
.cs-empty {
  grid-column: 1 / -1;
  font-size: 0.82rem;
  opacity: 0.55;
  padding: 0.28rem 0;
}
</style>
