<template>
  <div class="main-contain">
    <div class="position">
      <bread-crumb :crumbs='crumbs'></bread-crumb>
    </div>
    <div class="app-container">
          <el-form label-width="90px" class="clearfix" :model="form" ref="acticleform">
           <el-row :span=20>
            <el-form-item>
                <div class="title">
                 {{form.title}}
                </div>    
            </el-form-item>
          </el-row> 
           <el-row :span=20>
            <el-form-item>
                <div class="cont">
                   <!-- {{form.content}} -->
                   <li v-html="form.content"></li>
                </div>    
            </el-form-item>
          </el-row>
           <el-row :span=20>
            <el-form-item>
                <div class="but">
                   <el-button type="primary" @click="clossPreview()">关闭预览</el-button>
                </div>    
            </el-form-item>
          </el-row>         
        </el-form>
    </div>
  </div>
</template>

<script>
  import BreadCrumb from '../components/bread-crumb'
  import { getarticlePreview } from '@/api/act/submitinfo'
  export default {
    name: 'articlePreview',
    components:{
      BreadCrumb
    },
    data(){
      return{
        crumbs: [
          { path: false, name: '文章管理' },
          { path: '/articles/articlePreview', name: '文章预览' }
        ],
        form:{
            title:'',
            content:'',
        },
      }
    },
    methods:{
          getarticlePreview(){
              getarticlePreview(this.form).then(response=>{
                    if(response.data.state == 1){
                       this.form =  response.data.data.articles;
                       console.log("预览数据",this.form);
                    }  
              });
          },
          clossPreview(){
            this.$router.push({path:'/articles/articleList'})
          }
    },
    created(){
        this.getarticlePreview();
    },
  }
</script>

<style scoped>
    .title{
        font-size: 20px;
        position: relative;
        left: 750px;
    }

    .cont{
      position: relative;
      left: 200px;
    }
    .but{
      position: relative;
      left: 750px;
    }

</style>
