<template>
  <div class="article-preview" v-loading="loading">
    <template v-if="detail">
      <template v-if="detail.type == ARTICLE_TYPE.getValueByName('edit')">
        <h1 class="article-preview__title">{{ detail.name }}</h1>
        <p v-if="detail.author" class="article-preview__author">作者: {{ detail.author }}</p>
        <div class="article-preview__content" v-html="detail.content" />
      </template>
      <template v-else>
        <iframe
          @load="loading = false"
          style="width: 100%; height: 100%"
          :src="detail.sourceUrl"
          frameborder="0"
        ></iframe>
      </template>
    </template>
  </div>
</template>

<script>
import { getArticleTemp, getArticleSnapshot } from "@/api/common";
import { ARTICLE_TYPE } from '@/enums/index'
export default {
  name: "ArticlePreview",
  props: {
    articleId: {
      type: [String, Number],
    },
    isTemp: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      ARTICLE_TYPE,
      detail: null,
      loading: false,
    };
  },
  watch: {
    articleId(val) {
      if (val) {
        this.loadDetail();
      }
    },
  },
  created() {
    this.loadDetail();
  },
  methods: {
    async loadDetail() {
      this.loading = true;
      try {
        const res = await (this.isTemp ? getArticleTemp : getArticleSnapshot)(this.articleId);
        this.detail = res.data;
        if (this.detail.type == this.articleTypeMap.edit) {
          this.loading = false;
        }
      } catch (error) {
        console.error(error);
        this.loading = false;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.article-preview {
  width: 100%;
  height: 100%;
  // padding: 15px;
  &__title {
    font-size: 19px;
    font-weight: 500;
    color: #12111e;
    line-height: 27px;
  }
  &__author {
    font-size: 13px;
    color: #00b191;
    line-height: 19px;
    margin-top: 10px;
  }
  &__content {
    word-break: break-all;
    // 富文本样式
  }
}
</style>
<style lang="scss">
.article-preview__content {
  .selectTdClass {
    background-color: #edf5fa !important;
  }
  table.noBorderTable td,
  table.noBorderTable th,
  table.noBorderTable caption {
    border: 1px dashed #ddd !important;
  }
  table {
    margin-bottom: 10px;
    border-collapse: collapse;
    display: table;
  }
  td,
  th {
    padding: 5px 10px;
    border: 1px solid #ddd;
  }
  caption {
    border: 1px dashed #ddd;
    border-bottom: 0;
    padding: 3px;
    text-align: center;
  }
  th {
    border-top: 1px solid #bbb;
    background-color: #f7f7f7;
  }
  table tr.firstRow th {
    border-top-width: 2px;
  }
  .ue-table-interlace-color-single {
    background-color: #fcfcfc;
  }
  .ue-table-interlace-color-double {
    background-color: #f7faff;
  }
  td p {
    margin: 0;
    padding: 0;
  }
  pre {
    margin: 0.5em 0;
    padding: 0.4em 0.6em;
    border-radius: 8px;
    background: #f8f8f8;
  }
  .pagebreak {
    display: block;
    clear: both !important;
    cursor: default !important;
    width: 100% !important;
    margin: 0;
  }
}
</style>
