<template>
  <div class="item-select">
    <el-select
      v-model="selected"
      multiple
      placeholder="请选择"
      collapse-tags
      collapse-tags-tooltip
      :max-collapse-tags="7"
      class="item-select-multiple"
    >
      <el-option v-for="item in selects" :key="item.key" :label="item.name" :value="item.key" />
    </el-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;
      min-width: 200px;
  .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;
    }
  }
  .item-select-multiple {
  
      :deep(.el-tag--info) {
        background: #0f60db;
        color: #ffffff;
        .el-icon{
        color: #ffffff;

        }
      
    }
  }
}
</style>
