<template>
  <ie-page bg-color="#FFFFFF" :fix-height="true">
    <ie-navbar title="学习记录" />
    <view class="bg-white" :style="{ top: baseStickyTop + 'px' }">
      <uv-tabs :list="list" :current="current" :activeStyle="activeStyle" :inactiveStyle="inactiveStyle"
        :scrollable="false" @change="handleTabChange"></uv-tabs>
    </view>
    <view class="h-20 bg-[#F6F8FA]"></view>
    <scroll-view class="flex-1 min-h-1 box-border" scroll-y>
      <knowledge-history v-if="current === 0" />
      <exam-history v-if="current === 1" />
      <practice-history v-if="current === 2" />
      <video-history v-if="current === 3" />
    </scroll-view>
  </ie-page>
</template>

<script lang="ts" setup>
import { useNavbar } from '@/hooks/useNavbar';
import knowledgeHistory from './components/knowledge-history.vue'
import examHistory from './components/exam-history.vue'
import practiceHistory from './components/practice-history.vue'
import videoHistory from './components/video-history.vue'
const { baseStickyTop } = useNavbar();
const current = ref(0);
const list = [
  { name: '知识点记录', },
  { name: '试卷记录', },
  { name: '刷题总量', },
  { name: '视频总数', }
]
const activeStyle = {
  fontWeight: 'bold',
  color: '#31A0FC'
}
const inactiveStyle = {
  color: '#999999'
}
const handleTabChange = (e: any) => {
  current.value = e.index;
}
onShow(() => { });
</script>

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