<template>
  <!-- 模板库对话框 -->
  <Dialog v-model="dialogVisible" title="模板库" width="80%" :destroy-on-close="true">
    <ContentWrap>
      <el-table v-loading="loading" :data="list">
        <el-table-column label="任务名称" align="center" prop="taskName" />
        <el-table-column label="专业" align="center" prop="taskSpecialty" />
        <el-table-column label="操作" align="center">
          <template #default="scope">
            <el-button
              link
              type="primary"
              @click="openEdit('update', scope.row)"
              v-hasPermi="['system:sms-channel:update']"
            >
              使用
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <Pagination
        :total="total"
        v-model:page="queryParams.pageNo"
        v-model:limit="queryParams.pageSize"
        @pagination="getList"
      />
    </ContentWrap> 
  </Dialog>

  <!-- 选择参数的对话框 -->
  <Dialog v-model="showDialog" title="选择所需参数" width="50%" :destroy-on-close="true">
    <el-checkbox-group v-model="selectedOptions">
      <el-checkbox label="1">试卷方案</el-checkbox>
      <el-checkbox label="2">试卷管理</el-checkbox>
      <el-checkbox label="3">参数设置</el-checkbox>
      <el-checkbox label="4">考场设置</el-checkbox>

    </el-checkbox-group>
    <!-- 全选、取消全选按钮 -->
    <el-button @click="selectAll">全选</el-button>
    <el-button @click="deselectAll">取消全选</el-button>

    <!-- 底部按钮 -->
    <template #footer>
      <el-button @click="handleCancel">取消</el-button>
      <el-button type="primary" @click="confirmSelection">确认</el-button>
    </template>
  </Dialog>
</template>


<script setup>
import { ref, reactive, watch, onMounted } from 'vue';
import { pageTasks, submitSelection } from '@/api/system/task';

const message = useMessage() // 消息弹窗
const props = defineProps({
  data: Object
});
const emit = defineEmits(['update:modelValue', 'done']);

// 处理模板库对话框的显隐
const dialogVisible = defineModel({ type: Boolean });// 控制模板库对话框
const showDialog = ref(false); // 控制选择参数对话框
const selectedOptions = ref([]); // 存储用户选中的复选框内容
const selectedTaskId = ref(null); // 用来存储选中行的 taskId

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

// 表格数据和分页参数
const list = ref([]); // 表格数据
const total = ref(0); // 总记录数
const queryParams = reactive({
  pageNo: 1,
  pageSize: 10,
  status: '0',
  isTemplate: '0',
  taskType:'0'
});

// 获取数据
const getList = async () => {
  loading.value = true;
  try {
    const res = await pageTasks(queryParams); 
    list.value = res.list; // 假设 res.data 是你需要的数据
    total.value = res.total; // 假设 res.total 是总记录数
  } finally {
    loading.value = false;
  }
};

// 监听父组件传递的 modelValue
watch(
  () => props.modelValue,
  (val) => {
    dialogVisible.value = val;
  }
);
watch(dialogVisible, (val) => {
  emit('update:modelValue', val); // 更新父组件的 modelValue
});

// 打开编辑表单，弹出选择参数对话框
const openEdit = (action, row) => {
  selectedTaskId.value = row.taskId; // 记录选中的 taskId
  showDialog.value = true; // 弹出选择参数对话框
};

// 全选按钮的处理方法
const selectAll = () => {
  selectedOptions.value = ['1', '2', '3', '4']; // 选择所有复选框
};

// 取消全选按钮的处理方法
const deselectAll = () => {
  selectedOptions.value = []; // 清空选中的复选框
};

// 确认选择的操作
const confirmSelection = () => {
  // 发送请求，包含 taskId 和选中的选项
  const requestData = {
    taskId: selectedTaskId.value, // 选中的 taskId
    options: selectedOptions.value // 选中的复选框内容
  };

  submitSelection(requestData)
    .then((msg) => {
      showDialog.value = false; // 关闭选择参数对话框
      message.success(msg); // 提示成功
      emit('done'); // 通知父组件
    })
    .catch((e) => {
      showDialog.value = false; // 关闭选择参数对话框
      message.error(e.message); // 提示错误
    });
};

// 关闭选择参数对话框
const handleCancel = () => {
  showDialog.value = false;
};

// 初始化获取数据
onMounted(() => {
  getList();
});
</script>
