<!--
 * @Description: form 表单下的富文本编辑器
-->
<template>
  <div v-bind="attrs" class="form-color-picker">
    <ColorPicker format="hex" :pureColor="pureColor" @update:pureColor="update" />
    <div class="form-color-picker_info">{{ pureColor }}</div>
  </div>
</template>
<script lang="ts">
  import { defineComponent, computed } from 'vue';
  import { useAttrs } from '/@/hooks/core/useAttrs';
  import { ColorPicker } from 'vue3-colorpicker';
  import 'vue3-colorpicker/style.css';
  import { useRuleFormItem } from '/@/hooks/component/useFormItem';
  import { propTypes } from '/@/utils/propTypes';
  export default defineComponent({
    name: 'FColorPicker',
    components: {
      ColorPicker,
    },
    props: {
      value: propTypes.string.def(''),
    },
    emits: ['change'],
    setup(props, { emit }) {
      const attrs = useAttrs();
      const [state] = useRuleFormItem(props, 'value', 'change');
      const pureColor = computed(() => {
        return state.value || '#000';
      });
      const update = val => {
        state.value = val;
        emit('change', val);
      };

      return {
        attrs,
        pureColor,
        update,
      };
    },
  });
</script>
<style lang="less">
  .form-color-picker {
    display: flex;
    position: relative;

    &_info {
      position: absolute;
      top: 0;
      left: 4%;
      line-height: 24px;
      color: #fff;
    }
  }

  .vc-color-wrap {
    min-width: 90px;
  }
</style>
