<template>
    <div class="editor" />
</template>

<script>
import Editor from 'wangeditor';
import httpUpload from '../../src/utils/xhr';

export default {
    name: 'BkEditor',
    inject: {
        elFormItem: {
            default: () => {}
        }
    },
    props: {
        /**
         * 参数
         */
        value: {
            type: String,
            default: ''
        },
        /**
         * 只读
         */
        readonly: {
            type: Boolean,
            default: false
        },
        url: {
            type: String,
            default: ''
        },
        config: {
            type: Object,
            default: () => ({
                uploadImg: true
            })
        }
    },
    data() {
        return {
            $obj: '',
            currentValue: this.value
        };
    },
    watch: {
        value(val, old) {
            if (val === old || val === this.currentValue) return;
            this.$obj.txt.html(val);
        }
    },
    mounted() {
        if (this.readonly) {
            this.initReadonly();
        } else {
            this.init();
        }
    },
    methods: {  
        /**
         * 显示文本模式  
         */
        initReadonly() {
            this.$el.innerHTML = this.currentValue;
        },
        /**
         * 初始化editor
         */
        init() {
            this.$obj = new Editor(this.$el);
            this.$obj.customConfig.onchange = this.handleValue;
            this.$obj.customConfig.onblur = this.handleBlur;
            // this.$obj.customConfig.uploadImgShowBase64 = true;
            if (this.config.uploadImg) {
                this.$obj.customConfig.customUploadImg = (resultFiles, insertImgFn) => {
                    const { responseProps, responseFileProps, uploadPath } = this.$root.bkConfig || this.$bkConfig;
                    resultFiles.map(item => {
                        // const params = new FormData();
                        // params.append('file', item);
                        // this.$fetch({
                        //     url: this.url || editorUploadPath,
                        //     method: 'post',
                        //     params,
                        //     headers: {
                        //         'Content-Type': 'multipart/form-data'
                        //     }

                        // }).then(res => {
                        //     if (res) {
                        //         insertImgFn(res[responseProps.data][responseFileProps.fileUrl]);
                        //     } else {
                        //         this.$message.error('上传失败');
                        //     }
                        // });
                        // return '';
                        httpUpload({
                            url: this.url || uploadPath,
                            filename: 'file',
                            file: item,
                            headers: this.config.headers,
                            onSuccess: res => {
                                if (res) {
                                    insertImgFn(res[responseProps.data][responseFileProps.fileUrl]);
                                }
                            },
                            onError: () => {
                                this.$message.error('上传失败');
                            }
                        });
                        return '';
                    });
                // this.bkConfig.uploadPath
                // resultFiles 是 input 中选中的文件列表
                // insertImgFn 是获取图片 url 后，插入到编辑器的方法
                // 上传图片，返回结果，将图片插入到编辑器中
                };
            }
            Object.keys(this.config).forEach(key => {
                if (key) {
                    this.$obj.customConfig[key] = this.config[key];
                }
            });
            this.$obj.create();
            this.$obj.txt.html(this.currentValue);
        },
        /**
         * 设置参数
         */
        handleValue(val) {
            if (val === this.currentValue) return;
            this.$emit('input', val);
            this.currentValue = val;
        },
        /**
         * 失去焦点
         * @param {String} val 输入的内容
         */
        handleBlur(val) {
            this.$emit('change', val);
            this.$emit('blur', val);
            // 触发表单
            if (this.elFormItem) {
                this.elFormItem.onFieldChange();
            }
        }
    }
};
</script>
