<template>
    <div style="display: flex;flex-direction: column;flex-wrap: nowrap;">
        <el-card style="border: none" shadow="always">
            <el-form :model="form" :rules="rules" ref="ruleForm" style="display: flex;flex-direction: column">
                <el-form-item prop="title">
                    <el-input  placeholder="请输入文章标题" v-model="form.title"></el-input>
                </el-form-item>
                <el-form-item prop="icon">
                    <el-input placeholder="请输入文章缩略图" v-model="form.icon"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-tiptap style="margin-top: 20px" v-model="form.content" :readonly="false" :showMenubar="true"
                               :extensions="extensions"/>
                </el-form-item >
                <el-form-item style="display: flex;flex-direction: row;justify-content: center;" prop="content">
                    <el-button @click="publishArticle('ruleForm')" type="success" icon="el-icon-check" circle></el-button>
                </el-form-item>
            </el-form>
        </el-card>

    </div>
</template>

<script>
import {
    Doc,
    Text,
    Paragraph,
    Heading,
    Bold,
    Italic,
    Strike,
    Underline,
    Link,
    Image,
    Iframe,
    CodeBlock,
    Blockquote,
    ListItem,
    BulletList,
    OrderedList,
    TodoItem,
    TodoList,
    TextAlign,
    Indent,
    LineHeight,
    HorizontalRule,
    HardBreak,
    TrailingNode,
    History,
    FormatClear,
    TextColor,
    TextHighlight,
    Preview,
    Print,
    SelectAll,
    FontType,
    FontSize,
    CodeView,
} from "element-tiptap";
import axios from "axios";
import Vue from "vue";
import FormData from "form-data"

export default {
    name: "PublishArticle",
    props: {
        openPublishDialog: Boolean
    },
    data() {
        return {
            extensions: [
                new Link,
                new Image({}),
                new Iframe,
                new CodeBlock,
                new Blockquote,
                new Doc(),
                new Text(),
                new Paragraph(),
                new Heading({level: 5}), // 支持多级标题，设置为5级
                new Bold({bubble: true}), // 在气泡菜单中渲染菜单按钮
                new Underline({bubble: true, menubar: true}), // 在气泡菜单而不在菜单栏中渲染菜单按钮
                new Italic(),
                new Strike(),
                new ListItem(),
                new BulletList(),
                new OrderedList(),
                new TodoItem,
                new TodoList,
                new TextAlign({alignments: ['left', 'center', 'right', 'justify'],}),
                new Indent({
                    minIndent: 0,
                    maxIndent: 7,
                }),
                new LineHeight({lineHeights: ['100%', '200%', '300%']}),
                new HorizontalRule,
                new HardBreak,
                new TrailingNode,
                new History,
                // new Table({resizable: true}),
                // new TableHeader,
                // new TableCell,
                // new TableRow,
                new FormatClear,
                new TextColor({bubble: true}),
                new TextHighlight,
                new Preview,
                new Print,

                new SelectAll,
                new FontType,
                new FontSize,
                new CodeView,
            ],
            // openPublishDialog:false,
            closePublishArticle: false,
            form: {
                title: null,
                icon: null,
                content: null,
            },
            rules: {
                title: [
                    // required：规则，o：失去焦点触发
                    {required: true, message: "请输入标题", trigger: "blur"},
                ],
                icon: [{required: true, message: "请输入缩略图", trigger: "blur"}],
                content: [{required: true, message: "请输入内容", trigger: "blur"}],
            },
        }

    },
    methods: {
        modalClose() {
            this.$emit('update:openPublishDialog', false); // 直接修改父组件的属性
        },
        publishArticle(formName) {
            // var that=this;
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    axios({
                        method: 'post',
                        // 请求的地址
                        url: 'http://localhost:8082/helloGithub_war_exploded/articlepublish',
                        // URL 中的查询参数
                        params: {
                            username: this.$cookie.get('username'),
                            articleTitle: this.form.title,
                            articleIco: this.form.icon,
                            articleContent: this.form.content,
                        }
                    }).then((res) => {
                        if (res.data.code === 200) {
                            Vue.prototype.$notify({
                                title: '成功',
                                message: ('i', {style: 'color: teal'}, res.data.msg),
                                type: 'success',
                                offset: 50
                            });
                            window.location.reload();
                        } else {
                            Vue.prototype.$notify.error({
                                title: '错误',
                                message: res.data.msg,
                                offset: 50
                            });
                        }

                    });
                }
            });
        },

    }
}
</script>

<style scoped>

</style>