<script setup lang="ts">
import type { ExperimentItem } from '../types'
import { ElMessageBox } from 'element-plus'
import ReportDesign from '../components/ReportDesign.vue'
import { getExperiment } from '../api'

const ReportPreview = defineAsyncComponent(() => import('../components/ReportPreview.vue'))

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

let detail = $ref<ExperimentItem>()
const teacherText = $computed(() => {
  if (!detail) return ''
  return detail.teacher.map(item => item.name).join('、')
})
function fetchInfo() {
  getExperiment({ experiment_id: props.id }).then(res => {
    detail = res.data.info
  })
}
const form = reactive({
  switch: true,
  detail_list: [
    {
      id: '233434343',
      name: '实验目的',
      type: 1,
      notice_message: '好好学习天线向上',
      rule_mode: 1,
      score: '10.00',
      min_score: '5.00'
    },
    {
      id: '233434344',
      name: '实验附件',
      type: 2,
      rule_mode: 2,
      score: '10.00',
      min_score: '5.00',
      categories: [1, 2],
      has_score: '8.00',
      no_score: '5.00'
    },
    {
      id: '233434344',
      name: '思考题',
      type: 3,
      rule_mode: 1,
      score: '10.00',
      min_score: '5.00',
      question_stem: '这是思考题的题干'
    }
  ]
})
onMounted(() => fetchInfo())

// 保存
function handleSubmit() {}

// 关闭
function handleClose() {
  ElMessageBox.confirm('此操作将不做任何修改，确认关闭该页面？', '提示').then(() => {
    window.close()
  })
}

// 预览
let previewVisible = $ref(false)
function handlePreview() {
  previewVisible = true
}
</script>

<template>
  <AppCard title="实验报告规则设置">
    <el-form :model="form" label-suffix="：" v-if="detail">
      <el-row>
        <el-col :span="8">
          <el-form-item label="实验名称">{{ detail.name }}</el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="实验课程名称">{{ detail.course_name }}</el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="所属机构/学校">{{ detail.organ_id_name }}</el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="实验类型">{{ detail.type_name }}</el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item :span="3" label="指导教师">{{ teacherText }}</el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="实验报告提交方式" prop="switch">
        <el-switch
          v-model="form.switch"
          active-text="上传文件"
          inactive-text="在线填写"
          style="--el-switch-on-color: #ba143e; --el-switch-off-color: #ba143e" />
      </el-form-item>
      <ReportDesign v-model="form.detail_list"></ReportDesign>
    </el-form>
    <el-row justify="center">
      <el-space :size="40">
        <el-button auto-insert-space @click="handleClose">关闭</el-button>
        <el-button type="primary" auto-insert-space @click="handleSubmit">保存</el-button>
        <el-button type="primary" auto-insert-space @click="handlePreview">预览</el-button>
      </el-space>
    </el-row>
    <ReportPreview v-model="previewVisible" :data="{ ...detail, ...form }"></ReportPreview>
  </AppCard>
</template>
