
<template>
    <div class="box">
      <ul class="item-list">
        <div v-for="(item, index) in units" :class="['item',(index+1)%4 == 0 ? 'last-item' : '',item==curItem?'active':'']" @click="selectItem(item)">{{item}}</div>
      </ul>
    </div>

</template>
<script setup lang="ts">
    const curItem = defineModel();
    const emit = defineEmits(['selected'])
    const props = defineProps({
        units: {
            type: Array,
            default: () => []
        }
    })
   const selectItem = (item:any) => {

     if(curItem.value == item){
       curItem.value = null;
       return
     }
      curItem.value = item
   }
</script>
<style scoped lang="scss">
.box{
  margin: 0px;
  padding: 0px;
  position:absolute;
  background: #fff;
  top: 0;
  left: 0;
  width: 322px;
  height: auto;
  border: 1px solid #ddd;
  z-index: 999;
}
.item-list {
  display: flex;
  flex-wrap: wrap;
}
.item{
  display: flex;
  width: 80px;
  height: 36px;
  background: #fff;
  color: #000;
  border: 1px solid #ededed;
  align-items: center;
  justify-content: center;
  &:hover{
    color: #000;
    background: #eff3f6;
  }
  &.last-item {
    margin-right: 0; /* 最后一个元素不加右边距 */
  }

}
.active{
  background: #00ace9 !important;
  color: #fff !important;
}

</style>