<template>
    <div class="memo-area">
        <div class="title">备注</div>
        <div ref="memoMenu" class='memoMenu'></div>
        <div ref="memoContent" class='memoContent'></div>
    </div>
</template>

<script lang="ts">
import { Util, debounce } from '@ibizstudio-ex/runtime';
import { Vue, Component, Prop, Model, Emit, Watch } from 'vue-property-decorator';
import E from 'wangeditor';

@Component({})
export default class MemoArea extends Vue {
    /**
     * 双向绑定值
     * @type {any}
     * @memberof InputBox
     */
    @Model('change') readonly itemValue?: any;
    @Watch('itemValue', {
        immediate: true,
    })
    itemValueChange(newVal: any, oldVal: any) {
      if (this.textArea && this.editor) {
        if (this.CurrentVal !== oldVal) {
          this.editor.txt.html(this.CurrentVal ? this.CurrentVal : '');
        }
      }
    }

    inited: boolean = false;
    textArea: any;
    editor: E | null = null;

    /**
     * 生命周期 （多行文本十行高度问题）
     * @type {any}
     * @memberof InputBox
     */
    mounted() {
      this.editorInit();
    }

    destroyed() {
      this.editorDestroy();
    }

    editorInit() {
        const { memoMenu, memoContent } = this.$refs as any;
        const editor = new E(memoMenu, memoContent);
        this.editor = editor;
        editor.config.height = 200;
        editor.config.zIndex = 9;
        editor.config.placeholder = '请输入...';
        editor.config.menus = ['bold', 'head', 'link', 'italic', 'underline'];
        editor.config.onchange = (html: any) => {
            this.CurrentVal = html;
        };
        editor.create();
        this.textArea = memoContent;
        if (this.CurrentVal) {
            editor.txt.html(this.CurrentVal);
        }
    }

    editorDestroy() {
      if (this.editor) {
        this.editor.destroy();
        this.editor = null;
      }
    }

    /**
     * 单位
     * @type {String}
     * @memberof InputBox
     */
    @Prop() unit?: string;

    /**
     * 多行文本十行 特殊参数样式（模型高度自带）
     * @type {String}
     * @memberof InputBox
     */
    @Prop() textareaStyle?: string;

    /**
     * 多行文本十行 特殊参数id（模型高度自带）
     * @type {String}
     * @memberof InputBox
     */
    @Prop() textareaId?: string;
    /**
     * 大小
     * @type {String}
     * @memberof InputBox
     */
    @Prop() size?: string;
    /**
     * 最大值
     * @type {Number}
     * @memberof InputBox
     */
    @Prop() max?: number;
    /**
     * 最小值
     * @type {Number}
     * @memberof InputBox
     */
    @Prop() min?: number;

    /**
     * placeholder值
     * @type {String}
     * @memberof InputBox
     */
    @Prop() placeholder?: string;

    /**
     * 是否禁用
     * @type {boolean}
     * @memberof InputBox
     */
    @Prop() disabled?: boolean;
    @Watch('disabled', {
        immediate: true,
    })
    disabledChange(val: boolean) {
        if (this.editor && val) {
            this.editor.disable();
        }
    }

    /**
     * 只读模式
     *
     * @type {boolean}
     */
    @Prop({ default: false }) readonly?: boolean;
    @Watch('readonly', {
        immediate: true,
    })
    readonlyChange(val: boolean) {
        if (this.editor && val) {
            this.editor.disable();
        }
    }

    /**
     * 属性类型
     *
     * @type {string}
     * @memberof InputBox
     */
    @Prop() type?: string;

    /**
     * 文本行数
     * @type {String}
     * @memberof InputBox
     */
    @Prop({ default: 2 }) rows?: number;

    /**
     * 精度
     *
     * @type {number}
     * @memberof InputBox
     */
    @Prop({ default: 0 }) precision?: number;

    /**
     * 多行文本行数
     *
     * @type {string}
     * @memberof InputBox
     */
    @Prop() autoSize?: any;

    /**
     * 数值格式化
     *
     * @type {string}
     * @memberof InputBox
     */
    @Prop() valueFormat?: any;

    /**
     * 是否启用防抖
     *
     * @type {Boolean}
     * @memberof InputBox
     */
    @Prop({ default: true }) isDebounce?: Boolean;

    /**
     * 数值框numberId
     */
    numberId: string = this.$util.createUUID();

    /**
     * 当前值
     *
     * @memberof InputBox
     */
    get CurrentVal() {
        if (Object.is(this.type, 'number') && this.itemValue && !isNaN(this.itemValue)) {
            return Number(this.itemValue);
        } else {
            return !this.itemValue && this.itemValue != 0 ? null : this.itemValue;
        }
    }

    /**
     * 值变化
     *
     * @memberof InputBox
     */
    set CurrentVal(val: any) {
        let _data: any = val;
        if (Object.is(this.type, 'number') && Util.isExistAndNotEmpty(val) && !isNaN(val)) {
            try {
                _data = isNaN(Number(val)) ? null : Number(val);
            } catch (error) {}
        }
        if (Object.is(_data, '')) {
            _data = null;
        }
        if (this.isDebounce) {
            debounce(this.emitChangeEvent, _data, 300);
        } else {
            this.emitChangeEvent(_data);
        }
    }

    /**
     * 触发change事件
     *
     * @param {*} data
     * @memberof InputBox
     */
    emitChangeEvent(data: any) {
        this.$emit('change', data);
    }

    /**
     * 回车事件
     *
     * @param {*} $event
     * @memberof InputBox
     */
    @Emit()
    enter($event: any) {
        if (!$event || $event.keyCode !== 13) {
            return;
        }
        return $event;
    }

    /**
     * 数值值格式化
     *
     * @param {*} value
     * @memberof InputBox
     */
    numberFormat(value: any) {
        if (!this.valueFormat) {
            return value;
        }
        const _this: any = this;
        if (!isNaN(parseFloat(value)) && _this.textFormat && _this.textFormat instanceof Function) {
            return _this.textFormat(parseFloat(value), _this.valueFormat);
        }
        return value;
    }
}
</script>

<style lang="less">
@import './memo-area.less';
</style>
