<template>
  <div class="tag-selector">
    <van-tag
      v-for="t in allTags"
      :key="t"
      :type="selected.includes(t) ? 'primary' : 'default'"
      :plain="!selected.includes(t)"
      size="medium"
      style="margin: 4px; padding: 4px 12px; cursor: pointer"
      @click="toggle(t)"
    >
      {{ t }}
    </van-tag>
  </div>
</template>

<script setup lang="ts">
const allTags = ['爱情', '事业', '健康', '学业', '财富', '平安', '祈福', '家庭', '友谊', '梦想']

const props = defineProps<{ modelValue: string[] }>()
const emit = defineEmits<{ 'update:modelValue': [v: string[]] }>()

const selected = computedWithEmit()

function computedWithEmit() {
  return new Proxy(props.modelValue, {
    get: (_, key) => props.modelValue[key as any],
  })
}

function toggle(tag: string) {
  const arr = [...props.modelValue]
  const i = arr.indexOf(tag)
  if (i > -1) arr.splice(i, 1)
  else arr.push(tag)
  emit('update:modelValue', arr)
}
</script>
