<template>
    <div v-loading.fullscreen.lock="fullscreenLoading" class="main-article" element-loading-text="Efforts to generate PDF">
      <div class="article__heading">
        <div class="article__heading__title">
          {{ article.title }}
        </div>
      </div>
      <div style="color: #ccc;">
        This article is from Evan You on <a target="_blank" href="https://medium.com/the-vue-point/plans-for-the-next-iteration-of-vue-js-777ffea6fabf">medium</a>
      </div>
      <div ref="content" class="node-article-content" v-html="article.content" />
    </div>
  </template>
  
  <script>
  
  export default {
    data() {
      return {
        article: '',
        fullscreenLoading: true
      }
    },
    mounted() {
      this.fetchData()
    },
    methods: {
      fetchData() {
        import('./content.js').then(data => {
          const { title } = data.default
          document.title = title
          this.article = data.default
          setTimeout(() => {
            this.fullscreenLoading = false
            this.$nextTick(() => {
              window.print()
            })
          }, 3000)
        })
      }
    }
  }
  </script>
  
  <style lang="scss">
  @mixin clearfix {
    &:before {
      display: table;
      content: '';
      clear: both;
    }
  
    &:after {
      display: table;
      content: '';
      clear: both;
    }
  }
  
  .main-article {
    padding: 20px;
    margin: 0 auto;
    display: block;
    width: 740px;
    background: #fff;
  }
  
  .article__heading {
    position: relative;
    padding: 0 0 20px;
    overflow: hidden;
  }
  
  .article__heading__title {
    display: block;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    word-wrap: break-word;
    overflow-wrap: break-word;
    font-size: 32px;
    line-height: 48px;
    font-weight: 600;
    color: #333;
    overflow: hidden;
  }
  
  .node-article-content {
    margin: 20px 0 0;
    @include clearfix;
    font-size: 16px;
    color: #333;
    letter-spacing: 0.5px;
    line-height: 28px;
    margin-bottom: 30px;
    font-family: medium-content-serif-font, Georgia, Cambria, "Times New Roman", Times, serif;
  
    &> :last-child {
      margin-bottom: 0;
    }
  
    b,
    strong {
      font-weight: inherit;
      font-weight: bolder;
    }
  
    img {
      max-width: 100%;
      display: block;
      margin: 0 auto;
    }
  
    p {
      font-weight: 400;
      font-style: normal;
      font-size: 21px;
      line-height: 1.58;
      letter-spacing: -.003em;
  
    }
  
    ul {
      margin-bottom: 30px;
    }
  
    li {
      --x-height-multiplier: 0.375;
      --baseline-multiplier: 0.17;
  
      letter-spacing: .01rem;
      font-weight: 400;
      font-style: normal;
      font-size: 21px;
      line-height: 1.58;
      letter-spacing: -.003em;
      margin-left: 30px;
      margin-bottom: 14px;
    }
  
    a {
      text-decoration: none;
      background-repeat: repeat-x;
      background-image: linear-gradient(to right, rgba(0, 0, 0, .84) 100%, rgba(0, 0, 0, 0) 0);
      background-size: 1px 1px;
      background-position: 0 calc(1em + 1px);
      padding: 0 6px;
    }
  
    code {
      background: rgba(0, 0, 0, .05);
      padding: 3px 4px;
      margin: 0 2px;
      font-size: 16px;
      display: inline-block;
    }
  
    img {
      border: 0;
    }
  
    /* 解决 IE6-7 图片缩放锯齿问题 */
    img {
      -ms-interpolation-mode: bicubic;
    }
  
    blockquote {
      --x-height-multiplier: 0.375;
      --baseline-multiplier: 0.17;
      font-family: medium-content-serif-font, Georgia, Cambria, "Times New Roman", Times, serif;
      letter-spacing: .01rem;
      font-weight: 400;
      font-style: italic;
      font-size: 21px;
      line-height: 1.58;
      letter-spacing: -.003em;
      border-left: 3px solid rgba(0, 0, 0, .84);
      padding-left: 20px;
      margin-left: -23px;
      padding-bottom: 2px;
    }
  
    a {
      text-decoration: none;
    }
  
    h2,
    h3,
    h4 {
      font-size: 34px;
      line-height: 1.15;
      letter-spacing: -.015em;
      margin: 53px 0 0;
    }
  
    h4 {
      font-size: 26px;
    }
  }
  </style>