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

const router = useRouter()
let list = $ref<ContestType[]>([])
let leaderList = $ref<ContestType[]>([])
function fetchList() {
  getContestList().then(res => {
    list = res.data.competition
    leaderList = res.data.competition_leader
  })
}
onMounted(() => {
  fetchList()
})
function handleChange(id: string, type: number) {
  if (type === 1) {
    router.push({ path: '/admin/contest/check', query: { competition_id: id } })
  } else if (type === 2) {
    router.push({ path: '/admin/contest/score', query: { competition_id: id } })
  } else if (type === 3) {
    router.push({ path: '/admin/contest/analyze/score', query: { competition_id: id } })
  }
}
</script>

<template>
  <div class="bg">
    <router-link to="/admin/contest/score" class="link1"></router-link>
    <router-link to="/admin/contest/check" class="link2"></router-link>
    <router-link to="/admin/contest/discuss" class="link3"></router-link>
    <router-link to="/admin/contest/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 leaderList" :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> -->
  </div>
</template>

<style lang="scss" scoped>
.bg {
  position: relative;
  margin: 20px auto;
  background: url(@/assets/images/home_expert_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>
