<route lang="json5" type="page">
{
  layout: 'default',
  style: {
    navigationStyle: 'custom'
  }
}
</route>

<template>
  <view class="h-[calc(100vh-50px)] overflow-y-auto">
    <view v-for="(item, index) in pages" :key="index" v-show="curIndex == index">
      <component :is="item"></component>
    </view>
  </view>
  <CustomTabBar :list="list" :default-index="0" @change="change"></CustomTabBar>
</template>

<script lang="ts" setup>
  import AttendanceClockIn from '../attendance-clockIn/attendance-clockIn.vue'
  import AttendanceSet from '../attendance-set/attendance-set.vue'
  import AttendanceStatistics from '../attendance-statistics/attendance-statistics.vue'
  const pages = [AttendanceClockIn, AttendanceStatistics, AttendanceSet]
  const list = ref<Array<TabBarItem>>([
    {
      title: '打卡',
      icon: 'home'
    },
    {
      title: '统计',
      icon: 'notification'
    },
    {
      title: '设置',
      icon: 'setting'
    }
  ])
  const curIndex = ref(0)
  const change = (data: { value: number }) => {
    curIndex.value = data.value
  }
</script>

<style lang="scss" scoped>
  page {
    background-color: #f6f8fc;
  }
</style>
