<!--瀑布流组件-->
<template>
  <div ref="waterfall" :class="['water-fall-container', absolute ? 'absolute': '']" @scroll="scroll">
    <water-fall ref="waterfallComp"
      :col="col"
      :width="itemWidth"
      :gutter-width="gutterWidth"
      :data="articleList"
      :scrollTop="scrollTop"
      :page="listInfo.pageNo"
      @loadmore="loadMore">
      <template>
        <div class="cell-item" v-for="(item, index) in articleList" :key="index" :data-index="index" :data-id="item.articleId">
          <div class="item-image" :data-index="index" :data-id="item.articleId" @click="gotoDetailPage">
            <div :class="['icon', item.sort === 4 ? 'icon-play' : '', item.sort === 1 ? 'icon-note' : '']"></div>
            <img :src="item.coverImage">
<!--            <img :src="item.resourceSrc" v-else-if="item.dataType === 2">-->
          </div>
          <div class="item-info">
            <p v-if="item.content" class="item-title">{{item.content}}</p>
            <div class="user-info">
              <div class="user-head">
                <img :src="item.authorHeadIco">
              </div>
              <p class="user-name">{{item.authorName}}</p>
              <div class="zan-container" :data-praised="item.hasPraised" :data-index="index" :data-id="item.articleId" @click="updatePraise">
                <i :class="[item.hasPraised === 'Y' ? 'iconzan-fill' : 'iconzan_n', 'iconfont', 'btn-zan']"></i>
                <p class="zan-count">{{item.praiseCount ? item.praiseCount : '赞'}}</p>
              </div>
            </div>
          </div>
        </div>
      </template>
    </water-fall>
    <div class="load-text">{{loadText}}</div>
  </div>
</template>

<script>
import WaterFall from '../../../components/waterfall/waterfall';
import {mapState, createNamespacedHelpers} from 'vuex';

const {mapActions} = createNamespacedHelpers('article/articleList');

export default {
  name: 'waterFallList',
  components: {WaterFall},
  props: {
    listData: { // 列表数据
      type: Array,
      default() {
        return [];
      }
    },
    listInfo: { // 列表基础信息
      type: Object,
      default() {
        return {};
      }
    },
    itemW: { // 每一个ariticleItem的宽度
      type: Number,
      default: 344
    },
    gutterW: { // item之间的间隔宽度
      type: Number,
      default: 18
    },
    isLoading: { // 是否正在调用列表接口
      type: Boolean,
      default: false
    },
    yasParams: { // 父级页面的yas参数
      type: Object,
      default() {
        return {};
      }
    },
    yasClickOP: { // 用于监测点击事件的名称
      type: String,
      default: 'XY_STROLL_MAIN_C'
    },
    parentHeight: { // 如果有父级元素包含此组件，请传递屏幕高度
      type: Number,
      default: 0
    },
    needParent: { // 是否需要父级容器高度，与parentHeight联合判断,防止高度误算
      type: Boolean,
      default: false
    },
    absolute: { // 解决ios10.3列表页容器高度计算错误得问题，详情页千万不要absolute
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      col: 2,
      scrollTop: 0, // 页面滚动高度
      isLogin: false, // 是否登录
      loadText: '', // 加载新列表提示文字
      timeout: null, // 用于提交曝光的yas计时
      reportVisibleArr: [], // 需要一次性提交的曝光数据
    };
  },
  computed: {
    ...mapState(['yoho']),
    articleList() {
      // console.log('listData=', this.listData);

      return this.listData;
    },
    itemWidth() {
      let width = 0;

      if (document) {
        width = (this.itemW * 0.5 * (document.documentElement.clientWidth / 375));
      }

      return width;
    },
    gutterWidth() {
      let gutwidth = 0;

      if (document) {
        gutwidth = (this.gutterW * 0.5 * (document.documentElement.clientWidth / 375));
      }

      return gutwidth;
    }
  },
  watch: {
    'yoho.context.isLogin': function(val) {
      // this.isLogin = val;
    },
    isLoading(newVal) {
      if (newVal === true) {
        this.loadText = '加载中...';
      } else {
        this.loadText = '';
      }
    },
    'this.$refs.waterfall.offsetHeight': {

    }
  },
  mounted() {
    console.log('waterfallMounted')


    this.checkLogin();
    // console.log('scrollParent=', this.scrollParent);
  },
  methods: {
    loadMore() {
      this.$emit('load-more');
    },
    scroll() {
      // console.log(this.$refs.waterfall.scrollTop);
      this.scrollTop = this.$refs.waterfall.scrollTop;
      this.$refs.waterfallComp.emitLoadMore();

      let containerHeight = this.needParent ? this.parentHeight : this.$refs.waterfall.offsetHeight; // 容器高度
      let headerHeight = document.querySelector('.header') ? document.querySelector('.header').offsetHeight : 0; // 头部高度

      this.scrollHandler({containerHeight: containerHeight, scrollTop: this.scrollTop, headerHeight: headerHeight});
    },
    scrollHandler({containerHeight, scrollTop, headerHeight, containerOffsetTop}) {
      if (this.timeout) {
        clearTimeout(this.timeout);
        this.timeout = null;
      }

      let items = document.querySelectorAll('.cell-item:not(.collect)');

      items.forEach((item, index) => { // 遍历元素，判断在可视区域的元素加上collect并加入上报数组，此方法不可重复曝光
        let isCollected = /collect/.test(item.className);
        let bounding = item.getBoundingClientRect();

        if (!isCollected) {
          if (this.isVisible(bounding.top, scrollTop, containerHeight, headerHeight)) {
            item.className += ' collect';

            let yasParam = Object.assign({}, this.yasParams, {
              I_INDEX: parseInt(item.dataset.index, 10) + 1,
              ARTICLE_ID: item.dataset.id
            });

            this.reportVisibleArr.push(yasParam);
          }
        }
      });

      this.timeout = setTimeout(() => { // 定时器在停止滚动500ms后上报
        if (this.reportVisibleArr.length) {
          this.$store.dispatch('reportYas', {
            params: {
              appop: 'XY_SHOW_EVENT',
              param: { DATA: this.reportVisibleArr}
            }
          });
          this.reportVisibleArr = [];
        }

      }, 500);

    },
    isVisible(top, scrollTop, containerHeight, headerHeight) { // 判断元素是否在可视区域
      if (this.needParent && !this.parentHeight) {
        return false;
      }
      if (top - headerHeight > 0 && (top - headerHeight) < containerHeight - 150) {
        // console.log(top, scrollTop, containerHeight, headerHeight, (top-headerHeight));
        return true;
      } else {
        return false;
      }
    },
    async checkLogin() {
      const user = await this.$sdk.getUser(true);

      if (user.uid) {
        this.isLogin = true;
      }
    },
    gotoDetailPage(e) { // 跳转详情页
      let articleId = e.currentTarget.dataset.id;
      let index = parseInt(e.currentTarget.dataset.index, 10);

      if (articleId) {
        this.$router.push({
          name: 'ArticleDetail',
          params: {
            articleId: articleId
          }
        });

        if (this.yasClickOP) {
          this.$store.dispatch('reportYas', {
            params: {
              appop: this.yasClickOP,
              param: Object.assign({}, this.yasParams, {
                I_INDEX: index + 1,
                ARTICLE_ID: articleId
              })
            }
          });
        }
      }
    },
    updatePraise(e) { // 点赞
      if (this.isLogin) {
        let articleId = e.currentTarget.dataset.id;
        let index = e.currentTarget.dataset.index;
        let status = e.currentTarget.dataset.praised === 'Y' ? 1 : 0;

        console.log(articleId, index, status);
        this.$emit('update-praise', {articleId, status, index});
      } else {
        this.$yoho.auth();
      }
    },
    scrollToOldPlace() { // 从详情页路由回来时，滚动到原来的位置
      console.log('scrollTop=', this.scrollTop);
      if (!this.isLogin) {
        this.checkLogin();
      }

      this.$refs.waterfall.scrollTo(0, this.scrollTop);
    }
  }
};
</script>

<style lang="scss">
  .water-fall-container {
    padding: 24px 22px 0 22px;
    background-color: #efefef;
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
    z-index: 1;

    &.absolute {
      position: absolute;
    }

    .load-text {
      text-align: center;
      color: #999;
      font-size: 30px;
      line-height: 30px;
    }

    img {
      width: 100%;
      float: left;
    }

    .item-image {
      position: relative;
      width: 100%;
      border-radius: 16px 16px 0 0;
      overflow: hidden;

      img {
        border-radius: 16px 16px 0 0;
      }

      .icon {
        width: 40px;
        height: 40px;
        position: absolute;
        right: 12px;
        top: 12px;
        background-size: 100% 100%;
        z-index: 9;

        &.icon-play {
          background-image: url("../../../statics/image/article/icon_list_play.png");
        }

        &.icon-note {
          background-image: url("../../../statics/image/article/icon_list_note.png");
        }
      }
    }

    .cell-item {
      margin-bottom: 16px;

      .item-info {
        background-color: #fff;
        border-radius: 0 0 16px 16px;


        .item-title {
          padding: 12px 20px 0 20px;
          max-height: 88px;
          line-height: 40px;
          font-weight: 600;
          font-size: 28px;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          word-break: break-all;
          overflow: hidden;
        }

        .user-info {
          position: relative;
          padding: 0 20px 8px 20px;
          height: 70px;
          display: flex;
          align-items: center;

          .user-head {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            overflow: hidden;
          }

          .user-head img {
            height: 100%;
            border-radius: 50%;
          }

          .user-name {
            display: inline-block;
            min-width: 20px;
            max-width: 150px;
            white-space: nowrap;
            overflow: hidden;
            font-size: 24px;
            font-weight: 300;
            padding-left: 8px;
            text-overflow: ellipsis;
          }

          .zan-container {
            position: absolute;
            display: flex;
            right: 0;
            width: 114px;
            height: 34px;
            align-items: center;
          }

          .btn-zan {
            font-size: 34px;
          }

          .btn-zan.iconzan-fill {
            color: #c30016;
          }

          .zan-count {
            display: inline-block;
            font-size: 26px;
            margin-left: 4px;
            max-width: 66px;
            white-space: nowrap;
            overflow: hidden;
          }
        }
      }
    }
  }
</style>