<template>
  <BCenter>
    <template #page-center1>
      <h2 id="recommend-top-title">推荐阅读</h2>
    </template>
    <template #page-center3>
      <div id="recommend" class="recommend">
        <recommend-item
            :item="item"
            :key="index"
            :theme-property="themeProperty"
            :index="index"
            v-for="(item,index) in allPages"/>
      </div>
    </template>
  </BCenter>
</template>

<script>
import RecommendItem from "./child/RecommendItem"
export default {
  name: "RecommendPage",
  components: {
    RecommendItem,
  },
  data() {
    return {
      allPages: null,
    }
  },
  props: {
    themeProperty: null
  },
  mounted() {
    setTimeout(() => {
      let allPages = this.$store.state.allPageMap

      new Promise((resolve,reject) => {
        let allPageArr = []

        if (this.themeProperty.recommendPageLength < allPages.length) {
          for (let i = 0; i < this.themeProperty.recommendPageLength; i++) {
            //console.log(allPages[i].articleUrl)
            allPageArr.push(allPages[this.getRandomInt(0,allPages.length -1)])
          }
        }else {
          for (let i = 0; i < allPages.length; i++) {
            //console.log(allPages[i].articleUrl)
            allPageArr.push(allPages[this.getRandomInt(0,allPages.length -1)])
          }
        }
        resolve(allPageArr)
      }).then((allPageArr) => {
        this.allPages = allPageArr
      })
    },700)
  },
  methods: {
    getRandomInt(min, max) {
      min = Math.ceil(min);
      max = Math.floor(max);
      return Math.floor(Math.random() * (max - min)) + min; //不含最大值，含最小值
    }
  },

}
</script>
