<template>
  <el-dialog 
    title="查看详情" 
    v-model="visible" 
    :close-on-click-modal="false" 
    draggable
    width="800px">
    <div v-loading="loading" class="detail-container" v-if="detailData">
      <el-descriptions :column="2" border>
        <el-descriptions-item label="活动主题" :span="2">
          {{ detailData.activityTheme || '-' }}
        </el-descriptions-item>
        <el-descriptions-item label="活动说明" :span="2">
          {{ detailData.remarks || '-' }}
        </el-descriptions-item>
        <el-descriptions-item label="活动兼报数">
          {{ detailData.maxSub !== undefined && detailData.maxSub !== null ? detailData.maxSub : '-' }}
        </el-descriptions-item>
        <el-descriptions-item label="开始时间">
          {{ parseTime(detailData.startTime, '{y}-{m}-{d}') }}
        </el-descriptions-item>
        <el-descriptions-item label="结束时间">
          {{ parseTime(detailData.endTime, '{y}-{m}-{d}') }}
        </el-descriptions-item>
      </el-descriptions>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="visible = false">关 闭</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup lang="ts" name="ActivityInfoDetailDialog">
import { ref } from 'vue'
import { getDetail } from '/@/api/stuwork/activityinfo'
import { parseTime } from '/@/utils/formatTime'
import { useMessage } from '/@/hooks/message'

// 定义变量内容
const visible = ref(false)
const loading = ref(false)
const detailData = ref<any>({})

// 打开弹窗
const openDialog = async (id: string) => {
  visible.value = true
  loading.value = true
  detailData.value = {}
  
  try {
    const res = await getDetail(id)
    if (res.data) {
      // 根据接口文档，返回的数据可能是 { records: [...], total: ... } 格式
      // 如果是列表格式，取第一条；如果是对象，直接使用
      if (res.data.records && Array.isArray(res.data.records) && res.data.records.length > 0) {
        detailData.value = res.data.records[0]
      } else if (res.data.records && Array.isArray(res.data.records)) {
        // 列表为空
        useMessage().warning('未找到详情数据')
        visible.value = false
      } else {
        // 直接是对象
        detailData.value = res.data
      }
    }
  } catch (err: any) {
    useMessage().error(err.msg || '获取详情失败')
    visible.value = false
  } finally {
    loading.value = false
  }
}

// 暴露方法
defineExpose({
  openDialog
})
</script>

<style scoped lang="scss">
.detail-container {
  padding: 20px 0;
}
</style>

