<script setup lang="ts">
import { provide, ref } from 'vue'
import { BasicTask } from './components/BasicTask'
import { NoviceTask } from './components/NoviceTask'
import { DailyTask } from './components/DailyTask'
import { OtherTask } from './components/OtherTask'

import { AppContainerBox } from '@/components/AppContainerBox'
import { AppSubMenuTitle } from '@/components/AppSubMenuTitle'
import { AppTaskMenuList } from '@/components/AppTaskMenuList'

const taskContainer = ref(null)
const task1 = ref(null)
const task2 = ref(null)
const task3 = ref(null)
const task4 = ref(null)
const sectionRefs = { task1, task2, task3, task4 }
provide('sectionRefs', sectionRefs)
provide('taskContainer', taskContainer)
</script>

<template>
  <AppContainerBox>
    <template #subMenu>
      <AppSubMenuTitle title="任务中心"></AppSubMenuTitle>
      <AppTaskMenuList></AppTaskMenuList>
    </template>
    <template #content>
      <div ref="taskContainer" class="w-full h-full overflow-auto">
        <BasicTask ref="task1" />
        <NoviceTask ref="task2" />
        <DailyTask ref="task3" />
        <OtherTask ref="task4" />
      </div>
    </template>
  </AppContainerBox>
</template>

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