<template>
  <van-tabs v-model:active="tabs.active" ref="vanTabs" :style="{height: height + 'px', overflow: 'hidden'}">
<!--  <van-tabs v-model:active="tabs.active">-->
    <van-tab v-for="tab in tabs.tabList" :title="tab.title">
        <list
            :height="listHeight"
            :page-num="tab.list.pageNum"
            :page-size="tab.list.pageSize"
            :get-data-api="tab.list.getDataApi"
            :load-local="tab.list.loadLocal"
            :data-list="tab.list.dataList"
            :pull-refresh-disabled="tab.list.pullRefreshDisabled"
            :refreshing="tab.list.refreshing"
            :loading="tab.list.loading"
            :finished="tab.list.finished"
            :immediate-check="tab.list.immediateCheck"
        >
          <!-- 下面两个template写法看不懂的话，请去vue官网查看 ( solt 插槽 ) 文档 -->

          <!--  差异性插槽，支持每个tab分别显示不同的界面      -->
          <template #diff="{dataList}" v-for="_index in (tabs.active + 1)">
            <slot :name="'tab' + _index" v-if="_index == (tabs.active + 1)" :dataList="dataList" :info="tab"></slot>
          </template>

          <!-- 通用插槽 全部tab使用同一个界面       -->
          <template #default="{dataList}">
            <slot :dataList="dataList" :info="tab"></slot>
          </template>

        </list>

    </van-tab>
  </van-tabs>
</template>

<script>

import List from 'src/components/list/List.vue'

export default {
  name: "TabList",

  components: {
    List
  },

  props: {
    tabs: {
      type: Object,
      required: true,
      default: {
        active: 0, // 当前tab停留哪一页
        tabList: [  // 每一页的tab配置
          {
            title: 'tab_1',  // tab标题
            list: { // tab内list相关配置
              pageNum: 1, // 查询页码
              pageSize: 5, // 每页查询数量
              getDataApi: ()=>{throw new Error('请设置 TabList 组件的 getDataApi 默认值')}, // 查询数据的方法函数
              dataList: [], // 结果集
              pullRefreshDisabled: false, // 是否禁用下拉刷新
              refreshing: false, // 下拉刷新状态
              loading: false, // 上拉加载状态
              finished: false, // 全部加载完成状态
              immediateCheck: true, // List 初始化后会触发一次 load 事件，用于加载第一屏的数据，
            }
          },
        ]
      }
    },

    // 组件高度
    height: {
      type: Number,
      required: true,
      default: 200
    },
  },

  emits: [],

  setup() {},

  data() {
    return {
    }
  },

  computed: {
    listHeight(){
      return this.height - 44;
    }
  },

  watch: {
    height(newVal, oldVal){
      // console.log('高度发生变化了')
      // console.log(newVal, oldVal)
    }
  },

  created() {},

  mounted() {
  },

  unmounted() {},

  methods: {
  },
}
</script>