
<template>
    <el-row>
        <el-col :span="2" style="vertical-align: center;">服务器地址：</el-col>
        <el-col :span="10"><el-input v-model="serverUrl" ></el-input></el-col>
        <el-col :span="1"></el-col>
        <el-col :span="2"><el-button plain type="primary" @click="saveHtml">保存文档</el-button></el-col>
        <el-col :span="2"> <el-button plain type="primary" @click="saveHtmlAndData">保存数据&文档</el-button></el-col>
    </el-row>
    <Source src="/code/SaveDoc.vue"></Source>
    <Editor @load="onLoad" doc="https://www.x-emr.cn/doc/999.html" style="margin: 10px 0;"></Editor>

</template>
    
<script>
    import axios from 'axios'

    export default{
        data(){
            return{
                editor:null,
                 //服务端地址
                serverUrl:'http://localhost/post'
            }
        },
        methods:{
            //初始化
            onLoad: function(e) {
                this.editor = e.target.contentWindow.editor
            },
            //仅保存HTML文档
            saveHtml: function() {
                
                // 若文档未修改，则无需保存
                if(this.editor.edited == false){
                    this.$message.error('文档未修改，无需保存');
                    return;
                }

                // 若文档校验不通过，则无法保存
                if(this.editor.validate() == false){
                    this.$message.error('请查看文档是否有未填项或不合规内容');
                    return;
                }

                let data = {'doc': this.editor.getHtml()}
                axios.post(this.serverUrl, data).then(res=>{
                    this.$message.success('保存成功')
                })
            },
            //保存文档及机构化数据
            saveHtmlAndData: function() {
                // 若文档未修改，则无需保存
                if(this.editor.edited == false){
                    this.$message.error('文档未修改，无需保存');
                    return;
                }

                // 若文档校验不通过，则无法保存
                if(this.editor.validate() == false){
                    this.$message.error('请查看文档是否有未填项或不合规内容');
                    return;
                }

                let data = {
                    'doc': this.editor.getHtml(),
                    'data': this.editor.getBindObject()
                }
                axios.post(this.serverUrl, data).then(res=>{
                    this.$message.success('保存成功')
                })
            },
        }

}
</script>