<template>
    <div class="editor">
        <!--<div class="doc_name">{{doc_name}}</div>-->
        <van-field v-model="title" input-align="center" class="doc_name"/>
        <!-- bidirectional data binding（双向数据绑定） -->
        <quill-editor v-model="content" class="quill_editor"
                      ref="myQuillEditor"
                      :options="editorOption"
                      @blur="onEditorBlur($event)"
                      @focus="onEditorFocus($event)"
                      @ready="onEditorReady($event)"
                      @change="onEditorChange($event)">
        </quill-editor>
        <div class="bottom">
            <van-button plain type="info" color="#cccccc" @click="cancel">取消</van-button>
            <van-button type="info" @click="sure">确定</van-button>
        </div>
    </div>
</template>

<script>
    import api from '../api/methods';
    export default {
        name: "wangeditor",
        data(){
            return{
                content:'',  //内容
                title:'',  //文章名字
                editorOption:null,
                docid:'',  //文章id
            }
        },
         created(){
            this.docid = this.$route.query.docid;
            this.articleDetail(this.docid);
        },
        methods:{
            //获取文件详情
            articleDetail(docid){
                api.articleDetail({docid:docid}).then((data)=>{
                    console.log(data,999)
                    if(data.err_code == 0){
                        this.content = data.data.doc;
                        this.title = data.data.title;
                    }
                })
            },
            //确定
            sure(){
                this.articleEdit();
            },
            //取消
            cancel(){
                this.$router.back();
            },
            //修改文件
            articleEdit(){
                let params = {
                    docid:this.docid,
                    title:this.title,
                    doc:this.content,
                    folderid:'',
                };
                api.articleEdit(params).then((data)=>{
                    if(data.err_code == 0){
                        this.$notify({ type: 'success',duration: 1500, message: '保存成功' });
                        this.$router.back();
                    }
                })
            },
            onEditorBlur(){}, // 失去焦点事件
            onEditorFocus(){}, // 获得焦点事件
            onEditorReady(){}, // 准备编辑器
            onEditorChange(){}, // 内容改变事件
        }
    }
</script>

<style scoped lang="less">
    @basefont:50;
    .editor{
        height:100vh;
        .doc_name{
            height:80rem /@basefont;
            color:#333333;
            font-size:36rem /@basefont;
        }
        .quill_editor{
            height:calc(100% - (200rem /@basefont));
            display:flex;
            flex-direction:column;
            /deep/.ql-container{
                flex:1;
                overflow:auto;
            }
            /deep/.ql-container.ql-snow{
                border:0;
            }
            /deep/.ql-toolbar.ql-snow .ql-formats{
                margin-right:20rem /@basefont;
            }
        }
        .bottom{
            height:120rem /@basefont;
            width:100%;
            position:fixed;
            bottom:0;
            background-color:white;
            display:flex;
            z-index:11;
            align-items:center;
            justify-content:space-around;
            padding:20rem /@basefont 0;
            box-sizing:border-box;
            box-shadow:0 -2px 5px #eeeeee;
            .van-button{
                width:40%;
            }
        }
    }
</style>