<!-- 瀑布流组件 -->
<template>
  <div class="WaterfallFlow">
    <van-list
      v-model="options.isLoading"
      :finished="options.finished"
      :finished-text="finishedText"
      @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)"
          >
            <!-- 图片 -->
            <img
              v-lazy="item.CoverMap"
              lazy-load
              class="img"
              :class="(i == 0&&index==0)? 'height3' : ''"
            />
            <!-- 标题 -->
            <div class="title van-multi-ellipsis--l2">
              {{ item.CurriculumName }}
            </div>
            <!-- 描述 -->
            <div class="desc">
              <van-image
                :src="
                  item.HeadImg
                    ? item.HeadImg
                    : require('@/assets/images/doctor.png')
                "
                width="0.4rem"
                height="0.4rem"
                fit="cover"
                class="desc-img"
                round
              ></van-image>
              <span class="ellips">
                {{ item.TeacherName
                }}{{
                  item.AffiliatedHospital ? `,${item.AffiliatedHospital}` : ""
                }}
              </span>
            </div>
            <!-- 价格信息 -->
            <div class="priceInfo">
              <!-- 判断是否免费 -->
              <div
                v-if="!item.IsCharge"
                class="free"
              >
                <span>免费</span>
                <span></span>
              </div>
              <div
                v-else
                class="charge"
              >
                <span>{{ item.Price | getPrice }}元</span>
                <span>已{{ item.PurchasesSum + item.OrderSum }}人开通</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </van-list>
  </div>
</template>
<script>
export default {
  name: "WaterfallFlow",
  created() {
    document.addEventListener("scroll", this.scrollPage, false);
  },
  props: {
    // 视频列表
    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() {
      this.$emit("load");
    },
    handleClick(item) {
      // 点击事件
      this.$emit("click", item);
    }
  },
  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 {
    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: 4rem;
      object-fit: cover;

      &.height3 {
        height: 3rem;
      }
    }

    // 标题
    .title {
      width: 100%;
      padding: 0 0.2rem;
      font-size: 0.3rem;
      color: #333333;
    }

    // 描述
    .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;
      }
    }
  }
}
</style>
