<template>
    <div style="padding: 10px">
        <el-button
            style="position: absolute; right: 10px"
            type="primary"
            size="mini"
            icon="el-icon-check"
            @click="preservation"
        >
            保存
        </el-button>
        <div style="border: 1px solid #ccc; margin-top: 40px">
            <!-- 工具栏 -->
            <Toolbar style="border-bottom: 1px solid #ccc" :editor="editor" :defaultConfig="toolbarConfig" />
            <!-- 编辑器 -->
            <Editor
                :style="`height: ${vh}px; overflow-y: auto`"
                :defaultConfig="editorConfig"
                v-model="list.fileContent"
                @onChange="onChange"
                @onCreated="onCreated"
            />
        </div>
        <!-- <div style="margin-top: 10px">
      <textarea
        v-model="list.fileContent"
        readonly
        style="width: 100%; height: 200px; outline: none"
      ></textarea>
    </div> -->
    </div>
</template>

<script>
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
import { DomEditor } from '@wangeditor/editor'
import { getAlgorithmSave, getAlgorithmAll } from '@/api/algorithm/index'

export default {
    name: 'algorithmmanage',
    components: { Editor, Toolbar },
    data() {
        return {
            vh: null,
            editor: null,
            html: '<p>hello&nbsp;world</p>',
            list: {},
            toolbarConfig: {
                // toolbarKeys: [ /* 显示哪些菜单，如何排序、分组 */ ],
                excludeKeys: ['group-video', 'insertLink' /* 隐藏哪些菜单 */]
            },
            editorConfig: {
                placeholder: '请输入内容...',

                MENU_CONF: {
                    uploadImage: {
                        // server: "/api/harmonic-boot/algorithm/common/upload",
                        base64LimitSize: 1000000 * 1024, // 5kb
                        // fieldName: "file",
                        // // // 自定义增加 http  header
                        // headers: {
                        //   Accept: "application/json, text/plain, */*",
                        //   Authorization: window.sessionStorage.getItem("cntoken"),
                        // },

                        // 跨域是否传递 cookie ，默认为 false
                        // withCredentials: true,

                        // 超时时间，默认为 10 秒
                        // timeout: 5 * 1000, // 5 秒
                        // 继续写其他配置...
                        //【注意】不需要修改的不用写，wangEditor 会去 merge 当前其他配置
                        // 上传之前触发
                        onBeforeUpload(file) {
                            //console.log(file);
                            // file 选中的文件，格式如 { key: file }
                            return file
                        },
                        // // 单个文件上传失败
                        onFailed(file, res) {
                            // console.log(`${file.name} 上传失败`, res);
                        },
                        // // 上传错误，或者触发 timeout 超时
                        // onError(file, err, res) {
                        //   console.log(`${file.name} 上传出错`, err, res);
                        // },
                        customInsert(res, insertFn) {
                            // JS 语法
                            // res 即服务端的返回结果

                            // 从 res 中找到 url alt href ，然后插入图片
                            // insertFn(res.data.minFileUrl, "", "");
                            insertFn(res.data, '', '')
                        }
                    }
                }
            }
        }
    },
    mounted() {
        this.setHeight()
        window.addEventListener('resize', this.setHeight)
        // 修改 uploadImage 菜单配置
        // this.editorConfig.MENU_CONF["uploadImage"] = {};

        getAlgorithmAll().then(res => {
            this.list = res.data[0]
        })
    },
    beforeDestroy() {
        window.removeEventListener('resize', this.setHeight)
    },
    methods: {
        setHeight() {
            this.vh = window.sessionStorage.getItem('appheight') - 93
        },
        onCreated(editor) {
            this.editor = Object.seal(editor) // 【注意】一定要用 Object.seal() 否则会报错
        },
        onChange(editor) {
            //console.log("onChange", editor.getHtml()); // onChange 时获取编辑器最新内容
            const toolbar = DomEditor.getToolbar(editor)
            //console.log("工具栏配置", toolbar.getConfig().toolbarKeys); // 工具栏配置
        },
        insertTextHandler() {
            const editor = this.editor
            if (editor == null) return
            editor.insertText(' hello ')
        },
        printEditorHtml() {
            const editor = this.editor
            if (editor == null) return
            //  console.log(editor.getHtml());
        },
        disableHandler() {
            const editor = this.editor
            if (editor == null) return
            editor.disable()
        },
        // 保存
        preservation() {
            getAlgorithmSave(this.list).then(res => {
                this.$message({
                    message: res.message,
                    type: 'success'
                })
                // let this_1 = this
                //this_1.query()
            })
        }
    },
    query() {
        getAlgorithmAll().then(res => {
            this.list = res.data[0]
        })
    },
    beforeDestroy() {
        const editor = this.editor
        if (editor == null) return
        editor.destroy() // 组件销毁时，及时销毁 editor ，重要！！！
    }
}
</script>
<style lang="scss" scoped>
::-webkit-scrollbar {
    width: 8px !important;
    height: 14px;
}
</style>
