<!--
 * @Description: form 表单下的富文本编辑器
-->
<template>
  <div v-bind="attrs" button-style="solid" class="text-editor">
    <WangEditor
      :modelValue="state"
      placeholder="请输入免责声明..."
      :height="height"
      @change="handleChange"
    />
  </div>
</template>
<script lang="ts">
  import { defineComponent } from 'vue';
  import { useAttrs } from '/@/hooks/core/useAttrs';
  import WangEditor from '/@/components/Editor/index';
  import { useRuleFormItem } from '/@/hooks/component/useFormItem';
  export default defineComponent({
    name: 'TextEditor',
    components: {
      WangEditor,
    },
    props: {
      height: {
        type: Number,
        default: 300,
      },
    },
    emits: ['change'],
    setup(props, { emit }) {
      const attrs = useAttrs();
      // Embedded in the form, just use the hook binding to perform form verification
      const [state] = useRuleFormItem(props);
      console.log('🚀 ~ file: TextEditor.vue:30 ~ setup ~ state:', state);

      function handleChange(data) {
        emit('change', data);
      }

      return { attrs, state, handleChange };
    },
  });
</script>
<style lang="less" scoped>
  .text-editor {
    display: flex;
  }
</style>
