<template>
  <view class="preview-post" v-if="postDetail">
    <view class="post-title">
      {{ postDetail.content.title }}
    </view>
    <view class="post-time">
      {{ postDetail.createTime | formatDateTime }}
    </view>
    <rich-text :nodes="postDetail.content.content | formatRichText"></rich-text>
  </view>
</template>

<script>
import { queryPostList } from '../../cms/api';
import { formatRichText, formatDateTime } from '../../filters/index';
export default {
  name: 'preview-post',
  filters: { formatRichText, formatDateTime },
  data() {
    return {
      pid: null,
      postDetail: null,
    };
  },
  onLoad(options) {
    this.pid = options.pid;
  },
  mounted() {
    this.getPostDetail();
  },
  methods: {
    // 获取文章详情
    async getPostDetail() {
      if (!this.pid) return;
      const params = {
        query: {
          limit: 10,
          page: 0,
          keyJson: JSON.stringify({ pid: this.pid }),
        },
      };
      const ret = await queryPostList(params);
      const postDetail = ret.data[0];
      this.postDetail = postDetail;
      console.log('%c [postDetail]: ', 'color:#1989fa;', postDetail.content);
    },
  },
};
</script>

<style scoped lang="scss">
.preview-post {
  padding: 20rpx;
  .post-title {
    font-size: 32rpx;
    font-weight: bold;
    text-align: center;
    margin-bottom: 20rpx;
  }
  .post-time {
    margin: 20rpx;
    color: #999;
    text-align: center;
  }
}
</style>
