<script setup lang="ts">
import type { CaseItem } from '../types'
import Preview from '@/components/Preview.vue'
import { useMapStore } from '@/stores/map'

import { getCase } from '../api'

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

let detail = $ref<CaseItem | null>(null)
const username = computed(() => {
  if (!detail) return ''
  const operator = detail.created_operator
  return operator.real_name || operator.nickname || operator.username
})

// 数据状态
const status = useMapStore().getMapValuesByKey('system_status')
const statusName = computed(() => {
  return status.find(item => item.value === detail?.status)?.label
})

const sizeName = computed(() => {
  return detail?.size + 'MB'
})
provide('detail', $$(detail))
function fetchInfo() {
  if (!props.id) return
  getCase({ id: props.id }).then(res => {
    detail = res.data.item
  })
}
onMounted(() => {
  fetchInfo()
})
</script>

<template>
  <AppCard title="查看案例原文">
    <template v-if="detail">
      <el-descriptions>
        <el-descriptions-item label="案例原文名称：">{{ detail.name }}</el-descriptions-item>
        <el-descriptions-item label="文件大小：">{{ sizeName }}</el-descriptions-item>
        <el-descriptions-item label="观看次数：">{{ detail.pv }}次</el-descriptions-item>
        <el-descriptions-item label="关联实验课程：">{{ detail.course.name }}</el-descriptions-item>
        <el-descriptions-item label="关联实验：">{{ detail.experiment.name }}</el-descriptions-item>
        <el-descriptions-item label="有效状态：">{{ statusName }}</el-descriptions-item>
        <el-descriptions-item label="创建人：">{{ username }}</el-descriptions-item>
        <el-descriptions-item label="创建时间：">{{ detail.created_time }}</el-descriptions-item>
      </el-descriptions>
      <div style="height: 80vh">
        <Preview :url="detail.url"></Preview>
      </div>
    </template>
  </AppCard>
</template>
