<template>
  <el-form-item label="颜色：">
    <el-color-picker
      v-model="value"
      color-format="rgba"
      show-alpha
      :predefine="predefineColors"
    />
  </el-form-item>
  <slot />
  <Del @delete="$emit('delete')" />
</template>
<script setup lang="ts">
import { ref, watchEffect } from "vue";
import { BoardShape } from "../board";
import { ElColorPicker } from "element-plus";
import Del from "./delete.vue";
import { predefineColors } from "./preset";

const props = defineProps<{ shape: BoardShape }>();
const emit = defineEmits<{ (e: "blur"): void; (e: "delete"): void }>();
const value = ref<string>(props.shape.data.color || "rgba(0,0,0,1)");

watchEffect(() => {
  props.shape.setColor(value.value);
});
</script>
