<script setup lang="ts">
import type { ExperimentInfo } from '../types'
import { getSearchCriteria, getRecordList } from '../api'
import Report from '@/modules/market/my/components/Report.vue'

const route = useRoute()

let experimentInfo = $ref<ExperimentInfo>()
getSearchCriteria().then((res: { data: { experiment: ExperimentInfo } }) => {
  if (res?.data) {
    const data = res.data.experiment
    data.teacher_name = data.teacher.reduce((a: any, b: any) => a.push(b.name) && a, []).join(',')
    experimentInfo = data
  }
})

const detail = ref<any>({})
getRecordList({ sno_number: route.query.snoNumber }).then(res => {
  if (res.data) {
    detail.value = res.data.list[0]
  }
})

const data = $computed(() => {
  return detail.value?.details ? JSON.parse(detail.value.details) : {}
})
</script>

<template>
  <AppCard>
    <el-form label-suffix=":" inline class="info">
      <el-form-item label="实验名称">{{ experimentInfo?.name }}</el-form-item>
      <el-form-item label="课程名称">{{ experimentInfo?.course_name }}</el-form-item>
      <el-form-item label="指导教师">{{ experimentInfo?.teacher_name }}</el-form-item>
      <el-form-item label="实验学时">{{ experimentInfo?.length }}</el-form-item>
    </el-form>
    <el-divider />
    <Report
      :detail="data"
      :experimentName="experimentInfo?.name"
      :teacherName="experimentInfo?.teacher_name"
      :studentName="detail?.name"
      ref="reportRef"
    />
  </AppCard>
</template>

<style lang="scss" scoped>
.info {
  display: flex;
  justify-content: space-between;
}
</style>
