<script setup lang="ts">
import CourseView from './CourseView.vue'
import type { CourseListParamsType, CourseListItemType } from '../types'
import { getCourseList } from '../api'
import { useUserStore } from '@/stores/user'
import { useLog } from '@/composables/useLog'
import { useDevice } from '@/composables/useDevice'
const { mobile } = useDevice()
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.map((item: any) => {
      item.length = res.data.data?.length
      return item
    })
    const [first] = courseList
    // 进入第一个课程详情页
    if (first && route.path === '/course' && !mobile.value) {
      router.push({ path: '/course/view', query: { course_id: first.course_id, semester_id: first.semester_id } })
    }
  })
}
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" :class="route.path === '/course' ? 'is-list' : 'is-view'">
    <div class="course-right">
      <CourseView v-for="item in courseList" :data="item" :key="item.id"></CourseView>
    </div>
  </section>
</template>

<style lang="scss">
.course {
  display: flex;
  height: 100%;
  border-radius: 6px;
}
// 左侧
.course-left {
  width: 313px;
  flex: 0 0 354px;
  overflow-y: auto;
  box-sizing: border-box;
}
// 右侧
.course-right {
  flex: 1;
  border-radius: 10px;
  height: fit-content;
}
.is-h5 {
  .course-left {
    flex: 1;
  }
  .course-right {
    margin-left: 0;
    width: -webkit-fill-available;
  }
  .is-list {
    .course-right {
      display: none;
    }
  }
  .is-view {
    .course-left {
      display: none;
    }
  }
}
</style>
