<template>
  <div>
    <Select v-model:value="colorType" size="small" style="width: 100%" @change="changeColorType">
      <SelectOption
        v-for="item in colorPreset"
        :key="item.name"
        :value="item.color.join(',')"
      >
        <span
          class="color-block"
          v-for="color in item.color.slice(0, 5)"
          :key="color"
          :style="{background: color}"
        ></span>
        {{ item.name }}</SelectOption
      >

      <SelectOption value="custom">自定义组合</SelectOption>
      <!-- <SelectOption value="gradient">自定义渐变色</SelectOption> -->
    </Select>
    <div class="color-list">
      <span
        class="color-block"
        v-for="(color, index) in value"
        :key="index"
        :style="{background: color}"
      ></span>
      <span class="color-block cus-btn" @click="handleAddColor"><PlusOutlined /></span>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, defineProps, defineEmits } from "vue";
import { Select, SelectOption } from "ant-design-vue";
import { PlusOutlined } from "@ant-design/icons-vue";
import { colorPreset } from "../../charts/config";

const props = defineProps({
  value: {
    type: Array,
    default: () => [],
  },
});
const emit = defineEmits(["update:value"]);
const colorType = ref<string>(colorPreset[0].color.join(","));

const changeColorType = (val: string) => {
  if (val === "custom") {
    // emit("update:value", []);
  } else {
    emit("update:value", val.split(","));
  }
};
const handleAddColor = () => {
  console.log('add color...');
};
</script>

<style lang="less" scoped>
.color-block {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 4px;
}
.color-list {
  margin-top: 12px;
  display: flex;
  flex-wrap: wrap;
  .color-block {
    margin-right: 0;
    width: 16px;
    height: 16px;
  }
  .cus-btn {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
</style>
