<script setup lang="ts">
import { user_task_status_map } from '@/page/student-mgr/set-task'
import obj from '@/utils/obj'
import { useRoute } from 'vue-router'

defineOptions({ name: 'UserTaskRecords' })
const userTaskStatusOptions = [
  {
    label: '所有状态',
    value: '',
  },
  ...obj.map2options(user_task_status_map),
]
const status = ref('')

// 请求参数
const route = useRoute()
const { userId, userName } = route.query

// 标题
const title = computed(() => (userName ? `【${userName}】导学任务记录` : '导学任务记录'))
</script>

<template>
  <div class="user-task-records">
    <div class="top">
      <BackBar :leftText="title" />
      <Select v-model="status" :selectList="userTaskStatusOptions" />
    </div>
    <user-task-list :userId="userId" :status="status" />
  </div>
</template>

<style lang="scss" scoped>
.user-task-records {
  @include main_bg;
  height: 100%;
  padding: $space-4_h $space-6;
  display: flex;
  flex-direction: column;

  .top {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .user-task-list {
    flex: 1;
    margin-top: 2vh;
  }
}
</style>
