<template>
    <div v-if="disabled" v-html="content" class="preview"></div>
    <textarea v-else v-model="content" ref="editor" @load="load"></textarea>
</template>
<script>
    import axios from 'axios';
    import tinymce from 'tinymce/tinymce';

    import 'tinymce/themes/modern/theme';

    import 'tinymce/plugins/advlist';
    import 'tinymce/plugins/autolink';
    import 'tinymce/plugins/lists';
    import 'tinymce/plugins/link';
    import 'tinymce/plugins/image';
    import 'tinymce/plugins/charmap';
    import 'tinymce/plugins/print';
    import 'tinymce/plugins/preview';
    import 'tinymce/plugins/anchor';
    import 'tinymce/plugins/textcolor';
    import 'tinymce/plugins/searchreplace';
    import 'tinymce/plugins/visualblocks';
    import 'tinymce/plugins/code';
    import 'tinymce/plugins/fullscreen';
    import 'tinymce/plugins/insertdatetime';
    import 'tinymce/plugins/media';
    import 'tinymce/plugins/table';
    import 'tinymce/plugins/contextmenu';
    import 'tinymce/plugins/paste';
    import 'tinymce/plugins/code';
    import 'tinymce/plugins/help';
    import 'tinymce/plugins/imagetools';

    require('./zh_CN');
    export default {
        props: ['value', 'disabled','height'],
        created() {
            this.content = this.value || ''
        },
        mounted() {
            this.initEditor();
        },
        destroyed() {
            this.destroyEditor();
        },
        data() {
            return {
                editor: null,
                content: ''
            }
        },
        methods: {
            load() {
                console.log(1111)
            },
            initEditor() {
                var height=300
                if(this.height){
height=this.height
                }
                tinymce.init({
                    target: this.$refs.editor,
                    skin_url: '/static/skins/lightgray',
                    language: 'zh_CN',
                    menubar: false,
                    branding: false,
                    statusbar: false,
                    height: height,
                    toolbar: 'undo redo | styleselect bold italic strikethrough forecolor backcolor  | image media link blockquote visualblocks insert | formatselect | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | removeformat | preview fullscreen code help',
                    plugins: [
                        'advlist autolink lists link image charmap print preview anchor textcolor',
                        'searchreplace visualblocks code fullscreen',
                        'insertdatetime media table contextmenu paste code help imagetools'
                    ],
                    images_upload_url: this.$baseUrl + '/assets/uploadFile',
                    images_upload_handler: function (blobInfo, success, failure) {
                        let formData = new FormData();
                        formData.append('file', blobInfo.blob(), blobInfo.filename());
                        axios.post('/assets/uploadFile', formData).then(res => {
                            if (res.status === 200) {
                                if (res.data.success) {
                                    success(res.data.data[0]);
                                    return;
                                }
                            }
                            failure('error');
                        }).catch(e => {
                            failure(e);
                        })
                    },
                    init_instance_callback: editor => {
                        this.editor = editor;
                        this.editor.setContent(this.content);
                        editor.on('Change MouseOut', e => {
                            this.content = editor.getContent();
                        });
                    }
                });
            },
            destroyEditor() {
                if (this.editor) {
                    this.editor.destroy();
                }
                this.editor = null;
            }
        },
        watch: {
            value(val) {
                if (this.editor) {
                    this.editor.setContent(val);
                }
                this.content = val
            },
            content(val) {
                this.$emit('input', val)
            },
            disabled(val) {
                if (val) {
                    this.destroyEditor();
                } else {
                    this.$nextTick(() => {
                        this.initEditor();
                    })
                }
            }
        }
    }
</script>
<style lang="less" scoped>
    .preview {
        height: 300px;
        overflow: auto;
        border: 1px solid #ebebeb;
        background-color: #fbfdff;
        border-radius: 4px;
    }
</style>
