<template>
    <div class="noticeForm">
        <el-form ref="form" label-width="100px"  :inline="true">
            <el-form-item label="通知类型">
                <el-select v-model="form.type" placeholder="请选择"  :clearable="true" class="input" size="small" style="width: 240px;">
                    <el-option :value="1" label="公告"></el-option>
                    <el-option :value="2" label="消息"></el-option>

                </el-select>
            </el-form-item>

            <el-form-item label="活动标题">
                <el-input v-model="form.title" placeholder="请输入活动标题"  size="small" style="width: 240px;"></el-input>
            </el-form-item>

            <el-form-item label="活动副标题">
                <el-input v-model="form.secondTitle" size="small" style="width: 240px;"></el-input>
            </el-form-item>

        </el-form>
        <el-form>
            <el-form-item label-width="100px"  label="内容">
                <div style="border: 1px solid #ccc;">
                    <Toolbar
                            style="border-bottom: 1px solid #ccc"
                            :editor="editor"
                            :defaultConfig="toolbarConfig"
                            :mode="mode"
                    />
                    <Editor
                            style="min-height: 200px; overflow-y: hidden;"
                            v-model="html"
                            :defaultConfig="editorConfig"
                            :mode="mode"
                            @onCreated="onCreated"
                    />
                </div>
            </el-form-item>
        </el-form>


    </div>

</template>
<style src="@wangeditor/editor/dist/css/style.css"></style>
<script>
    import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
    export default {
        name: "activityForm",
        components:{
            Editor,Toolbar
        },
        data(){
            return {
                editor: null,
                html: '',
                toolbarConfig: { },
                editorConfig: { placeholder: '请输入内容...' },
                mode: 'default', // or 'simple'
                form:{
                    id:"",
                    title:"",secondTitle:'',content:""

                },
            }
        },
        methods:{
            onCreated(editor) {
                this.editor = Object.seal(editor) // 一定要用 Object.seal() ，否则会报错
                this.setContext()
            },


            getContent(){
                this.form.content = this.editor.getHtml();
            },
            setContext(){

                this.html = this.form.content
                this.editor.setHtml(this.form.content)
            }
        }
    }
</script>

<style scoped>

</style>
