<template>
  <div class="main">
    <navbar :user="userInfo"></navbar>
    <div style="width: 1094px;background-color: white;margin: 0 auto; border-radius: 10px;">
      <div class="postDialog">
        <h1 class="tc mt20" style="font-size: 50px; color: #000000;">
        {{postInfo.title}}
        </h1>
        <h2 class="tc mt20" style="font-size: 30px;">
          发布时间：{{postInfo.publishTime}}
          <span class="ml30 ng-binding">来源：{{postInfo.author}}</span>
          <span class="ml30 ng-binding">阅读数：{{postInfo.viewCount}}</span>
        </h2>
        <span v-html="postInfo.content" class="mt30 tl"></span>
      </div>
    </div>
  </div>
</template>
<script>
  import {
    httpServer
  } from "@/components/httpServer/httpServer.js";
  import navbar from "@/components/nav/navbar.vue";
  import {
    mapGetters
  } from "vuex";
  export default {
    components: {
      navbar
    },
    data() {
      return {
        postId: 0,
        postInfo: {}
      };
    },
    computed: {
      ...mapGetters("user", ["userInfo"])
    },
    methods: {
      gotoDetail() {
        let postId = this.postId;
        httpServer("Course.getPostInfo", {
          postId
        }).then(res => {
          if (res.code == 200) {
            this.postInfo = res.data
          }
        })
      }
    },
    created() {
      this.postId = +this.$route.query.postId || 0;
      if (this.postId > 0) {
        this.gotoDetail();
      }
    }
  }
</script>
<style>
  .postDialog {
    background-color: white;
    width: 800px;
    margin: 0px auto;
    padding: 20px;
    margin-bottom: 100px;
  }
</style>
