<script setup lang="ts">
import { useCookies } from '@vueuse/integrations/useCookies'
import { getExperimentExamList } from '../api'
import { useAppConfig } from '@/composables/useAppConfig'
const appConfig = useAppConfig()

interface Props {
  experiment_id: string
  examStatus?: number
}
const props = defineProps<Props>()
const model = defineModel()

const cookies = useCookies()

const list = ref<any[]>([])

// 当前选中的考试
const currentExam = computed(() => {
  return list.value[0]
})
// 考试平台 URL
const examURL = computed(() => {
  if (!currentExam.value) return ''
  return appConfig.system !== 'x' || props.examStatus !== 0
    ? `${import.meta.env.VITE_EXAM_SHOW_URL}/exam/${currentExam.value?.exam_id}`
    : `${import.meta.env.VITE_EXAM_SHOW_URL}/exam/${
        currentExam.value?.exam_id
      }?has_time=0&has_submit=0&has_save=1&show_answer=1`
  // return `https://dev.ezijing.com:5173/exam/7003551966412406784?has_time=0&has_submit=0&has_save=1&show_answer=1`
})

async function fetchInfo() {
  const res = await getExperimentExamList({ experiment_id: props.experiment_id })
  const resCookies = res.data.cookies
  cookies.set(resCookies.key, resCookies.auth_key, { domain: '.ezijing.com', path: '/' })
  list.value = res.data.items || []
  model.value = examURL.value
}
onMounted(() => {
  fetchInfo()
})
</script>

<template>
  <template v-if="currentExam">
    <el-form label-suffix="：" label-position="top" v-if="appConfig.system !== 'x'">
      <el-form-item label="考试名称">{{ currentExam.exam_info.name }}</el-form-item>
      <el-form-item label="考试时间"
        >{{ currentExam.exam_info.start_time }} ～ {{ currentExam.exam_info.end_time }}</el-form-item
      >
    </el-form>
    <div style="width: 100%; height: 100%" v-if="props.examStatus === 0">
      <iframe style="width: 100%; height: 100%" allowfullscreen class="iframe" :src="examURL" frameborder="0"></iframe>
    </div>
    <!-- <teleport to=".lab-box"> -->
    <!-- </teleport> -->
  </template>
  <el-empty description="暂无数据" v-else />
</template>
