<template>
  <el-dialog
    v-model="dialogVisible"
    title="系统名单"
    width="800px"
    class="page_dialog"
    :before-close="handleClose"
  >
    <div class="dialog_center">
      <div class="center_message_title">请选择参加考试的班级,再点击确认按钮</div>
    </div>
    <div class="table_42">
      <el-table ref="tableRef"  :data="tableData"    stripe  height="400px" >
        
        <el-table-column type="selection" width="50" align="center"></el-table-column>
        <el-table-column align="center" type="index" width="100"  label="序号"></el-table-column>  
        <el-table-column  prop="className"  label="班级名称"></el-table-column>
        <el-table-column  prop="userTotal"  label="人数"></el-table-column>
      </el-table>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="HandleCancel">取消</el-button>
        <el-button type="primary" :loading="loading" @click="HandleSubmit">确定</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { ref, reactive, computed, watch,onMounted } from 'vue'
import type { ElTableColumn, FormInstance, FormRules } from 'element-plus'
import { ElMessage,ElTable } from 'element-plus'

// 1. 确保导入接口函数，请根据实际路径调整
import { getClassList,useClassList } from '@/api/exam' 
import { useExamStore } from '@/store/exam'

// 定义 table ref
const tableRef = ref<InstanceType<typeof ElTable>>()
// 实例化 Store
const examStore = useExamStore()
// 定义 Props 和 Emits
const props = defineProps<{
  modelValue: boolean,

}>()

const emit = defineEmits<{
  (e: 'update:modelValue', value: boolean): void
  (e: 'success'): void
}>()

// 弹窗显示状态的双向绑定
const dialogVisible = computed({
  get: () => props.modelValue,
  set: (val) => emit('update:modelValue', val)
})



// 表单引用
const formRef = ref<FormInstance>()

//定义用于存储下拉菜单选项的响应式数据
const tableData=ref<any[]>([]);

const selectedId=ref<any>();//选中的模板id

const loading=ref(false);//加载状态

// 考试科目 ID
const examSubjectId = computed(() => {
  // 替换为: return makeTemplateStore.examTempDetail?.id
  return examStore.currentExam?.id
})//计算属性

// 关闭弹窗前的处理
const handleClose = (done: () => void) => {
  // 可以在这里添加确认关闭的逻辑
  done()
}

onMounted(()=>{
  GetClassList();
})

// 获取模板列表
const GetClassList=async()=>{
  const params={
    examSubjectId:examSubjectId.value,
    schoolId:0,
  };
  const res:any = await getClassList(params);
  console.log("打印获取的结果",res)
  if(res.code==200 && res.data)
  {
    tableData.value=res.data.adminClasses;
    console.log("打印formData",tableData.value)
    selectedId.value=tableData.value[0].classId;

   
  }
}
//监听弹窗打开，调用接口
watch(dialogVisible, (val) => { 
  if (val) 
  {
    //弹窗打开时获取数据
    GetClassList()
  }
})




// 取消按钮
const HandleCancel = () => {
  dialogVisible.value = false

}

// 确定按钮
const HandleSubmit= () => { 
  console.log("确定选择模板")

  console.log("examSubjectId",examSubjectId.value)
  console.log("selectedId",selectedId.value)

  const selectRows=tableRef.value?.getSelectionRows() || [];
  if(selectRows.length==0)
  {
    ElMessage.error("请至少选择一个班级!");
    return;
  }
  // 提取选中项的 id 
  const selectedIds = selectRows.map((row: any) => row.classId)
  console.log("选中的班级id",selectedIds)

  const params={
    examSubjectId:examSubjectId.value,
    classIds:selectedIds,
    reuse:0,//是否是重新使用名单 0-否 1-是
    schoolId:0,//学校id
  };
  loading.value=true;
  useClassList(params).then((res:any)=>{
    loading.value=false;
    if(res.code==200)
    {
      ElMessage.success("操作成功!");
      dialogVisible.value = false
      emit('success')
    }
    else
    {
      ElMessage.error(res.msg || "操作失败!");
    }
  })
}


</script>

<style lang="scss" scoped>

</style>