import { Component, Prop } from 'vue-property-decorator';
import { VueLifeCycleProcessing,EditorBase } from '@ibizstudio-ex/template-vue';
import { IPSAppDEField } from '@ibizstudio-ex/runtime';
import { DataTypes } from '@ibizstudio-ex/runtime';
import MemoArea from '../../components/memo-area/memo-area.vue';


/**
 * 备注编辑器插件类
 *
 * @export
 * @class NoteEditor
 * @extends {EditorBase}
 */
@Component({})
@VueLifeCycleProcessing()
export class NoteEditor extends EditorBase {

    /**
     * 是否防抖
     *
     * @type {boolean}
     * @memberof TextboxEditor
     */
     @Prop() public isDebounce?: boolean;

     /**
      * 编辑器初始化
      *
      * @memberof TextboxEditor
      */
     public async initEditor() {
         await super.initEditor();
                 this.customProps.isDebounce = this.isDebounce;
                 this.customProps.type = 'textarea';
         this.initFormatParams();
     }

     /**
      * 初始化格式化参数
      *
      * @param {*} value
      * @memberof TextboxEditor
      */
     public initFormatParams() {
         this.customProps.valueFormat = '';
         let unitName = this.parentItem?.unitName;
         let appDeField: IPSAppDEField= this.parentItem?.getPSAppDEField?.();
         if (appDeField?.stdDataType) {
             this.customProps.dataType = DataTypes.toString(appDeField.stdDataType);
         }
         if (appDeField?.valueFormat) {
             this.customProps.valueFormat = appDeField?.valueFormat;
         }
         if (this.valueFormat) {
           this.customProps.valueFormat = this.valueFormat;
         }
         if (this.editorInstance.editorParams?.valueFormat) {
           this.customProps.valueFormat = this.editorInstance.editorParams?.valueFormat;
         }
         if (unitName) {
             this.customProps.unitName = unitName;
         }
     }

     /**
      * 编辑器change事件
      *
      * @param {*} value
      * @memberof TextboxEditor
      */
     public handleChange($event: any) {
         this.editorChange({ name: this.editorInstance.name, value: $event })
     }

     /**
      * 编辑器enter事件
      *
      * @param {*} value
      * @memberof TextboxEditor
      */
     public handleEnter($event: any) {
         this.$emit('enter', arguments);
     }

     /**
      * 绘制默认内容
      *
      * @returns {*}
      * @memberof TextboxEditor
      */
     public renderTextbox() {
         return this.$createElement(MemoArea, {
             props: {
                 name: this.editorInstance.name,
                 itemValue: this.value,
                 disabled: this.disabled,
                 ...this.customProps,
             },
             on: {
                 change: this.handleChange,
                 enter: this.handleEnter
             },
             style: this.customStyle
         })
     }

     /**
      * 绘制内置插件内容
      *
      * @returns {*}
      * @memberof TextboxEditor
      */
     public renderTextboxColorPicker() {
         return this.$createElement(this.editorComponentName, {
             props: {
                 name: this.editorInstance.name,
                 value: this.value,
                 data: this.contextData,
                 ...this.customProps,
             },
             on: { change: this.handleChange, colorChange: ($event: any) => { this.editorChange($event) } },
             style: this.customStyle
         })
     }

     /**
      * 绘制内容
      *
      * @returns {*}
      * @memberof TextboxEditor
      */
     public render(): any {
         if (!this.editorIsLoaded) {
             return null;
         }
        return this.renderTextbox();
     }
}