<script setup lang="ts">
import CourseListSearch from '../components/CourseListSearch.vue'
import CourseListItem from '../components/CourseListItem.vue'
import type { CourseListParamsType, CourseListItemType } from '../types'
import { getCourseList } from '../api'
import { useUserStore } from '@/stores/user'
import { useLog } from '@/composables/useLog'
const log = useLog()
const userStore = useUserStore()

const router = useRouter()
const route = useRoute()
// 列表参数
const listParams = reactive<CourseListParamsType>({ id: '', semester_ids: [], elective_types: [] })
let courseList = $ref<CourseListItemType[]>([])
// 获取课程列表
function fetchList() {
  const params = Object.assign({}, listParams, {
    semester_ids: listParams.semester_ids?.length ? JSON.stringify(listParams.semester_ids) : '',
    elective_types: listParams.elective_types?.length ? JSON.stringify(listParams.elective_types) : ''
  })
  getCourseList(params).then(res => {
    courseList = res.data.data
    const [first] = courseList
    // 进入第一个课程详情页
    if (first && route.path === '/course') {
      router.push({ path: '/course/view', query: { course_id: first.course_id, semester_id: first.semester_id } })
    }
  })
}
// 筛选
function handleSearch(params: CourseListParamsType) {
  Object.assign(listParams, params)
  fetchList()
}
onMounted(() => {
  fetchList()
})
log.upload({
  event: 'login_event',
  action: 'login_count_action',
  data: { sso_id: userStore.user?.id, project_prefix: 'resourse_ci' }
})
</script>

<template>
  <section class="course">
    <div class="course-left">
      <CourseListSearch @change="handleSearch"></CourseListSearch>
      <div class="course-list">
        <CourseListItem v-for="item in courseList" :data="item" :key="item.id" @change="fetchList"></CourseListItem>
      </div>
    </div>
    <div class="course-right"><router-view :key="$route.fullPath"></router-view></div>
  </section>
</template>

<style lang="scss">
.course {
  display: flex;
  height: 100%;
  background-color: #fff;
  border-radius: 6px;
}
// 左侧
.course-left {
  padding: 18px;
  width: 354px;
  flex: 0 0 354px;
  overflow-y: auto;
  border-right: 1px solid #e6e6e6;
  box-sizing: border-box;
}
// 右侧
.course-right {
  flex: 1;
}
</style>
