<script setup lang="ts">
import type { ContestItem } from '../types'
import { getContest } from '../api'
import { useMapStore } from '@/stores/map'
import dayjs from 'dayjs'

const ViewBook = defineAsyncComponent(() => import('../components/ViewBook.vue'))
const ViewVideo = defineAsyncComponent(() => import('../components/ViewVideo.vue'))
const ScoringRulesDialog = defineAsyncComponent(() => import('../components/ScoringRulesDialog.vue'))
const ScoringExpertsDialog = defineAsyncComponent(() => import('../components/ScoringExpertsDialog.vue'))
const ContestantDialog = defineAsyncComponent(() => import('../components/ContestantDialog.vue'))
const ScoringRulesBookDialog = defineAsyncComponent(() => import('../components/ScoringRulesBookDialog.vue'))

interface Props {
  id: string
}
const props = defineProps<Props>()

// 赛项类型
const types = useMapStore().getMapValuesByKey('competition_type')
// 数据状态
const status = useMapStore().getMapValuesByKey('system_status')

let detail = $ref<ContestItem | null>(null)
provide('detail', $$(detail))

// 赛项类型
const typeText = $computed(() => {
  return types.find(item => item.value == detail?.type)?.label
})
// 承办单位
const orgText = $computed(() => {
  return detail?.organizers.map(item => item.label).join('、')
})
// 指导教师
const teacherText = $computed(() => {
  return detail?.teachers.map(item => item.name).join('、')
})
// 生效状态
const statusText = $computed(() => {
  return status.find(item => item.value == detail?.status)?.label
})

function fetchInfo() {
  getContest({ id: props.id }).then(res => {
    detail = res.data.detail
  })
}
onMounted(fetchInfo)

function formatDate(timestamp: number): string {
  return dayjs(timestamp * 1000).format('YYYY-MM-DD')
}

function formatDateTime(timestamp: number): string {
  return dayjs(timestamp * 1000).format('YYYY-MM-DD HH:mm:ss')
}
// 评分规则
const scoringRulesVisible = $ref(false)
// 评分专家
const scoringExpertsVisible = $ref(false)
// 参赛选手
const contestantVisible = $ref(false)
// 评分细则
const scoringRulesBookVisible = $ref(false)
</script>

<template>
  <AppCard title="查看赛项信息">
    <template #header-aside>
      <el-button type="primary" @click="scoringRulesVisible = true">评分规则</el-button>
      <el-button type="primary" @click="scoringExpertsVisible = true">评分专家</el-button>
      <el-button type="primary" @click="contestantVisible = true">参赛选手</el-button>
      <el-button type="primary" @click="scoringRulesBookVisible = true">评分细则</el-button>
    </template>
    <div class="top" v-if="detail">
      <div class="top-cover">
        <p>赛项封面：</p>
        <img :src="detail.cover" />
      </div>
      <el-descriptions class="descriptions-box">
        <el-descriptions-item label="赛项名称：">{{ detail.name }}</el-descriptions-item>
        <el-descriptions-item label="赛项类型：">{{ typeText }}</el-descriptions-item>
        <el-descriptions-item label="主办单位：">{{ detail.host_unit.label }}</el-descriptions-item>
        <el-descriptions-item label="指导教师：">{{ teacherText }}</el-descriptions-item>
        <el-descriptions-item label="承办单位：">{{ orgText }}</el-descriptions-item>
        <el-descriptions-item label="赛项周期："
          >{{ formatDate(detail.start_range) }} ~ {{ formatDate(detail.end_range) }}</el-descriptions-item
        >
        <el-descriptions-item label="技术支持单位：">{{ detail.technical_support_unit.label }}</el-descriptions-item>
        <el-descriptions-item label="正式比赛日期："
          >{{ formatDateTime(detail.start_at) }} ~ {{ formatDateTime(detail.end_at) }}</el-descriptions-item
        >
        <el-descriptions-item label="生效状态：">{{ statusText }}</el-descriptions-item>
      </el-descriptions>
    </div>
  </AppCard>
  <AppCard title="训练指导书">
    <ViewBook :id="id"></ViewBook>
  </AppCard>
  <AppCard title="操作视频">
    <ViewVideo :id="id"></ViewVideo>
  </AppCard>
  <!-- 评分规则 -->
  <ScoringRulesDialog v-model="scoringRulesVisible" v-if="scoringRulesVisible && detail"></ScoringRulesDialog>
  <!-- 评分专家 -->
  <ScoringExpertsDialog v-model="scoringExpertsVisible" v-if="scoringExpertsVisible && detail"></ScoringExpertsDialog>
  <!-- 参赛选手 -->
  <ContestantDialog v-model="contestantVisible" v-if="contestantVisible && detail"></ContestantDialog>
  <!-- 评分细则 -->
  <ScoringRulesBookDialog
    v-model="scoringRulesBookVisible"
    v-if="scoringRulesBookVisible && detail"
  ></ScoringRulesBookDialog>
</template>

<style lang="scss">
.top {
  display: flex;
  .el-descriptions {
    flex: 1;
    margin-top: 30px;
  }
}
.top-cover {
  width: 200px;
  margin-right: 20px;
  p {
    font-weight: normal;
    line-height: 30px;
    font-size: 14px;
  }
  img {
    width: 100%;
  }
}
</style>
