<!-- 胶囊 -->
<template>
  <div class="capsule-container">
    <div
      class="capsule-box"
      v-for="(item, index) in items"
      :key="index"
      @click="changeColor(index, item)"
      :class="['tag-button', { active: clickedIndex === index }]"
    >
      {{ item.text }}
    </div>
  </div>
</template>

<script setup>
  import { ref } from 'vue'
  const props = defineProps({
    items: {
      type: Array,
      required: true,
    },
  })
  // 使用 ref 来追踪哪个盒子被点击
  const clickedIndex = ref(null)
  // 点击事件函数
  const changeColor = (index, item) => {
    // 如果点击的是已选中的盒子，取消选中状态，否则设置为选中
    if (clickedIndex.value === index) {
      clickedIndex.value = null
    } else {
      clickedIndex.value = index // 选中当前盒子
      console.log(index, item.text, '1111')
    }
  }
</script>

<style scoped lang="scss">
  .capsule-container {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
  }
  .capsule-box {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  .tag-button {
    padding: 0.5rem 1.5rem;
    font-size: 0.875rem;
    transition: all 0.3s;
    white-space: nowrap;
    border: 1px solid #e5e7eb;
    background-color: white;
    color: #4b5563;
    border-radius: 0.375rem;
  }

  .tag-button:hover {
    background-color: #f67f20;
    color: #fff;
  }

  .tag-button.active {
    background-color: #f97316;
    color: white;
    border-color: #f97316;
  }

  .tag-button.active:hover {
    background-color: #ea580c;
  }
</style>
