<template lang="pug">
.pageList
  .articleContent(ref='articleImgs', v-if='Articels')
    article.articleList(v-for='(post, index) in Articels', :key='index')
      .articleImgs(v-if='post.postImages.length')
        nuxt-link(:to="'/post/' + post.ID")
          Swiper(:style="'height: ' + imageHeight + 'px'")
            Slide(v-for="(imgUrl, inx) in post.postImages" :key="inx")
              img(:src='imgUrl')
      .articleAbstract
        nuxt-link(:to="'/post/' + post.ID")
          .articleTitle(v-html='post.post_title')
        .articalMeta
          ul
            li
              Icon(:icon="['far', 'calendar-alt']")
              | &nbsp; {{ post.post_date }}
            li
              Icon(:icon="['far', 'bookmark']")
              nuxt-link(v-for='(relationships, idx) in post.term_relationships', :key='idx', v-if='relationships.term_taxonomy', :to="'/' + relationships.term_taxonomy.term.slug")
                span
                  | &nbsp; {{ relationships.term_taxonomy.term.name }}
            li(v-if='post.postmetum.meta_value !== 0')
              Icon(:icon="['fas', 'thermometer-' + post.hotValue]")
              | &nbsp; {{ post.postmetum.meta_value }}
        .articelAbstractContent(v-html='post.post_excerpt || post.post_content')
        .readMore
          nuxt-link.readMoreBtn(:to="'/post/' + post.ID")
            | READ MORE
  .Info(v-if='Info')
    | {{ Info }}
  nuxt-link(:to="nowPage > 2 ? nowPath + '/page/' + (nowPage - 1) : nowPath + '/'", :class="nowPage > 1 ? 'btn-footer btn-prev ' : 'btn-footer btn-prev btn-disable'")
    Icon(:icon="['fas', 'chevron-left']")
    | &nbsp; 上一页
  nuxt-link(:to="(nowPage + 1) <= Math.ceil(ArticelsCount / 8) ? nowPath + '/page/' + (nowPage + 1) : '#'", :class="(nowPage + 1) <= Math.ceil(ArticelsCount / 8) ? 'btn-footer btn-next' : 'btn-footer btn-next btn-disable'")
    | 下一页 &nbsp;
    Icon(:icon="['fas', 'chevron-right']")
</template>

<script>
export default {
  async asyncData(inject) {
    const { app, params, $axios } = inject
    let Info = null
    let Articels = []
    const nowPage = params.page ? parseInt(params.page) : 1

    const data = await $axios.$get('/public/article/list', {
      params: {
        page: nowPage,
        num: 8,
        category: params.terms || ''
      }
    })

    if (data.status === 1) {
      Articels = data.result.list
      for (const n in Articels) {
        Articels[n].post_date = app.$moment(Articels[n].post_date).utc().format('lll')// 格式化时间
        // 热度值计算
        if (Articels[n].postmetum !== null && Articels[n].postmetum !== '') {
          Articels[n].hotValue = app.$getHatValue(Articels[n].postmetum.meta_value)
        } else {
          Articels[n].hotValue = 0
          Articels[n].postmetum = {}
          Articels[n].postmetum.meta_value = 0
        }

        Articels[n].postImages = []
      }
    } else if (data.status === 404) {
      Info = '未找到文章。'
    }

    return {
      Articels,
      imageHeight: 0,
      Info,
      nowPage,
      ArticelsCount: data.result.count || 0,
      nowPath: params.terms ? '/' + params.terms : ''
    }
  },
  mounted() {
    this.$finishLoad()
    this.analyseImages()
  },
  methods: {
    async analyseImages() { // 图片大小分析及处理
      const articleImgsWidth = this.$refs.articleImgs.getBoundingClientRect().width
      this.imageHeight = articleImgsWidth * 0.5625
      for (const n in this.Articels) {
        if (this.Articels[n].postimages.length !== 0) {
          for (const i in this.Articels[n].postimages) {
            const data = await this.$axios.$get(this.Articels[n].postimages[i].guid + '?x-oss-process=image/info')
            const widthValue = data.ImageWidth.value
            const heightValue = data.ImageHeight.value
            if (widthValue > articleImgsWidth && (articleImgsWidth * heightValue / widthValue > this.imageHeight) && this.Articels[n].postImages.length < 10) {
              this.Articels[n].postImages.push(this.Articels[n].postimages[i].guid + '?x-oss-process=image/resize,m_lfit,w_' + articleImgsWidth)
            }
          }
        }
      }
    }
  }
}
</script>
