<template>
  <scroll-view
    class="table-list"
    scroll-y
    :style="{ '--height': height }"
    @scrolltolower="addNext"
    @refresherrefresh="openRefresh"
    :refresher-enabled="refresh"
    :refresher-triggered="vdata.isRefresh"
  >
    <template v-for="(record, i) in vdata.allData" :key="i">
      <slot name="tableBody" :record="record" :index="i" />
    </template>
     <view class="list-null" v-if="!vdata.apiResData.hasNext && showListNull">暂无更多数据</view>
  </scroll-view>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { onPullDownRefresh, onReachBottom } from '@dcloudio/uni-app'

// 定义传入属性
const props = defineProps({
  reqTableDataFunc: { type: Function, default: () => {} },
  searchData: { type: Object, default: () => {} }, // 搜索条件参数
  pageSize: { type: Number, default: 10 }, // 默认每页条数
  initData: { type: Boolean, default: true }, // 初始化列表数据， 默认true
  showListNull: { type: Boolean, default: true }, //是否显示缺省 默认显示
  height: { type: String, default: '88rpx' }, // 高度 这里的高度 为 外部使用高度  scroll-view  高度 为 100vh - 传入高度
  refresh: { type: Boolean, default: false }, //是否开启下拉刷新 默认不开启
})

const vdata = reactive({
  allData: [], // app与web不同， app是每次查询到数据会拼接到后面

  // 接口返回的数据
  apiResData: { total: 0, records: [] },

  // 分页参数
  iPage: { pageNumber: 1, pageSize: props.pageSize },

  // 下拉刷新开启状态
  isRefresh: false,
})

onMounted(() => {
  //初始化表数据
  props.initData ? refTable(true) : undefined
})

// 查询表格数据
function refTable(isToFirst = false) {
  if (isToFirst) {
    // 重新搜索， 第一页。
    vdata.iPage.pageNumber = 1
    vdata.allData = [] //清空数据
  }

  // 更新检索数据
  return props.reqTableDataFunc(Object.assign({}, vdata.iPage, props.searchData)).then(({ bizData }) => {
    Object.assign(vdata.apiResData, bizData) // 列表数据更新

    if (bizData.records) {
      bizData.records.forEach((r) => vdata.allData.push(r))
    }
  })
}

/** 追加下一页数据 **/
function addNext() {
  // console.log('加载下一页')
  // 包含下一页
  if (vdata.apiResData.hasNext) {
    vdata.iPage.pageNumber++
    refTable(false)
  }
}

// 下拉刷新
const openRefresh = () => {
  vdata.isRefresh = true
  refTable(true).then(() => {
    setTimeout(() => {
      vdata.isRefresh = false
    }, 300)
  })
}

// 将表格事件暴露出去  https://www.jianshu.com/p/39d14c25c987
defineExpose({ refTable, addNext })
</script>

<style lang="scss" scoped>
.table-list {
  height: calc(75vh - var(--height));
}
.list-null {
  position: relative;

  line-height: 110rpx;
  text-align: center;
  font-size: 26rpx;
  color: #a6a6a6;
  &::after,
  &::before {
    content: '';
    display: block;
    position: absolute;
    top: 50%;

    width: 30%;
    height: 2rpx;
    background-color: #ededed;
    transform: translateY(-50%);
  }
  &::after {
    left: 40rpx;
  }
  &::before {
    right: 40rpx;
  }
}
</style>
