<template>
  <el-tabs @tab-change="handChange">
    <el-tab-pane :label="item.title" v-for="(item, i) in labelList" :key="i">
      <slot name="content" />
    </el-tab-pane>
  </el-tabs>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
import { videoStockEpisodeList } from '@/api/video/index'
const labelList = ref([])
const videoChoose = ref([])
const changeForm = ref({ page: 1, limit: 5 })
const props = defineProps({
  meta: Object,
});
const emits = defineEmits(['change']);
if (props.meta) {
  console.log(props.meta, 'metameta');
}
const initLabelList = () => {
  const pageSize = props.meta.limit;
  const total = props.meta.total;
  const pageCount = Math.ceil(total / pageSize);
  for (let i = 0; i < pageCount; i++) {
    const start = i * pageSize + 1;
    const end = i === pageCount - 1 ? total : (i + 1) * pageSize;
    let label;
    if (i === pageCount - 1) {
      if (start === total) {
        label = `${total}`
      } else {
        label = `${start}-${total}`
      }
    } else {
      label = `${start}-${end}`
    }
    labelList.value[i] = { title: label, page: pageCount }
    console.log(labelList.value, 'test.value');
  }

}


const handChange = (e) => {
  console.log(e, 'handChange');
  changeForm.value.page = Number(e) + 1;
  emits('change', changeForm.value)
}

onMounted(() => {
  initLabelList()
})
</script>


<style lang="scss" scoped></style>
