<template>
  <div class="part-box is-filter">
    <el-form :model="searchModel" inline @submit.prevent="toPage(1)">
      <el-form-item label="登录名">
        <el-input
          v-model.trim="searchModel.loginName"
          placeholder="请输入登录名"
          clearable
        />
      </el-form-item>
      <el-form-item label="名称">
        <el-input
          v-model.trim="searchModel.name"
          placeholder="请输入名称"
          clearable
        />
      </el-form-item>
      <el-form-item label="来源">
        <el-select
          v-model="searchModel.source"
          placeholder="请选择来源"
          clearable
          style="width: 120px"
        >
          <el-option
            v-for="(val, key) in USER_SOURCE"
            :key="key"
            :label="val"
            :value="key"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="角色">
        <el-select
          v-model="searchModel.role"
          placeholder="请选择角色"
          clearable
          style="width: 120px"
        >
          <el-option
            v-for="(val, key) in ROLE_TYPE"
            :key="key"
            :label="val"
            :value="key"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="状态">
        <el-select
          v-model="searchModel.enable"
          placeholder="请选择状态"
          clearable
          style="width: 120px"
        >
          <el-option label="启用" :value="true" />
          <el-option label="禁用" :value="false" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-space wrap>
          <el-button type="primary" @click="toPage(1)">查询</el-button>
          <el-button type="success" @click="onAdd">新建用户</el-button>

          <el-dropdown @command="onImportCommand">
            <el-button class="is-shade">
              导入
              <el-icon class="el-icon--right"><CaretBottom /> </el-icon>
            </el-button>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item command="kzz">科组长</el-dropdown-item>
                <el-dropdown-item command="fhy">复核员</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
          <el-button @click="onImportMarker">导入班级评卷员</el-button>

          <el-dropdown @command="onExportCommand">
            <el-button class="is-shade">
              导出
              <el-icon class="el-icon--right"><CaretBottom /> </el-icon>
            </el-button>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item command="exportUser">导出</el-dropdown-item>
                <el-dropdown-item command="exportUserByExam"
                  >按考试导出全部</el-dropdown-item
                >
                <el-dropdown-item command="exportUserBySubject"
                  >按考试导出科目拆分表</el-dropdown-item
                >
              </el-dropdown-menu>
            </template>
          </el-dropdown>
          <el-button @click="onBatchAdd">批量新增</el-button>
          <el-button @click="onBatchEnable(true)">启用</el-button>
          <el-button @click="onBatchEnable(false)">禁用</el-button>
          <el-button @click="onBatchResetPassword">重置密码</el-button>
        </el-space>
      </el-form-item>
    </el-form>
  </div>

  <div class="part-box">
    <el-table
      v-loading="loadingTable"
      :data="dataList"
      class="page-table"
      border
      stripe
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55" />
      <el-table-column prop="loginName" label="登录名" />
      <el-table-column prop="name" label="名称" />
      <el-table-column prop="employeeId" label="工号" />
      <el-table-column prop="source" label="来源">
        <template #default="{ row }">
          {{ dictFilter.userSource(row.source) }}
        </template>
      </el-table-column>
      <el-table-column prop="role" label="角色">
        <template #default="{ row }">
          {{ dictFilter.role(row.role) }}
        </template>
      </el-table-column>
      <el-table-column prop="enable" label="状态">
        <template #default="{ row }">
          <el-tag :type="row.enable ? 'success' : 'danger'">
            {{ row.enable ? '启用' : '禁用' }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="140">
        <template #default="{ row }">
          <el-button size="small" type="primary" link @click="onEdit(row)"
            >编辑</el-button
          >
          <el-button
            size="small"
            type="danger"
            link
            @click="onResetPassword(row)"
            >重置密码</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      v-model:current-page="pagination.pageNumber"
      v-model:page-size="pagination.pageSize"
      :layout="pagination.layout"
      :total="pagination.total"
      @size-change="pageSizeChange"
      @current-change="toPage"
    />
  </div>

  <!-- 新增/编辑用户弹窗 -->
  <ModifyUser ref="modifyUserRef" :row-data="curRow" @modified="getList" />

  <!-- 导入用户 -->
  <ImportDialog
    ref="importUserDialogRef"
    :title="importData.isHeader ? '导入科组长' : '导入复核员'"
    upload-url="/api/admin/site/import"
    :upload-data="importData"
    :format="['xls', 'xlsx']"
    :download-handle="
      () =>
        downloadExport('headerInspectorTemplate', {
          isHeader: importData.isHeader,
        })
    "
    download-filename="导入模板.xlsx"
  />
  <!-- 导入班级评卷员 -->
  <ImportDialog
    ref="importMarkerDialogRef"
    title="导入班级评卷员"
    upload-url="/api/admin/user/class/import"
    :format="['xls', 'xlsx']"
    :download-handle="() => downloadExport('markerClassTemplate')"
    download-filename="导入班级评卷员模板.xlsx"
  />

  <!-- 批量新增用户弹窗 -->
  <BatchCreateUserDialog ref="batchCreateUserDialogRef" @modified="getList" />
</template>

<script setup lang="ts">
  import { reactive, ref, onMounted, computed } from 'vue';
  import { ElMessage } from 'element-plus';
  import { CaretBottom } from '@element-plus/icons-vue';
  import { userListPage, resetUserPassword, enableUser } from '@/api/user';
  import type { UserItem, UserListFilter } from '@/api/types/user';
  import useTable from '@/hooks/table';
  import { modalConfirm } from '@/utils/ui';
  import { dictFilter } from '@/utils/filter';
  import { ROLE_TYPE, USER_SOURCE } from '@/constants/enumerate';
  import { downloadExport } from '@/utils/download-export';

  import ModifyUser from './ModifyUser.vue'; // 引入弹窗组件
  import BatchCreateUserDialog from './components/BatchCreateUserDialog.vue';

  defineOptions({
    name: 'UserManage',
  });

  const searchModel = reactive<UserListFilter>({
    name: '',
    loginName: '',
    enable: undefined,
    role: undefined,
  });

  const {
    dataList,
    pagination,
    loading: loadingTable,
    selectedRows,
    getList,
    toPage,
    pageSizeChange,
    handleSelectionChange,
  } = useTable<UserItem>(userListPage, searchModel);

  const modifyUserRef = ref<InstanceType<typeof ModifyUser> | null>(null);
  const batchCreateUserDialogRef = ref<InstanceType<
    typeof BatchCreateUserDialog
  > | null>(null);
  const curRow = ref<UserItem | undefined>(undefined);

  const canBatchAction = computed(() => {
    return selectedRows.value.length > 0;
  });

  const onAdd = () => {
    curRow.value = undefined; // 清除当前行数据，表示新增
    modifyUserRef.value?.open();
  };

  const onBatchAdd = () => {
    batchCreateUserDialogRef.value?.open();
  };

  const onEdit = (row: UserItem) => {
    curRow.value = row;
    modifyUserRef.value?.open();
  };

  const onResetPassword = async (row: UserItem) => {
    const confirm = await modalConfirm(
      `确定要重置用户 "${row.name}" 的密码吗？`,
      '提示'
    ).catch(() => false);
    if (!confirm) return;

    try {
      await resetUserPassword({ ids: [row.id], password: '123456' });
      ElMessage.success('密码重置成功！');
    } catch (error) {
      console.error('操作失败:', error);
    }
  };

  // const onDelete = async (row: UserItem) => {
  //   const confirm = await modalConfirm(
  //     `确定要删除用户 "${row.name}" 吗？`,
  //     '警告'
  //   ).catch(() => false);
  //   if (!confirm) return;

  //   try {
  //     await deleteUser(row.id);
  //     ElMessage.success('用户删除成功！');
  //     getList(); // 刷新列表
  //   } catch (error) {
  //     if (error !== 'cancel') {
  //       console.error('删除用户失败:', error);
  //       // ElMessage.error('删除用户失败');
  //     }
  //   }
  // };

  // 导入用户
  const importUserDialogRef = ref();
  const importData = reactive({
    isHeader: false,
  });
  const onImportCommand = (command: 'kzz' | 'fhy') => {
    importData.isHeader = command === 'kzz';
    importUserDialogRef.value?.open();
  };

  // 导入班级评卷员
  const importMarkerDialogRef = ref();
  const onImportMarker = () => {
    importMarkerDialogRef.value?.open();
  };

  // 导出
  const onExportCommand = async (
    command: 'exportUser' | 'exportUserByExam' | 'exportUserBySubject'
  ) => {
    await downloadExport(command);
  };

  // 批量启用、禁用
  const onBatchEnable = async (enabled: boolean) => {
    if (canBatchAction.value) {
      ElMessage.warning('请至少选择一个用户');
      return;
    }
    const action = enabled ? '启用' : '禁用';
    const confirm = await modalConfirm(
      `确定要${action}选中的 ${selectedRows.value.length} 个用户吗？`,
      '提示'
    ).catch(() => false);
    if (!confirm) return;

    try {
      // 调用重置密码接口，不传递新密码，由后端处理
      await enableUser({
        ids: selectedRows.value.map((user) => user.id),
        enabled,
      });
      ElMessage.success('操作成功！');
      getList();
    } catch (error) {
      console.error('操作失败:', error);
    }
  };

  // 批量重置密码
  const onBatchResetPassword = async () => {
    if (canBatchAction.value) {
      ElMessage.warning('请至少选择一个用户');
      return;
    }
    const confirm = await modalConfirm(
      `确定要重置选中 ${selectedRows.value.length} 个用户的密码吗？`,
      '提示'
    ).catch(() => false);
    if (!confirm) return;

    try {
      // 调用重置密码接口，不传递新密码，由后端处理
      await resetUserPassword({
        ids: selectedRows.value.map((user) => user.id),
        password: '123456',
      });
      ElMessage.success('操作成功！');
    } catch (error) {
      console.error('操作失败:', error);
    }
  };

  onMounted(() => {
    // getList();
  });
</script>
