<template>
  <div :style="boxStyle">
    <input
      type="color"
      :value="colorValue"
      @change="handleChange"
      :style="{
        'pointer-events': disabled ? 'none' : 'auto',
        width: '32px',
        height: '32px',
        background: '#F8F8F8',
        borderRadius: '4px',
        border: '1px solid #DDDDDD',
        padding: '4px 5px',
      }"
    />
  </div>
</template>
<script lang="ts" setup>
  import { ref, watch } from 'vue';
  const props = defineProps({
    size: String,
    value: String,
    disabled: {
      type: Boolean,
      default: false,
    },
    boxStyle: Object,
  });
  const colorValue = ref('#ffffff');
  const emit = defineEmits(['update:value', 'change']);
  watch(
    () => props.value,
    (val) => {
      colorValue.value = val || '#ffffff';
    },
    {
      immediate: true,
    },
  );

  const handleChange = ({ target }) => {
    emit('update:value', target.value);
    emit('change', target.value);
  };
</script>
