import { Vue, Component, Prop, Model } from 'vue-property-decorator';
import MavonEditor from 'mavon-editor';
import 'mavon-editor/dist/css/index.css'
import './app-mavon-editor.less';

@Component({
    components: {
        "mavon-editor": MavonEditor.mavonEditor
    }
})
export class AppMavonEditor extends Vue {

    /**
     * 双向绑定值
     *
     * @type {*}
     * @memberof AppMavonEditor
     */
    @Model('change') readonly itemValue?: any;

    /**
     * 是否禁用
     *
     * @type {boolean}
     * @memberof AppMavonEditor
     */
    @Prop() public disabled?: boolean;

    /**
     * 当前值
     *
     * @memberof AppMavonEditor
     */
    get curVal() {
        return this.itemValue ? this.itemValue : '';
    }

    /**
     * 当前值
     *
     * @memberof AppMavonEditor
     */
    set curVal(val) {
        if(val){
            this.$emit('change', val);
        }else {
            this.$emit('change', null);
        }
    }
 
    /**
     * 工具栏
     *
     * @private
     * @type {*}
     * @memberof AppMavonEditor
     */
    private toolbars: any = {
        bold: true, // 粗体
        italic: true, // 斜体
        header: true, // 标题
        underline: true, // 下划线
        strikethrough: true, // 中划线
        mark: true, // 标记
        superscript: true, // 上角标
        subscript: true, // 下角标
        quote: true, // 引用
        ol: true, // 有序列表
        ul: true, // 无序列表
        link: true, // 链接
        imagelink: false, // 图片链接
        code: true, // code
        table: true, // 表格
        fullscreen: false, // 全屏编辑
        readmodel: true, // 沉浸式阅读
        htmlcode: true, // 展示html源码
        help: true, // 帮助
        undo: true, // 上一步
        redo: true, // 下一步
        trash: true, // 清空
        save: false, // 保存（触发events中的save事件）
        navigation: true, // 导航目录
        alignleft: true, // 左对齐
        aligncenter: true, // 居中
        alignright: true, // 右对齐
        subfield: false, // 单双栏模式
        preview: true, // 预览
    };

    /**
     * 绘制内容
     *
     * @returns
     * @memberof MavonEditor
     */
    public render() {
        return <mavon-editor class={{"app-mavon-editor":true,'only-show':this.disabled}} toolbarsFlag={!this.disabled} defaultOpen={this.disabled?'preview':'edit'}  language="zh-CN" subfield={!this.disabled} toolbars={this.toolbars} v-model={this.curVal} editable={!this.disabled} boxShadow={false}></mavon-editor>;
    }
}