<template>
    <div style="display:flex;flex-direction:row;flex-wrap: nowrap">
        <div style="display: flex;flex-direction:column;flex-wrap: nowrap">
            <div class="PageHeader">
                <br/>
                <el-page-header  @back="goBack" style="justify-content:left;display: flex;">
                    <div slot="title" style="font-size:23px;font-weight: 600;"></div>
                    <div slot="content" style=";display: flex;flex-direction:row;justify-content:center;font-size:23px;font-weight: 600;">
                        {{ArticleTitle}}
                    </div>
                </el-page-header>
            </div>
            <div class="PageContent" style="display: flex;flex-direction: column;flex-wrap: nowrap;align-items: center">
                    <el-image   fit="cover" style="width: 50vw; height: 35vh;margin-top: 20px" :src="articleico">
                        <div slot="placeholder" class="image-slot">
                            加载中<span class="dot">...</span>
                        </div>
                        <div slot="error" class="image-slot">
                            <i class="el-icon-picture-outline"></i>
                        </div>
                    </el-image>

                <el-card style="border: none;width: 50vw;box-shadow: none;">
                    <el-tiptap style="margin-top: 20px;text-align: left" v-html="ArticleContent" :readonly="true" :showMenubar="false" :extensions="extensions" />
                </el-card>
            </div>
        </div>
        <RightTools></RightTools>
    </div>
</template>

<script>
import axios from "axios";
import {
    Bold,
    BulletList,
    Doc,
    Heading,
    Italic,
    ListItem,
    OrderedList,
    Paragraph,
    Strike,
    Text,
    Underline
} from "element-tiptap";
import RightTools from "@/components/Home/RightTools.vue";

export default {
    name: "ArticleDetail",
    components: {RightTools},
    data(){
      return{
          extensions: [
              new Doc(),
              new Text(),
              new Paragraph(),
              new Heading({ level: 5 }), // 支持多级标题，设置为5级
              new Bold({ bubble: false }), // 在气泡菜单中渲染菜单按钮
              new Underline({ bubble: false, menubar: false }), // 在气泡菜单而不在菜单栏中渲染菜单按钮
              new Italic(),
              new Strike(),
              new ListItem(),
              new BulletList(),
              new OrderedList(),
          ],
          ArticleContent:null,
          ArticleTitle:null,
          articleico:'',
          loginDialogVisible:false,

      }
    },
    watch: {
        $route () {
            if(this.$route.query.refresh){
                this.getArticleDetail() //重新调用http请求实现页面的重新渲染
            }
        }
    },
    mounted() {
        this.getArticleDetail();
    },
    methods: {
        goBack() {
            window.history.go(-1);
        },
        getArticleDetail(){
            var that=this;
            axios({
                method: 'post',
                // 请求的地址
                url: 'http://localhost:8082/helloGithub_war_exploded/selectByArticleId',
                // URL 中的查询参数
                params: {
                    articleid:this.$route.query.id
                }
            }).then(function (res) {
                that.ArticleContent=res.data.ArticleContent;
                that.ArticleTitle=res.data.ArticleTitle;
                that.articleico=res.data.articleico;

            });
        },
    }
}
</script>

<style scoped>
/*::v-deep .el-page-header__left{*/
/*    left:-300px;*/
/*}*/

::v-deep .el-page-header__left{
    left:10px;
}
::v-deep .el-page-header__content{
    flex:1;
}
</style>