<template>
  <el-col v-for="item in options || []" :key="item.value" :span="12">
    <div
      :title="item.label"
      :class="[
        'bg-#333333',
        'h-[24px]',
        'rounded-[5px]',
        'leading-24px',
        'text-center',
        'cursor-pointer',
        'truncate',
        'mb-8px',
        { 'bg-[var(--accent-blue)]!': modelValue?.includes(item.value) }
      ]"
      @click="handleClick(item)"
    >
      {{ item.label }}
    </div>
  </el-col>
</template>

<script setup lang="ts">
defineProps<{
  options?: { label: string; value: string }[]
}>()
const modelValue = defineModel<string[]>('modelValue')

// 点击处理
const handleClick = (item: { label: string; value: string }) => {
  if (modelValue.value?.includes(item.value)) {
    modelValue.value.splice(modelValue.value.indexOf(item.value), 1)
  } else {
    modelValue.value?.push(item.value)
  }
}
</script>

<style scoped></style>
