<template>
  <div class="news">
    <ul class="news-section waterfall">
      <li v-for="news in newses" class='item' refs='myItem'>
        <div class="item-content" v-for="item in news">
          <h2></h2>
          <img class="img-news" :src="item.image" alt="">
          <div></div>
        </div>
      </li>
    </ul>
    <LoadingMore :disabled="disabled" :show="haveMore" @loading="getNews"></LoadingMore>
  </div>
</template>

<script>
import LoadingMore from '../base/loadingMore';
export default {
  components: {
    LoadingMore
  },
  data () {
    return {
      msg: 'Welcome to News',
      token:'',
      limit: 10,
      newses: [
        [],
        [],
        []
      ],
      defaultOrdering: '-publication_date',
      page:0,
      haveMore: true,
      disabled: false,
      offset: 100,
      loading: false,
    }
  },
  computed: {
    newsCols() {
      return document.getElementsByClassName('item')
    }
  },
  mounted() {
    this.getNews();
  },
  methods: {
    // 获取项目数据
    getNews() {
      this.disabled = true;
      this.page++;
      // 获取newses
      this.$axios.get('http://test.pandanc.com/api/v1/news/entry/', {
        params: {
          limit: this.newses.length * 2,
          offset: this.newses.length * 2 * (this.page - 1),
          ordering: this.defaultOrdering
        }
      }).then( res => {
        this.haveMore = res.data.next;
        this.pushNews(res.data.results)
      }).catch(err => {
        console.log(err)
        this.disabled = false;
      })
    },
    pushNews(results, index = 0) {
      if (results[index]) {
        // 向最短的列中追加数据
        this.newses[this.getMinCol(this.newsCols)].push(results[index]);
        this.$nextTick(() => {
          this.pushNews(results, index + 1);
        })
      } else {
        this.disabled = false;
      }
    },
    // 瀑布流中用来获取最短的列
    getMinCol(cols) {
      cols = Array.from(cols);
      let min = cols[0].clientHeight,
          index = 0;
      for (let i in cols) {
        if (min > cols[i].clientHeight) {
          min = cols[i].clientHeight;
          index = i;
        }
      }
      return index;
    }
  }
};
</script>

<style scoped>
ul,li {
  margin: 0;
  padding: 0;
  list-style-type: none;
}
.img-news {
  width: 200px;
  height: 300px;
}
.waterfall {
  border: 1px solid #333;
  width: 1000px;
  margin: 0 auto;
  overflow: hidden;
}
.item {
  width:300px;
  float: left;
  margin-left:20px;
}
.item-content {
  height: auto;
  box-sizing: border-box;
  border: 1px solid red;
}
</style>

<template>
    <button @click="onClick" v-show='show' ref='loadBtn'></button>
</template>

<script>
export default {
  props: {
    show: {
      type: [Boolean, String],
      default: true
    },
    disabled: {
      type: Boolean,
      default: false
    },
    offset: {
      type: [Number, String],
      default: 100
    },
  },
  data() {
        return {
          text: '正在加载',
          loading: false
        }
  },
  mounted() {
    window.addEventListener('scroll', this.onScroll)
  },
  watch: {
      //不显示后取消检测
      show(newValue) {
        newValue ? null : window.removeEventListener('scroll', this.onScroll)
      },
      //当可点击时取消loading状态
      disabled(newValue) {
        newValue ? null : this.loading = false; 
      }
  },
  methods: {
    onScroll() {
        //不正在axios中，按钮可点击
        if (!this.disabled) {
          //在视野中
          if (this.isView(this.$refs.loadBtn)) {
            this.$emit('loading');
            this.loading = true;
          } else {
            //不在视野中
            this.loading = false;
          }
        } else {
          //正在axios中
          this.loading = true;
        }
      },
      //是否在视野内
      isView(element) {
          if (!element || !element.getBoundingClientRect) {
            return false
          };
          const rect = element.getBoundingClientRect(),
                top = rect.top >= 0,
                left = rect.left >= 0,
                bottom = rect.bottom <= (window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight) + this.offset,
                right = (rect.right <= (window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth) + this.offset);
                return (top && left && bottom && right);
      },
      // 立刻加载
      onClick() {
        this.loading = true;
        this.$emit('loading')
      }
  },
  beforeDestroy() {
      window.removeEventListener('scroll', this.onScroll)
  }
};
</script>

<style scoped>


</style>