<!-- 瀑布流组件 -->
<template>
  <div class="WaterfallFlow">
    <van-list
      v-model="options.isLoading"
      :finished="options.finished"
      :finished-text="finishedText"
      :offset="5"
      :immediate-check="false"
      @load="load"
    >
      <div class="infoWrapper">
        <div
          class="wrapper-item"
          v-for="(arr, i) in [leftList, rightList]"
          :key="i"
        >
          <div
            v-for="(item, index) in arr"
            :key="index"
            class="WaterfallFlowList animated zoomIn"
            @click="handleClick(item.id, 
            list.findIndex(function(list){
              return list.id === item.id
            })
             , list)"
          >
            <!-- 图片 -->
            <img
              v-lazy="item.coverPhoto"
              class="img"
              :class="(i == 0&&index==0) ? 'height3' : ''"
            />
            
            <!-- 播放量和点赞数 -->
            <div :class="isShow?'count-wrap hasDoctorInfo':'count-wrap'">
              <span>
                <img src="../static/imgs/icon_bofang.png" alt="">
                {{item.dummyFrequencyOfPlay + item.frequencyOfPlay}}
              </span>
              <span>
                <img src="../static/imgs/icon_liked.png" alt="">
                {{item.dummyLikeFrequency + item.likeFrequency}}
              </span>
            </div>

            <!-- 标题 -->
            <div class="title van-multi-ellipsis--l2">
              {{ item.videoTitle | removeExtension}}
            </div>

            <!-- 医生头像和姓名 只有专家到家首页显示 -->
            <div class="doctor-info" v-show="isShow">
              <img :src="item.doctorHeadImg?item.doctorHeadImg:require('../static/imgs/doctor-avatar.png')">
              <span class="doctor-name">{{item.doctorName}}</span>
              <span class="job">医生</span>
            </div>
          </div>
        </div>
      </div>
    </van-list>
  </div>
</template>
<script>
export default {
  name: "ShortWaterfallFlow",
  created() {
    document.addEventListener("scroll", this.scrollPage, false);
  },
  props: {
    isShow: {
      type: Boolean,
      default: false
    },
    // 视频列表
    videoList: {
      type: Array,
      required: true
    },
    options: {
      type: Object,
      default: {
        finished: false, //是否完成
        isLoading: false //是否加载
      },
      required: true
    },
    finishedText: {
      type: String,
      default: "没有更多了~"
    }
  },
  data() {
    return {
      list: JSON.parse(JSON.stringify(this.videoList)), //深度拷贝 传入的视频数据
      timeId: null //定时器
    };
  },
  methods: {
    // 页面滚动触发的函数
    scrollPage(event) { },
    // 判断是否可见
    checkInPage(el) {
      var rect = el.getBoundingClientRect();
      var viewHeight = Math.max(
        document.documentElement.clientHeight,
        window.innerHeight
      );
      return !(rect.bottom < 0 || rect.top >= viewHeight);
    },
    load() {
      console.log("触底啦...");
      this.$emit("onload");
    },
    handleClick(id, index, list) {
      // 假设pageSize就是为10
      let currentPageIndex = Math.floor(index / 10) + 1;
      let currentVideoIndex = index % 10;
      let currentVideoList = list.slice((currentPageIndex-1) * 10, (currentPageIndex * 10));
      // 点击事件
      this.$emit("click",currentVideoIndex, currentVideoList, currentPageIndex);
    }
  },
  beforeDestroy() {
    document.removeEventListener("scroll", this.scrollPage, false);
  },
  watch: {
    videoList(newValue, oldValue) {
      this.list = JSON.parse(JSON.stringify(newValue));
    }
  },
  computed: {
    leftList() {
      return this.list.filter((v, i) => {
        // 返回偶数
        return i % 2 == 0;
      });
    },
    rightList() {
      return this.list.filter((v, i) => {
        // 返回奇数
        return i % 2 != 0;
      });
    }
  }
};
</script>
<style lang="less" scoped>
// 居中
.center() {
  display: flex;
  align-items: center;
}

.hide {
  visibility: hidden;
}

.WaterfallFlow {
  text-align: left;
  padding: 0.2rem 0.2rem;

  .infoWrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    font-size: 0.26rem;
    line-height: 1.5;

    .wrapper-item {
      width: 3.3rem;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
    }
  }

  // 视频列表详情
  .WaterfallFlowList {
    position: relative;
    width: 3.45rem;
    background-color: #ffffff;
    box-shadow: 0.05rem 0.05rem 0.27rem 0rem rgba(178, 178, 178, 0.29);
    border-radius: 0.1rem;
    margin-bottom: 0.2rem;
    overflow: hidden;
    margin: 0.1rem 0;
    padding-bottom: 0.1rem;
    // 图片
    .img {
      display: block;
      width: 100%;
      height: 4.04rem;
      // height: 5rem;
      object-fit: cover;

      &.height3 {
        height: 4.04rem;
        // height: 3rem;
      }
    }

    // 标题
    .title {
      width: 100%;
      min-height: .90rem;
      padding: 0 0.2rem;
      font-size: 0.28rem;
      line-height: .45rem;
      color: #333333;
      // border-top: 1px solid rgba(0, 0, 0, 0.2);
      margin-top: .2rem;
    }

    // 描述
    .desc {
      display: flex;
      align-items: center;
      padding: 0.1rem 0.2rem 0.2rem;
      .desc-img {
        flex-shrink: 0;
      }
      span {
        font-size: 0.24rem;
        margin-left: 0.1rem;
        color: #666;
        flex: 1;
      }
    }

    // 价格信息
    .priceInfo {
      padding: 0 0.2rem;

      > div {
        display: flex;
        justify-content: space-between;
        align-items: center;
        span:nth-of-type(1) {
          font-size: 0.32rem;
        }
        span:nth-of-type(2) {
          font-size: 0.24rem;
          color: #999999;
        }
      }
      // 免费
      .free {
        color: #0691f9;
      }
      //收费
      .charge {
        color: #fe0000;
      }
    }
  }
}

// 播放量和点赞数统计
.count-wrap {
  position: absolute;
  width: 100%;
  display: flex;
  align-items: center;
  bottom: 23%;
  background-color: rgba(0,0,0,.2);
  span {
    display: flex;
    align-items: center;
    margin-left: .2rem;
    color: #fff;
    font-size: .28rem;
    img {
      width: .34rem;
      height: .34rem;
      vertical-align: middle;
      margin-right: .1rem;
    }
  }
  
}


.hasDoctorInfo {
  bottom: 32%;
}

// 医生信息
.doctor-info {
  display: flex;
  align-items: center;
  padding-left: .1rem;
  img {
    display: block;
    width: .7rem;
    height: .7rem;
    border-radius: 50%;
    margin-right: .1rem;
  }

  .doctor-name {
    font-size: .32rem;
  }

  .job {
    margin-left: .2rem;
    font-size: .28rem
  }
}
</style>
