<script setup lang="ts">
import { ElMessage } from 'element-plus'
import { updateCase, getCase } from '../api'
import Form from '../components/Form.vue'
import type { CaseItem, CaseFormData } from '../types'

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

const router = useRouter()
const handleSubmit = async (data: CaseFormData) => {
  await updateCase({ ...data, id: props.id })
  ElMessage.success('创建成功')
  router.back()
}
const detail = ref<CaseItem>()
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">
    <Form @submit="handleSubmit" :data="detail" />
  </AppCard>
</template>
