<script setup lang="ts">
import type { ContestItem } from '../types'
import { ElMessage } from 'element-plus'
import { getContest, getContestRules, getContestExpertList } 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
})
// 比赛是否开始
const isStarted = $computed(() => {
  return dayjs().isAfter(dayjs((detail?.start_at || 0) * 1000))
})
// 获取赛项信息
function fetchInfo() {
  getContest({ id: props.id }).then(res => {
    detail = res.data.detail
  })
}
// 获取赛项规则
let ruleInfo = $ref<any>()
function fetchRule() {
  getContestRules({ competition_id: props.id }).then(res => {
    ruleInfo = res.data.detail
  })
}
// 获取评分专家
let experts = $ref<any>([])
// 专家组长
const expertLeaders = $computed(() => {
  return experts.filter((item: any) => {
    return item.info.role === '1'
  })
})
const expertLeadersText = $computed(() => {
  return expertLeaders.map((item: any) => item.name).join('、')
})
// 普通专家
const expertMembers = $computed(() => {
  return experts.filter((item: any) => {
    return item.info.role === '2'
  })
})
const expertMembersText = $computed(() => {
  return expertMembers.map((item: any) => item.name).join('、')
})
function fetchExperts() {
  getContestExpertList({ id: props.id }).then(res => {
    experts = res.data.detail
  })
}

onMounted(() => {
  fetchInfo()
  fetchRule()
  fetchExperts()
})

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

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

function handleExperts() {
  if (!ruleInfo) {
    ElMessage.error('请先维护评分规则')
    return
  }
  scoringExpertsVisible = true
}
</script>

<template>
  <AppCard title="查看赛项信息">
    <template #header-aside>
      <el-button type="primary" @click="scoringRulesVisible = true" v-permission="'competition-rule'"
        >评分规则</el-button
      >
      <el-button type="primary" @click="handleExperts" v-permission="'competition-bind-experts'">评分专家</el-button>
      <el-button type="primary" @click="contestantVisible = true" v-permission="'competition-competitor-list'"
        >参赛选手</el-button
      >
      <el-button type="primary" @click="scoringRulesBookVisible = true" v-permission="'competition-rubric-update'"
        >评分细则</el-button
      >
    </template>
    <div class="top" v-if="detail">
      <div class="top-cover">
        <p>赛项封面：</p>
        <img :src="detail.cover" />
      </div>
      <el-descriptions :column="2">
        <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="正式比赛日期：">{{ formatDate(detail.start_at) }}</el-descriptions-item>
        <el-descriptions-item label="生效状态：">{{ statusText }}</el-descriptions-item>
        <el-descriptions-item label="正式比赛时间："
          >{{ formatTime(detail.start_at) }} ~ {{ formatTime(detail.end_at) }}</el-descriptions-item
        >
        <el-descriptions-item label="专家组长：">{{ expertLeadersText }}</el-descriptions-item>
        <el-descriptions-item label="专家：">{{ expertMembersText }}</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"
    :disabled="isStarted"
    @update="fetchRule"
    v-if="scoringRulesVisible && detail"></ScoringRulesDialog>
  <!-- 评分专家 -->
  <ScoringExpertsDialog
    v-model="scoringExpertsVisible"
    :disabled="isStarted"
    @update="fetchExperts"
    v-if="scoringExpertsVisible && detail"></ScoringExpertsDialog>
  <!-- 参赛选手 -->
  <ContestantDialog
    v-model="contestantVisible"
    :disabled="isStarted"
    v-if="contestantVisible && detail"></ContestantDialog>
  <!-- 评分细则 -->
  <ScoringRulesBookDialog
    v-model="scoringRulesBookVisible"
    :disabled="isStarted"
    v-if="scoringRulesBookVisible && detail"></ScoringRulesBookDialog>
</template>

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