<template>
  <mescroll-vue
    class="home-scroll"
    @init="mescrollInit"
    :down="downOptions"
    :up="upOptions"
  >
    <div class="home-scroll-content">
      <div class="drown-con">{{ downText }}</div>
      <slot />
    </div>
  </mescroll-vue>
</template>

<script>
import { MescrollMixin } from "@/mixins";
export default {
  mixins: [MescrollMixin],
  data() {
    return {
      downOptions: {
        autoShowLoading: false,
        auto: true,
        callback: this.downCallback,
        inOffset: this.inOffSet,
        outOffset: this.outOffSet,
        showLoading: this.showLoading,
        afterLoading: this.afterLoading,
        onMoving: this.onMoving,
      },
      upOptions: {
        auto: false,
        callback: this.upCallback,
        onScroll: this.onScroll,
      },
      downHight: 0,
      downState: "", //1: inOffset， 2: outOffset， 3: showLoading， 4: afterLoading
    };
  },
  computed: {
    downShow() {
      return this.downHight > 10;
    },
    downText() {
      if (!this.downShow) {
        return "";
      }
      switch (this.downState) {
        case 1:
          return "下拉更新";
        case 2:
          return "松手更新";
        case 3:
          return "更新中...";
        case 4:
          return "更新中...";
        default:
          return "下拉更新";
      }
    },
  },
  mounted() {
    this.downHeightObserver();
  },
  methods: {
    downHeightObserver() {
      let el = document.getElementsByClassName("mescroll-downwarp")[0];
      let obs = new ResizeObserver((entries) => {
        let downHight = entries[0].contentRect.height;
        this.downHight = entries[0].contentRect.height;
        this.$emit("onMoving", downHight);
      });
      obs.observe(el);
    },
    downCallback() {
      this.mescroll.resetUpScroll();
      this.$emit("down");
    },
    upCallback(page) {
      this.$emit("up", this.mescroll, page);
    },

    inOffSet(mescroll) {
      this.downState = 1;
    },
    outOffSet(mescroll) {
      this.downState = 2;
    },
    showLoading(mescroll) {
      this.downState = 3;
    },
    afterLoading(mescroll) {
      this.downState = 4;
      setTimeout(() => {
        this.downHight = 0;
        this.$emit("onMoving", 0);
      }, 200);
      return 0;
    },
    onMoving(mescroll, rate, downHight) {},
    onScroll(mescroll, y, isUp) {
      this.$emit("onScroll", y);
    },
  },
};
</script>

<style lang="less">
.home-scroll {
  .mescroll-downwarp {
    // background: @mall-primary-color;
    .downwarp-content {
      display: none;
    }
    .downwarp-tip {
      color: #ffffff;
    }
    .downwarp-progress {
      border-color: #ffffff;
    }
  }
  .home-scroll-content {
    // background: url("~@/assets/img/home-bg.png") no-repeat;
    background-position: center -32px;
    background-size: contain;
    padding-top: 100px;
    position: relative;
    > .drown-con {
      position: absolute;
      top: 75px;
      width: 100%;
      color: #ffffff;
      font-size: 14px;
      text-align: center;
    }
  }
  .mescroll-upwarp{
    background: #f5f7fb;
  }
}
</style>
