<template>
  <el-dialog
    v-model="dialogVisible"
    title="请选择机读卡模版"
    width="580px"
    class="page_dialog"
    :before-close="handleClose"
  >
    <div class="table_42">
      <el-table  :data="tableData"    stripe style="width: 100%" >
        
        <el-table-column label=""  width="80">
          <template v-slot="scope">
            <el-radio  v-model="scope.row.selected"></el-radio>
          </template>
        </el-table-column>
        <el-table-column  prop="templateCode"  label="模板编号" ></el-table-column>
        <el-table-column  prop="templateName"  label="模板名称"></el-table-column>
        <el-table-column  prop="option"  label="操作">
          <template v-slot="scope">
            <div class="ele_button table_row_button">
              <span class="btn_editor">预览</span>
            </div> 
          </template>
        </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 } from 'element-plus'

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

// 实例化 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(()=>{
  GetTemplateList();
})

// 获取模板列表
const GetTemplateList=async()=>{
  let params={
    pageNum:1,
    pageSize:1000,
  };
  const res:any = await getTemplateList(params);
  console.log("打印获取的结果",res)
  if(res.code==200 && res.data)
  {
    tableData.value=res.data.records;
    console.log("打印formData",tableData.value)
    selectedId.value=tableData.value[0].id;

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




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

}

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

  console.log("examSubjectId",examSubjectId.value)
  console.log("selectedId",selectedId.value)
  let params={
    examSubjectId:examSubjectId.value,//考试科目id
    templateId:selectedId.value,//模板id
  };
  useTemplate(params).then(res=>{ 
    console.log("打印模板接口返回res",res)
    if(res.code==200)
    {
      ElMessage.success("使用成功");
      dialogVisible.value = false
      emit('success')
    }
  })
}


</script>

<style lang="scss" scoped>

</style>