<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
  showInfo?: boolean
  showIframe?: boolean
}
const props = withDefaults(defineProps<Props>(), {
  showInfo: true,
  showIframe: false,
})
const model = defineModel()
const emits = defineEmits(['empty'])

const cookies = useCookies()

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

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

async function fetchInfo() {
  if (!props.experiment_id) return
  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

  if (list.value.length === 0) {
    emits('empty')
  }
}
watchEffect(() => {
  fetchInfo()
})
</script>

<template>
  <template v-if="currentExam">
    <el-form label-suffix="：" label-position="top" v-if="showInfo">
      <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>
    <iframe
      style="width: 100%; height: 100%"
      allowfullscreen
      class="iframe"
      :src="examURL"
      frameborder="0"
      v-if="showIframe"></iframe>
  </template>
  <el-empty description="暂无数据" v-else />
</template>
