<script setup lang="ts">
import type { ContestItem } from '../types'
// import { ElMessage } from 'element-plus'
import { getContest } from '../api'

const FormDialog = defineAsyncComponent(() => import('../components/FormDialog.vue'))

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

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

// 获取赛项信息
function fetchInfo() {
  getContest({ id: props.id }).then(res => {
    detail = res.data.detail
  })
}

onMounted(() => {
  if (props.id === '1') return
  fetchInfo()
})
</script>

<template>
  <AppCard title="编辑赛项">
    <FormDialog :data="detail"></FormDialog>
  </AppCard>
</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>
