<template>
     <div class="main-contain">
         <div class="position">
            <bread-crumb :crumbs='crumbs'></bread-crumb>
         </div>
         <div class="app-container">
            <div class="title">
                 <!-- {{form.title}} -->
                 <div class="titletwo">{{form.title}}</div>
            </div>
            <!-- <div class="cont" v-html="form.content"> </div> -->
            <div class="title">
                <div class="titletwo">
                  <li v-html="form.content"></li>
                </div>
            </div>
            <div class="but">
                 <el-button type="primary" @click="clossPreview()">关闭预览</el-button>
            </div>          
       </div>
     </div>
</template>

<script>
    import BreadCrumb from '../components/bread-crumb'
      import { getPreviewInfo } from '@/api/act/submitinfo'
    export default {
        name: "articleEditPreview",
         components:{
            BreadCrumb
        },
        data(){
            return{
                 crumbs: [
                     { path: false, name: '文章管理' },
                     { path: '/articles/articleEditPreview', name: '文章编辑预览' }
                ],
                form:{
                  title:"",
                  content:"",
                }
            }
        },
        methods:{
            getPreviewInfo(){
                  const id = this.$route.params && this.$route.params.id;
                 console.log("这个id是什么",id)
                getPreviewInfo(id,this.form).then(response=>{
                      if(response.data.state == 1){
                         this.form =  response.data.data.articles;
                        //  var articles =  response.data.data.articles
                         console.log("articles",this.form)        
                      }
                })   
            },
            clossPreview(){
               const id = this.$route.params && this.$route.params.id;
              this.$router.push({path:'/articles/editArticle/'+id})
            }
        },
        created(){
            this.getPreviewInfo();
        }
    }
</script>
      
<style scoped>
    .title{
        font-size: 20px;
        text-align: center;
        width: 100%;
        height: 100%;
        margin-bottom: 10px;
    }
    .titletwo{
      display: inline-block;
    }

    .cont{
      position: relative;
      /* left: 200px; */
    }
    .but{
      position: relative;
      left: 900px;
    }
</style>
