<template>
  <scroll-view
    :class="customClass"
    :style="{
      //#ifdef APP-PLUS || MP-WEIXIN
      height: !isSticky ? 'calc(100vh - 0px)' : 'calc(100vh - 44px)',
      //#endif
      //#ifdef H5
      height: !isSticky ? 'calc(100vh - 44px)' : 'calc(100vh - 88px)',
      //#endif
      ...customStyle,
    }"
    :scroll-y="true"
    scroll-with-animation
    :refresher-threshold="refresherThreshold"
    :refresher-default-style="refresherDefaultStyle"
    :refresherEnabled="refresherEnabled"
    :refresher-triggered="triggered"
    :refresher-background="refresherBackground"
    :scroll-top="scrollTop"
    :scroll-into-view="scrollIntoView"
    @refresherrefresh="onRefresh"
    @scrolltolower="scrolltolower"
  >
    <slot name="topLoading" v-if="refresherDefaultStyle === 'none'">
      <view
        class="topBox"
        :style="{
          marginTop: '-' + refresherThreshold + 'px',
          height: refresherThreshold + 'px',
        }"
      >
        <view class="loader">
          <view v-for="(v, i) in 10" :key="v" :style="{ transform: 'rotate(' + i * 36 + 'deg)', animationDelay: v == 10 ? 1 + 's' : '0.' + v + 's' }"> </view>
        </view>
        <view class="title">
          {{ topTis }}
        </view>
      </view>
    </slot>
    <slot name="default"> </slot>
    <slot name="bottomLoading">
      <div class="bottoBox" :style="`margin-top:20px;padding-bottom:${lowerThreshold + 'px'}`">
        <span v-show="total != 0 && refresherLoad && refresherLoadTitle">
          {{ pageSize >= total ? "没有更多啦~" : isScrolltolower }}
        </span>
        <span v-show="total == 0 && refresherEnabled && refresherEnabledTitle && !triggered">
          <image style="width: 160px; height: 160px" src="@/static/images/data.png"></image>
          <view>暂无数据</view>
        </span>
      </div>
    </slot>
  </scroll-view>
</template>
<script setup>
import { onReady, onLoad, onShow, onNavigationBarButtonTap, onPullDownRefresh, onReachBottom } from "@dcloudio/uni-app";
import { ref, onMounted, inject, shallowRef, reactive, getCurrentInstance, watchEffect, toRefs, toRef, watch } from "vue";

const emit = defineEmits(["load", "refresh"]);
const props = defineProps({
  //当前页数量
  pageSize: {
    type: Number,
    default: 30,
  },
  //数据总数
  total: {
    type: Number,
    default: 0,
  },
  //设置滚动条位置
  scrollTop: {
    type: String,
    default: "",
  },
  //设置外部class
  customClass: {
    type: String,
    default: "",
  },
  //设置外部style
  customStyle: {
    type: [String, Object],
    default: {},
  },
  //是否开启吸顶高度自适应
  isSticky: {
    type: Boolean,
    default: false,
  },
  //是否开启上拉加载
  refresherLoad: {
    type: Boolean,
    default: false,
  },
  //是否显示上拉加载文字
  refresherLoadTitle: {
    type: Boolean,
    default: true,
  },
  //距离底部上拉加载距离
  lowerThreshold: {
    type: Number,
    default: 0,
  },
  //是否开启下拉刷新
  refresherEnabled: {
    type: Boolean,
    default: false,
  },
  //是否显示下拉刷新文字
  refresherEnabledTitle: {
    type: Boolean,
    default: true,
  },
  //距离顶部下拉刷新距离
  refresherThreshold: {
    type: Number,
    default: 45,
  },
  //是否使用默认下拉刷新样式（支持设置 black、white、none/none 表示不使用默认样式）
  refresherDefaultStyle: {
    type: String,
    default: "black",
  },
  //设置自定义下拉刷新区域背景颜色
  refresherBackground: {
    type: String,
    default: "#fff",
  },
  //是否滚动到指定id的位置
  scrollIntoView: {
    type: String,
    default: "",
  },
});

const { pageSize, total, scrollTop, customClass, customStyle, refresherLoad, lowerThreshold, refresherEnabled, refresherEnabledTitle, refresherThreshold, refresherDefaultStyle, refresherBackground } =
  toRefs(props);

const defaultArray = reactive({
  triggered: false,
  topTis: "松手刷新",
  isScrolltolower: "上拉加载更多",
});

const { triggered, topTis, isScrolltolower } = toRefs(defaultArray);

/**
 * @scrollView上拉刷新
 */
function onRefresh() {
  isScrolltolower.value = "上拉加载更多";
  topTis.value = "努力加载中";
  //做一个判断，判断triggered 是否为true
  if (!triggered.value) {
    triggered.value = true;
    setTimeout((e) => {
      triggered.value = false;
      topTis.value = "松手刷新";
      emit("refresh");
    }, 1000);
  }
}

/**
 * @scrollView触底事件
 */
function scrolltolower(e) {
  if (!refresherLoad.value || pageSize.value >= total.value) {
    return;
  } else {
    isScrolltolower.value = "正在加载中~";
    setTimeout(() => {
      emit("load");
      isScrolltolower.value = "上拉加载更多";
    }, 1000);
  }
}

onLoad((option) => {});
</script>

<style scoped>
.topBox {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: gray;
}

.topBox .loader {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  position: relative;
  margin-top: -25rpx;
}

.topBox .loader view {
  width: 2px;
  height: 6px;
  background-color: gray;
  transform-origin: 50% 150%;
  position: absolute;
  animation: color-change 1s infinite;
}

.topBox .title {
  position: relative;
  margin-left: 35rpx;
  color: #c0c4cc;
  font-size: 14px;
}

@keyframes color-change {
  from {
    background-color: gray;
  }

  to {
    background-color: white;
  }
}

.bottoBox {
  display: flex;
  align-items: center;
  text-align: center;
  justify-content: center;
  color: #c0c4cc;
  font-size: 14px;
}
</style>
