<script setup lang="ts">
import type { CaseItem } from '../types'
import ViewExperiment from '../components/ViewExperiment.vue'
import { getCase } from '../api'

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

const detail = ref<CaseItem | null>(null)
const loading = ref(false)
function fetchInfo() {
  if (!props.id) return
  loading.value = true
  getCase({ id: props.id })
    .then((res) => {
      detail.value = res.data
    })
    .finally(() => {
      loading.value = false
    })
}
onMounted(() => {
  fetchInfo()
})
</script>

<template>
  <AppCard title="查看案例" :loading="loading">
    <template v-if="detail">
      <el-descriptions>
        <el-descriptions-item label="案例名称：">{{ detail.name }}</el-descriptions-item>
        <el-descriptions-item label="实验类型：">{{ detail.type_name }}</el-descriptions-item>
        <el-descriptions-item label="课时数：">{{ detail.times }}</el-descriptions-item>
        <el-descriptions-item label="有效状态：">{{ detail.status_name }}</el-descriptions-item>
        <el-descriptions-item label="创建人：">{{ detail.created_operator_name }}</el-descriptions-item>
        <el-descriptions-item label="创建时间：">{{ detail.created_time }}</el-descriptions-item>
      </el-descriptions>
    </template>
    <el-divider />
    <ViewExperiment :id="id" :experiments="detail?.experiments" @update="fetchInfo" />
  </AppCard>
</template>
