<script setup lang="ts">
import type { CourseType, ContestType } from '../types'
import { getCourseList, getMyContestList } from '../api'

const router = useRouter()
let list = $ref<CourseType[]>([])
function fetchList() {
  getCourseList().then(res => {
    list = res.data.list
  })
}
let contestList = $ref<ContestType[]>([])
function fetchContestList() {
  getMyContestList().then(res => {
    contestList = res.data.list
  })
}
onMounted(() => {
  fetchList()
  fetchContestList()
})
function handleChange(id: string, type: number) {
  if (type === 1) {
    router.push({ path: '/student/lab', query: { course_id: id } })
  }
}
function handleContestChange(data: ContestType) {
  router.push({ path: `/student/contest/lab/${data.id}`, query: { name: data.name } })
}
</script>

<template>
  <div class="bg">
    <router-link to="/student/lab" class="link1"></router-link>
    <router-link to="/student/contest/score" class="link2"></router-link>
    <router-link to="/student/contest" class="link3"></router-link>
  </div>
  <div class="select-group">
    <el-select size="large" placeholder="我的实验课程" @change="handleChange($event, 1)">
      <el-option v-for="item in list" :key="item.id" :label="item.name" :value="item.id"></el-option>
    </el-select>
    <el-select size="large" placeholder="我的大赛项目" value-key="id" @change="handleContestChange">
      <el-option v-for="item in contestList" :key="item.id" :label="item.name" :value="item"></el-option>
    </el-select>
  </div>
</template>

<style lang="scss" scoped>
.system-dml {
  .bg {
    background: url(@/assets/images/dml_home_student_bg.png) no-repeat center center;
    background-size: contain;
  }
}
.bg {
  position: relative;
  margin: 20px auto;
  background: url(@/assets/images/home_student_bg.png) no-repeat center center;
  background-size: contain;
  width: 1215px;
  height: 577px;
  .link1 {
    position: absolute;
    top: 160px;
    width: 250px;
    height: 250px;
  }
  .link2 {
    position: absolute;
    left: 400px;
    bottom: 0;
    width: 300px;
    height: 250px;
  }
  .link3 {
    position: absolute;
    top: 200px;
    right: 0;
    width: 300px;
    height: 300px;
  }
}
.select-group {
  position: fixed;
  bottom: 40px;
  .el-select {
    width: 144px;
    :deep(.el-input__wrapper) {
      box-shadow: none;
    }
  }
  .el-select + .el-select {
    margin-left: 20px;
  }
}
</style>
