<script setup lang="ts">
import type { ExperimentItem } from '../types'
import { getExperimentList } from '../api'

const router = useRouter()
let list = $ref<ExperimentItem[]>([])
function fetchList() {
  getExperimentList().then(res => {
    list = res.data.list
  })
}
onMounted(() => {
  fetchList()
})
function handleChange(id: string, type: number) {
  if (type === 1) {
    router.push({ path: '/admin/lab/book', query: { experiment_id: id } })
  } else if (type === 2) {
    router.push({ path: '/admin/lab/video', query: { experiment_id: id } })
  } else if (type === 3) {
    router.push({ path: '/admin/lab/discuss', query: { experiment_id: id } })
  } else if (type === 4) {
    router.push({ path: '/admin/lab/score', query: { experiment_id: id } })
  }
}
</script>

<template>
  <div class="bg">
    <router-link to="/admin/lab/book" class="link1"></router-link>
    <router-link to="/admin/lab/score" class="link2"></router-link>
    <router-link to="/admin/lab/video" class="link3"></router-link>
    <router-link to="/admin/lab/discuss" class="link4"></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="实验视频" @change="handleChange($event, 2)">
      <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="实验答疑" @change="handleChange($event, 3)">
      <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="实验成绩" @change="handleChange($event, 4)">
      <el-option v-for="item in list" :key="item.id" :label="item.name" :value="item.id"></el-option>
    </el-select>
  </div>
</template>

<style lang="scss" scoped>
.bg {
  position: relative;
  margin: 20px auto;
  background: url(@/assets/images/home_teacher_bg.png) no-repeat center center;
  background-size: contain;
  width: 1308px;
  height: 642px;
  .link1 {
    position: absolute;
    bottom: 100px;
    width: 400px;
    height: 300px;
  }
  .link2 {
    position: absolute;
    left: 450px;
    bottom: 50px;
    width: 310px;
    height: 250px;
  }
  .link3 {
    position: absolute;
    top: 0;
    right: 80px;
    width: 400px;
    height: 300px;
  }
  .link4 {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 400px;
    height: 340px;
  }
}
.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>
