<template>
  <div class="sel-color-group">
    <s-any-select
      v-model="model"
      @change="changeValue"
      :component="SColor"
      :placeholder="placeholder"
      :options="options"
    />
  </div>
</template>

<script lang="ts" setup>
import SColor from '../../Color/src/index.vue'
import { useVModel } from '@vueuse/core'

defineOptions({
  name: 'SColorGroup'
})

const model = useVModel(props, 'modelValue', emits)

interface Props {
  modelValue: any
  options: Array<any>
  placeholder: string
}

const props = withDefaults(defineProps<Props>(), {
  modelValue: [],
  options: () => ([]),
  placeholder: '请选择'
})

const emits = defineEmits<{
  (e: 'update:modelValue', value: any): void
  (e: 'change', value: any): void
}>()

function changeValue (value: any) {
  emits('change', value)
}
</script>
<style lang="scss">
.sel-color-group {
  height: 100%;

  .view-box {
    width: 100%;
    height: 100%;
    border-radius: 4px;
    background: #fff;
    box-shadow: 0 0 0 1px #e6e6e6;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 0 5px;

    &.show {
      box-shadow: 0 0 0 1px var(--el-color-primary) inset !important;
    }
  }
}

.sel-color-list {
  padding: 5px;

  .color-item {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    height: 30px;
    background: #fff;
    cursor: pointer;

    &.active, &:hover {
      background-color: var(--el-fill-color-light);
    }

    &.nodata {
      justify-content: center;
      color: #ddd;
    }
  }
}
</style>
