<template>
  <div class="sel-color">
    <div v-if="Array.isArray(modelValue)" class="colors-list">
      <template v-for="(item, index) in colorList" :key="index">
        <SingleColor v-model="item.color" :type="'css'" :use="use" :readonly="readonly" />
      </template>
    </div>
    <div v-if="!Array.isArray(modelValue)" class="colors-list">
      <SingleColor v-model="color" :type="'css'" :use="use" :readonly="readonly" />
    </div>
  </div>
</template>
<script lang="ts" setup>
import { computed } from 'vue'
import SingleColor from './SingleColor.vue'

defineOptions({
  name: 'SColor'
})

interface Props {
  modelValue: string | []
  /**
   * 组件数据支持类型 可选值 echarts, css
   */
  type: 'echarts' | 'css'
  /**
   * 使用模式 纯色/渐变色/可切换 可选值 pure, gradient,all
   */
  use: 'pure' | 'gradient' | 'all'
  readonly: boolean
}

const props = withDefaults(defineProps<Props>(), {
  type: 'css',
  use: 'all',
  readonly: false
})
const emits = defineEmits(['update:modelValue', 'change'])
const color = computed<string>({
  get: () => {
    if (!Array.isArray(props.modelValue)) {
      return props.modelValue
    } else {
      return ''
    }
  },
  set: (value) => {
    emits('update:modelValue', value)
    emits('change', value)
  }
})
const colorList = computed<any[]>({
  set: (value) => {
    if (Array.isArray(props.modelValue)) {
      emits('update:modelValue', value.map(item => item.color))
      emits('change', value.map(item => item.color))
    }
  },
  get: () => {
    return props.modelValue.map((item: any) => {
      return {
        color: item
      }
    })
  }
})
</script>
<style lang="scss">
.sel-color {
  .colors-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
  }
}
</style>
