<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 colors"
        :key="index"
        :style="{ background: color }"
      >
        <span class="del-btn">
          <CloseCircleFilled @click="handleDelete(index)" />
        </span>
      </span>
      <span class="color-block cus-btn" @click="handleAddClick"
        ><PlusOutlined
      /></span>
      <ElColorPicker
        ref="colorPickerRef"
        style="width: 0; height: 0; opacity: 0"
        @change="handleAddColor"
      />
    </div>
  </div>
</template>

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

const props = defineProps({
  value: {
    type: Array as PropType<string[]>,
    default: () => [],
  },
});

const presetList = colorPreset.map((item) => item.color.join(","));
const emit = defineEmits(["update:value"]);
const colorType = ref<string>(presetList.includes(props.value.join(",")) ? props.value.join(",") : "custom");
const colors = ref<string[]>(props.value);
const colorPickerRef = ref<InstanceType<typeof ElColorPicker>>();

function changeColorType<T>(val: T): void;
function changeColorType(val: string) {
  if (val === "custom") {
    // emit("update:value", []);
  } else {
    colors.value = val.split(",");
    emit("update:value", val.split(","));
  }
};

const handleAddClick = () => {
  colorPickerRef.value?.show();
};
function handleAddColor<T>(value: T): void;
function handleAddColor(value: string) {
  colors.value.push(value);
  colorType.value = "custom";
  emit("update:value", colors.value);
};

const handleDelete = (index: number) => {
  colors.value.splice(index, 1);
  colorType.value = "custom";
  emit("update:value", colors.value);
};
</script>

<style lang="less" scoped>
.color-block {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 4px;
  position: relative;
}
.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;
  }
}
:deep(.el-color-picker__trigger) {
  display: none;
}
.del-btn {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.5);
  color: #fff;
  font-size: 8px;
  display: flex;
  align-items: start;
  justify-content: end;
  opacity: 0;
  transition: 0.5s;
  &:hover {
    opacity: 1;
  }
}
</style>
