<template>
  <div class="tag-container">
    <div class="currentSelect">
      <div class="currentSelect-title">
        当前颜色：
        <a-tag v-for="(item, index) of currentTag" :color="item.value" bordered>{{
          item.label
        }}</a-tag>
      </div>
    </div>
    <div class="selects">
      <a-tag
        @click="handleSelectTag(item)"
        v-for="(item, index) of items"
        :key="index"
        :color="item.value"
        bordered
        >{{ item.label }}</a-tag
      >
    </div>
  </div>
</template>
<script lang="jsx" setup>
let currentTag = defineModel('currentTag', {
  default: []
})
if (currentTag.value.length === 0) {
  currentTag.value = [
    {
      label: '灰色',
      value: 'gray'
    }
  ]
}
const items = ref([
  {
    label: '橙红色',
    value: 'orangered'
  },
  {
    label: '橙色',
    value: 'orange'
  },
  {
    label: '金色',
    value: 'gold'
  },
  {
    label: '青柠色',
    value: 'lime'
  },
  {
    label: '绿色',
    value: 'green'
  },
  {
    label: '青色',
    value: 'cyan'
  },
  {
    label: '蓝色',
    value: 'blue'
  },
  {
    label: '拱形蓝',
    value: 'arcoblue'
  },
  {
    label: '紫色',
    value: 'purple'
  },
  {
    label: '粉紫色',
    value: 'pinkpurple'
  },
  {
    label: '品红色',
    value: 'magenta'
  },
  {
    label: '灰色',
    value: 'gray'
  }
])
let handleSelectTag = (item) => {
  currentTag.value = [item]
}
</script>

<style scoped lang="scss">
.tag-container {
  .currentSelect {
    display: grid;
    grid-template-columns: 2fr 1fr;
    margin-bottom: 10px;
  }
  .selects {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
  }
  .arco-tag {
    // text-align: center;
    justify-content: center;
    cursor: pointer;
  }
}
</style>
