<template>
  <el-color-picker
    :modelValue="value"
    @active-change="inputHandler"
    @update:model-value="inputHandler"
    popper-class="com-color-pick"
    size="small"
    :predefine="predefineColors"
    @blur="changeHandler"
  />
</template>

<script lang="ts" setup>
import { ref } from "vue";
import { ElColorPicker } from "element-plus";

defineProps<{ value?: string }>();

const emit = defineEmits<{
  (e: "update:value", val: string | null): string;
  (e: "change"): void;
}>();

let change = false;
const inputHandler = (color: string | null) => {
  emit("update:value", color);
  change = true;
};

const changeHandler = () => {
  if (change) {
    emit("change");
    change = false;
  }
};

const predefineColors = ref([
  "#ff4500",
  "#ff8c00",
  "#ffd700",
  "#90ee90",
  "#00ced1",
  "#1e90ff",
  "#c71585",
  "rgba(255, 69, 0, 0.68)",
  "rgb(255, 120, 0)",
  "hsv(51, 100, 98)",
  "hsva(120, 40, 94, 0.5)",
  "hsl(181, 100%, 37%)",
  "hsla(209, 100%, 56%, 0.73)",
  "#c7158577",
]);
</script>
