<template>
  <van-pull-refresh v-model="_refreshing" @refresh="onRefresh" :disabled="pullRefreshDisabled" :style="{height: (height <= 0 ? 200 : height) + 'px', overflowY: 'scroll'}">
    <van-list
        v-model:loading="_loading"
        :finished="_finished"
        finished-text="没有更多了"
        @load="onLoad"
        :immediateCheck="immediateCheck"
    >
      <slot :dataList="_dataList">
      </slot>
      <slot :dataList="_dataList" name="diff">
      </slot>

    </van-list>
  </van-pull-refresh>
</template>

<script>
import { List } from 'vant';
import { PullRefresh } from 'vant';

export default {
  name: "List",

  components: {
    [List.name]: List,
    [PullRefresh.name]: PullRefresh
  },

  props: {

    // 每页查询数量
    height: {
      type: Number,
      default: 200
    },

    // 查询页码
    pageNum: {
      type: Number,
      default: 1
    },

    // 每页查询数量
    pageSize: {
      type: Number,
      default: 5
    },

    // 查询数据的方法函数
    getDataApi: {
      type: Function,
      default:""
    },

    loadLocal: {
      type: Boolean,
      default: false
    },

    // 结果集
    dataList: {
      type: Array,
      default: []
    },

    // 是否禁用下拉刷新
    pullRefreshDisabled: {
      type: Boolean,
      default: false
    },

    // 下拉刷新状态
    refreshing: {
      type: Boolean,
      default: false
    }, 

    // 上拉加载状态
    loading: {
      type: Boolean,
      default: false
    }, 

    // 全部加载完成状态
    finished: {
      type: Boolean,
      default: false
    }, 

    // 是否在初始化时立即执行滚动位置检查
    immediateCheck: {
      type: Boolean,
      default: true
    },

    // 额外查询参数
    queryParams: {
      type: Object,
      default: {}
    },


  },

  emits: [],

  setup() {},

  data() {
    return {
      total: 0, // 数据总条数
      // 单向数据流
      _pageNum: this.pageNum,
      _pageSize: this.pageSize,
      _dataList: this.dataList,
      _loading: this.loading,
      _refreshing: this.refreshing,
      _finished: this.finished,
    }
  },

  computed: {},

  watch: {
    queryParams: {
      handler(newVal, oldVal){
        console.log("发生变化了")
        // console.log(arguments)
        this.onRefresh();
      },
      deep: true
    }
  },

  created() {
  },

  mounted() {},

  unmounted() {},

  methods: {
    // 下拉列表刷新时
    onRefresh() {
      console.log('下拉刷新');
      // 重置数据, 开始刷新
      this._dataList = [];
      this._pageNum = 1;
      this._pageSize = 5;
      this._refreshing = false;
      this._finished = false;
      this._loading = true;

      // 加载数据
      this.onLoad();
    },

    // 列表拉到底部时,开始加载数据
    onLoad() {
      console.log('开始加载数据')
      if (this._finished) {
        this._loading = false;
        return;
      }
      
      // 查询参数
      let params = {
        pageNum: this._pageNum, // 第几页
        pageSize: this._pageSize, // 每页显示几条
      }

      // 拼接额外查询参数
      for (let _param in this.queryParams) {
        params[_param] = this.queryParams[_param];
      }

      // 查询数据
      if (typeof this.getDataApi == 'function' ) {
        
        this.getDataApi(params).then(res => {
          console.log(res)
          this.total = res.total;
          // 查询结果
          let result = res.rows;
          // 拼接数据
          this._dataList = this._dataList.concat(result);
          // 计算页码
          this.calculatePage(result.length);
        })
        
      } else {
        // throw new Error("请设置 TabList 组件的 getDataApi 默认值");
      }


    },

    // 计算页码
    calculatePage(dataLength) {
      // 加载完成---更新控件状态
      this._loading = false;
      this._refreshing = false;


      // 刚好查完所有的数据
      if (this._pageSize * this._pageNum == this.total) {
        this._finished = true; // 显示已经全部加载完了
      }
      // 表示还有数据可以查询
      else if (dataLength == this._pageSize) {
        this._pageNum++; // 当前页数加1,
      }
      // 表示已经查完数据了, 这是末尾零散的几条
      else if (dataLength > 0) {
        // this._pageNum++; // 当前页数加1,
        this._finished = true; // 显示已经全部加载完了
      }
      // 这次一条数据都没有查到
      else {
        this._finished = true; // 显示已经全部加载完了
      }
    },
  },
}
</script>

<style scoped>
:deep(.van-list__finished-text){
  font-size: 25px !important;
}
</style>