<script setup lang="ts">
import CourseListSearch from '../components/CourseListSearch.vue'
import CourseListItem from '../components/CourseListItem.vue'
import type { CourseListParamsTypes, CourseListItemTypes } from '../types'
import { getCourseList } from '../api'

// 列表参数
const listParams = reactive<CourseListParamsTypes>({ id: '', semester_ids: [], elective_types: [] })
let courseList = $ref<CourseListItemTypes[]>([])
// 获取课程列表
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
  })
}
// 筛选
function handleSearch(params: CourseListParamsTypes) {
  Object.assign(listParams, params)
  fetchList()
}
onMounted(() => {
  fetchList()
})
</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>
