<template>
  <div>
    <!-- 使用 el-tabs 组件创建可切换的选项卡 -->
    <el-tabs v-model="activeTab" style="margin-top: 20px;">
      <!-- 第一个 tab - 通用参数 -->
      <el-tab-pane label="通用参数" name="tab1">
        <el-form :model="form" label-width="200px" style="margin-top: 20px;">
          <el-row :gutter="20">
            <el-col :span="12">


          <!-- 是否使用监考密码验证 -->
          <el-form-item label="是否使用监考密码验证">
            <el-switch 
              v-model="form.isExamPassword" 
              active-value="0" 
              inactive-value="1" 
              active-text="是" 
              inactive-text="否" 
              @change="handleFormChange" />
          </el-form-item>

          <!-- 监考密码 -->
          <el-form-item label="监考密码" v-if="form.isExamPassword === '0'">
            <el-input v-model="form.examPassword" placeholder="请输入监考密码" @input="handleFormChange" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="是否显示试卷编号">
            <el-switch 
              v-model="form.isNumber" 
              active-value="0" 
              inactive-value="1" 
              active-text="是" 
              inactive-text="否" 
              @change="handleFormChange" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="是否在查看时显示试卷内容">
            <el-switch 
              v-model="form.isContent" 
              active-value="0" 
              inactive-value="1" 
              active-text="是" 
              inactive-text="否" 
              @change="handleFormChange" />
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="考生答题时是否显示试题编号">
            <el-switch 
              v-model="form.isAnswerId" 
              active-value="0" 
              inactive-value="1" 
              active-text="是" 
              inactive-text="否" 
              @change="handleFormChange" />
          </el-form-item>
      </el-col>
      </el-row>


       <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="是否启用考场设置">
            <el-switch 
              v-model="form.isSession" 
              active-value="0" 
              inactive-value="1" 
              active-text="是" 
              inactive-text="否" 
              @change="handleFormChange" />
          </el-form-item>
        </el-col>
        
    
    <el-col :span="12">
          <el-form-item label="是否显示答案按钮">
            <el-switch 
              v-model="form.isAnswer" 
              active-value="0" 
              inactive-value="1" 
              active-text="是" 
              inactive-text="否" 
              @change="handleFormChange" />
          </el-form-item>
            </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">

          <!-- 练习成绩保存 -->
          <el-form-item label="练习成绩保存">
            <el-radio-group v-model="form.saveGrades" @change="handleFormChange">
              <el-radio label="0">最高成绩</el-radio>
              <el-radio label="1">最新成绩</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
    
        <el-col :span="12">
          <el-form-item label="是否显示重答按钮">
            <el-switch 
              v-model="form.isRepeat" 
              active-value="0" 
              inactive-value="1" 
              active-text="是" 
              inactive-text="否" 
              @change="handleFormChange" />
          </el-form-item>

        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
      <el-form-item label="是否有测评时长限制">
        <el-switch 
          v-model="form.isTime" 
          active-value="0" 
          inactive-value="1" 
          active-text="是" 
          inactive-text="否" 
          @change="handleFormChange" />
      </el-form-item>
        </el-col>




              <el-col :span="12">
          <el-form-item label="学生是否可以查看试卷">
            <el-switch 
              v-model="form.isLook" 
              active-value="0" 
              inactive-value="1" 
              active-text="是" 
              inactive-text="否" 
              @change="handleFormChange" />
          </el-form-item>
        </el-col>
      </el-row>


      <el-row :gutter="20">

        <el-col :span="12">
        <el-form-item label="测评时长" >
          <el-time-picker
            v-model="form.examTime"
            value-format="HH:mm:ss"
            placeholder="请设置测评时长"
            class="ele-fluid"
            @change="handleFormChange"
          />
        </el-form-item>
            </el-col>
          <el-col :span="12">
          <el-form-item label="定时检查与学生端联通性，每">
            <el-input-number v-model="form.isConnect"  label="分钟" @change="handleFormChange" />
            <span>分钟传一次,断联直接交卷</span>
          </el-form-item>
          </el-col>
      </el-row>
        

        </el-form>
      </el-tab-pane>

      <!-- 第二个 tab - 试卷答题文件 -->
      <el-tab-pane label="试卷答题文件" name="tab2">
        <el-form :model="form" label-width="200px" style="margin-top: 20px;">
          <!-- 学生文件存放系统盘 -->
          <el-form-item label="驱动器为学生文件存放系统盘">
            <el-radio-group v-model="form.driver" @change="handleFormChange">
              <el-radio label="C">C</el-radio>
              <el-radio label="D">D</el-radio>
              <el-radio label="E">E</el-radio>
              <el-radio label="F">F</el-radio>
            </el-radio-group>
          </el-form-item>

          <!-- 考试目录名称 -->
          <el-form-item label="考试目录名称">
            <el-input v-model="form.directory" placeholder="请输入考试目录名称" @input="handleFormChange" />
          </el-form-item>

          <!-- 定时上传考试目录 -->
          <el-form-item label="定时上传考试目录每">
            <el-input-number v-model="form.uploadTime" :min="1" label="分钟" @change="handleFormChange" />
            <span>分钟传一次</span>
          </el-form-item>

          <!-- 完成考试后是否删除考试目录 -->
          <el-form-item label="完成考试后是否删除考试目录">
            <el-radio-group v-model="form.isDel" @change="handleFormChange">
              <el-radio label="0">是</el-radio>
              <el-radio label="1">否</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-form>
      </el-tab-pane>



           <el-tab-pane label="防作弊功能" name="tab3">
      <el-form :model="form" label-width="200px" style="margin-top: 20px;">
      <el-row :gutter="20">
        <el-col :span="12">
          <!-- 禁止学生使用U盘 -->
          <el-form-item label="禁止学生使用U盘">
            <el-switch 
              v-model="form.usb" 
              active-value="0" 
              inactive-value="1" 
              active-text="是" 
              inactive-text="否" 
              @change="handleFormChange" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="是否可以文件共享">
            <el-switch 
              v-model="form.isFile" 
              active-value="0" 
              inactive-value="1" 
              active-text="是" 
              inactive-text="否" 
              @change="handleFormChange" />
          </el-form-item>
        </el-col>
      </el-row>


      <el-row :gutter="20">
        <el-col :span="12">
          <!-- 禁止学生使用U盘 -->
          <el-form-item label="禁用外网">
            <el-switch 
              v-model="form.isNet" 
              active-value="0" 
              inactive-value="1" 
              active-text="是" 
              inactive-text="否" 
              @change="handleFormChange" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="禁止截屏">
            <el-switch 
              v-model="form.isScreen" 
              active-value="0" 
              inactive-value="1" 
              active-text="是" 
              inactive-text="否" 
              @change="handleFormChange" />
          </el-form-item>
        </el-col>
      </el-row>
        
        </el-form>
      </el-tab-pane>
       <el-tab-pane label="考试注意事项提醒" name="tab4">
        <div class="block" @blur.capture="handleFormChange">
          <Editor v-model="form.warn" height="250px"      />
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { getParam, updateParam } from '@/api/system/param'  // 引入后台请求方法

const props = defineProps({
  taskId: {
    type: String,
    default: ''
  }
})

// 字段初始值设置为空或空字符串
const form = ref({
  isAnswerId:'',
  isContent:'',
  isNumber:'',
  isExamPassword: '',     // 是否使用监考密码验证
  examPassword: '',       // 监考密码
  usb: '',                // 是否禁止U盘
  saveGrades: '',         // 成绩保存方式
  driver: '',             // 存放系统盘
  directory: '',          // 考试目录名称
  uploadTime: '',         // 上传间隔时间
  isDel: '',   
  isRepeat:'',           // 是否删除目录
  isAnswer:'',
  isLook:'',
  isConnect:'',
  isFile:'',
  isNet:'',
  isScreen:'',
  warn:''
})

const activeTab = ref('tab1')

// 页面加载时用 taskId 请求后端并赋值
onMounted(async () => {
  if (props.taskId) {
    try {
      const res = await getParam({ taskId: props.taskId })
      const data = res || {}
      console.log('任务详情：', data)

      // 用 Object.assign 将后端数据合并到 form
      Object.assign(form.value, data)
    } catch (error) {
      console.error('获取任务详情失败', error)
    }
  }
})

// 表单变化时触发请求
const handleFormChange = async () => {
  if (form.value.isExamPassword === '1') {
    form.value.examPassword = ''
  }
  try {
    // 发送请求以更新数据
    const response = await updateParam(form.value)
    console.log('更新结果:', response)
  } catch (error) {
    console.error('更新数据失败', error)
  }
}
</script>

<style scoped>
/* 可以为 tab 设置额外的样式，具体根据需求定制 */
</style>
