<template>
  <div class="main-contain">
    <div class="position">
      <bread-crumb :crumbs="crumbs"></bread-crumb>
    </div>
    <div class="app-container">
      <div class="articlename">{{articleform.title}}</div>
      <div v-html="articleform.content" class="articlecontent"></div>
    </div>
  </div>
</template>

<script>
import BreadCrumb from "../components/bread-crumb";
import { getArticleDetail } from "@/api/act/submitinfo";
export default {
  name: "article_detail",
  components: {
    BreadCrumb
  },
  data() {
    return {
      crumbs: [
        { path: false, name: "文章管理" },
        { path: "/articles/articleDetail", name: "文章详情" }
      ],
      articleform: {
        title: "",
        content: ""
      }
    };
  },
  methods: {
    getArticleDetail() {
      const id = this.$route.params && this.$route.params.id;
      console.log("文章详情id是什么", id);
      getArticleDetail(id, this.articleform).then(response => {
        if (response.data.state == 1) {
          var articles = response.data.data.articles;
          this.articleform = response.data.data.articles;
          console.log("articles", articles);
        }
      });
    }
  },
  created() {
    this.getArticleDetail();
  }
};
</script>

<style scoped>
.articlename {
  min-width: 500px;
  height: 50px;
  /* border: solid 1px red; */
  margin-left: 600px;
  font-weight: 600;
  font-size: 24px;
  margin-top: 30px;
  margin: 0 auto;
  text-align: center;
}

.articlecontent {
  width: 1000px;
  height: 100%;
  margin: 0 auto;
  /* border:solid 1px red; */
  /* margin-left: 300px; */
}
</style>
