<script setup lang="ts">
import obj from '@/utils/obj'
import TaskBasicInfo from './task-basic-info.vue'
import { user_task_status_map } from '..'
import { useRoute } from 'vue-router'

defineOptions({ name: 'TaskDetail' })

const route = useRoute()
const id = route.query.id

const nav_basic = '0'
const nav_student = '1'
const navOptions = [
  {
    label: '基本信息',
    value: nav_basic,
  },
  {
    label: '学员进度',
    value: nav_student,
  },
]
const nav = ref(nav_basic)

const userTaskStatusOptions = [
  {
    label: '所有状态',
    value: '',
  },
  ...obj.map2options(user_task_status_map),
]
const status = ref('')
</script>

<template>
  <div class="task-detail">
    <div class="top">
      <div class="left">
        <BackBar leftText="任务详情" />
        <select-tab v-model="nav" :data-list="navOptions" type="small" />
      </div>
      <Select v-if="nav === nav_student" v-model="status" :selectList="userTaskStatusOptions" />
    </div>
    <task-basic-info v-show="nav === nav_basic" />
    <user-task-list v-if="nav === nav_student" :task-id="id" :status="status" />
  </div>
</template>

<style lang="scss" scoped>
.task-detail {
  @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;

    .left {
      display: flex;
      align-items: center;
      gap: 6vh;
    }
  }

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