<template>

<div class="item-select">

  <div
    v-for="item in selects"
    :key="item.name"
    :class="['x-select', { 'act': renders?.includes(item.key) }]"
    @click="selectChange(item)"
  >
    {{ item.name }}
  </div>

</div>

</template>

<script lang='ts' setup>

import { defineModel, computed } from 'vue'

defineProps<{
  selects: any[]
}>()

const selected = defineModel<any[] | string | number>()

const renders = computed<any[]>(() => [selected.value].flat())

const selectChange = (e) => {

  const arr = renders.value

  if (arr.includes(e.key)) {
    const x = arr.findIndex(item => e.key === item)
    if (x > -1) {
      arr.splice(x, 1)
    }
  } else {
    arr.push(e.key)
  }

  if (Array.isArray(selected.value)) {
    selected.value = arr
  } else {
    selected.value = arr[0]
  }

}


</script>

<style lang='scss' scoped>

.item-select {
  width: 100%;
  display: flex;
  .x-select {
    font-size: 14px;
    color: white;
    height: 24px;
    line-height: 24px;
    padding: 0 8px;
    margin: 4px;
    cursor: pointer;
    
    &:hover:not(.act) {
      color: #0F60DB;
    }
    &.act {
      transition-property: all;
      transition-duration: 0.2s;
      background: #0F60DB;
    }
  }
}

</style>