<template>
  <view class="app-container">
    <template v-if="articleInfo">
      <HeaderBar :title="articleInfo.title || '文章详情'" text-align="center" enable-back/>
      <view  class="article-content">
        <view class="article-info">
          <text class="article-time">发布于 {{ articleInfo.createTime | dv}}</text>
        </view>
        <u-parse :content="articleInfo.content" :options="parseOptions"></u-parse>
      </view>
    </template>
    <template v-else>
      <HeaderBar title="文章详情" text-align="center" enable-back/>
      <view class="no-data">
        <u-empty mode="data" text="暂无数据"></u-empty>
      </view>
    </template>
  </view>
</template>

<script>
import { appGetOneArticle } from '@/api/app/article'
import HeaderBar from '@/components/HeaderBar.vue'

export default {
  name: 'ArticleDetail',
  components: {
    HeaderBar
  },
  data() {
    return {
      articleInfo: null,
      parseOptions: {
        // 富文本解析配置
        tagStyle: {
          table: 'border-collapse:collapse;border-top:1px solid #dfe2e5;border-left:1px solid #dfe2e5;',
          th: 'border-right:1px solid #dfe2e5;border-bottom:1px solid #dfe2e5;padding:8px;',
          td: 'border-right:1px solid #dfe2e5;border-bottom:1px solid #dfe2e5;padding:8px;'
        }
      },
      queryParams: {}
    }
  },
  onLoad(options) {
    if (options) {
      Object.assign(this.queryParams, options)
    }
    this.getArticleDetail()
  },
  methods: {
    getArticleDetail() {
      appGetOneArticle(this.queryParams)
        .then(res => {
          if (res.code === 200) {
            this.articleInfo = res.data
          } else {
            this.articleInfo = null
          }
        })
        .catch(() => {
          this.articleInfo = null
        })
    }
  }
}
</script>

<style lang="scss" scoped>
.app-container {
  padding-bottom: 128rpx;
}

.article-content {
  background-color: #fff;
  margin: 32rpx 20rpx;
  padding: 24rpx 24rpx 64rpx;
  border-radius: 20rpx;
}
.article-info {
  margin-bottom: 30rpx;
  display: flex;
  justify-content: flex-end;
  .article-time {
    font-size: 24rpx;
    color: #999;
  }
}

.no-data {
  padding: 100rpx 0;
}
</style>
