td_official/src/views/equipment/index.vue

<template>
  <div class="p-2">
    <transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
      <div v-show="showSearch" class="mb-[10px]">
        <el-card shadow="hover">
          <el-form ref="queryFormRef" :model="queryParams" :inline="true">
            <el-form-item label="设备标识" prop="clientId">
              <el-input v-model="queryParams.clientId" placeholder="请输入设备标识" clearable @keyup.enter="handleQuery" />
            </el-form-item>
            <el-form-item label="设备名称" prop="deviceName">
              <el-input v-model="queryParams.deviceName" placeholder="请输入设备名称" clearable @keyup.enter="handleQuery" />
            </el-form-item>

            <el-form-item>
              <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
              <el-button icon="Refresh" @click="resetQuery">重置</el-button>
            </el-form-item>
          </el-form>
        </el-card>
      </div>
    </transition>

    <el-card shadow="never">
      <template #header>
        <el-row :gutter="20" class="mb8">
          <el-col :span="1.5">
            <el-button type="success" plain icon="Edit" :disabled="single" @click="handleUpdate()" v-hasPermi="['gps:equipment:edit']"
              >修改</el-button
            >
          </el-col>
          <el-col :span="1.5">
            <el-button type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete()" v-hasPermi="['gps:equipment:remove']"
              >删除</el-button
            >
          </el-col>
          <el-col :span="1.8">
            <el-button type="primary" plain icon="User" :disabled="single" @click="handleBindUser()" v-hasPermi="['gps:equipment:bindManmachine']"
              >绑定用户</el-button
            >
          </el-col>
          <el-col :span="2">
            <el-button type="primary" plain @click="toggleGpsType">
              {{ currentGpsType === 0 ? '显示用户数据' : '显示设备数据' }}
            </el-button>
          </el-col>
          <el-col :span="2">
            <el-button type="primary" v-if="queryParams.gpsType !== 1" plain @click="handleViewAll">{{ viewAllButtonText }}</el-button>
          </el-col>

          <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
        </el-row>
      </template>

      <el-table v-loading="loading" :data="equipmentList" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" align="center" />

        <el-table-column label="项目名称" align="center" prop="projectName" />
        <el-table-column label="用户名称" align="center" prop="userName" />
        <el-table-column label="设备标识" align="center" prop="clientId" />

        <!-- 绑定状态列 -->
        <el-table-column label="绑定状态" align="center">
          <template #default="scope">
            <el-tag :type="scope.row.type === 1 ? 'success' : 'warning'" size="small">
              {{ scope.row.type === 1 ? '已绑定' : '未绑定' }}
            </el-tag>
          </template>
        </el-table-column>

        <!-- 设备名称列 -->
        <el-table-column label="设备名称" align="center" prop="deviceName" />

        <el-table-column label="远程连接地址" align="center" prop="remoteAddressStr" />
        <el-table-column label="连接创建时间" align="center">
          <template #default="scope">
            {{ formatDateTime(scope.row.creationTime) }}
          </template>
        </el-table-column>
        <el-table-column label="最后活动时间" align="center">
          <template #default="scope">
            {{ formatDateTime(scope.row.lastAccessedTime) }}
          </template>
        </el-table-column>

        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
          <template #default="scope">
            <el-tooltip content="修改" placement="top">
              <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['gps:equipment:edit']"></el-button>
            </el-tooltip>
            <el-tooltip content="删除" placement="top">
              <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['gps:equipment:remove']"></el-button>
            </el-tooltip>
            <el-tooltip :content="scope.row.type === 1 ? '取消绑定' : '绑定用户'" placement="top">
              <el-button
                link
                type="primary"
                icon="User"
                @click="scope.row.type === 1 ? handleUnbindUser(scope.row) : handleBindUser(scope.row)"
                v-hasPermi="scope.row.type === 1 ? ['gps:equipment:unbindManmachine'] : ['gps:equipment:bindManmachine']"
              >
              </el-button>
            </el-tooltip>

            <el-tooltip content="足迹" placement="top">
              <el-button
                link
                type="primary"
                icon="Location"
                v-hasPermi="['gps:equipmentSon:getList']"
                @click="handleGoToEmptyPage(scope.row.userId, scope.row.projectId, scope.row.clientId, scope.row.gpsType)"
                :disabled="!scope.row.userId || !scope.row.projectId"
              ></el-button>
            </el-tooltip>
            <el-tooltip content="历史记录" placement="top">
              <el-button
                link
                type="primary"
                icon="Clock"
                @click="handleOpenHistoryUser(scope.row.clientId, scope.row.userId)"
                v-hasPermi="['gps:equipment:getUserList']"
              >
              </el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>

      <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />
    </el-card>

    <!-- 添加或修改GPS设备详细对话框 -->
    <el-dialog :title="dialog.title" v-model="dialog.visible" width="500px" append-to-body>
      <el-form ref="equipmentFormRef" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="设备名称" prop="deviceName">
          <el-input v-model="form.deviceName" placeholder="请输入设备名称" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button :loading="buttonLoading" type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 绑定用户对话框 -->
    <el-dialog title="绑定用户" v-model="bindDialogVisible" width="500px" append-to-body>
      <el-form ref="bindUserFormRef" :model="bindForm" :rules="bindRules" label-width="80px">
        <!-- 绑定用户对话框 - 项目选择下拉框 -->
        <el-form-item label="项目选择" prop="projectId" required>
          <el-select v-model="bindForm.projectId" placeholder="请选择项目" clearable @change="handleProjectChange">
            <el-option v-for="project in projectList" :key="project.projectId" :label="project.projectName" :value="project.projectId" />
          </el-select>
        </el-form-item>
        <el-form-item label="选择用户" prop="userId" required>
          <el-select v-model="bindForm.userId" placeholder="请选择用户" clearable>
            <el-option v-for="user in userList" :key="user.sysUserId" :label="user.userName" :value="user.sysUserId" />
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button :loading="bindButtonLoading" type="primary" @click="submitBindUser">确 定</el-button>
          <el-button @click="cancelBindUser">取 消</el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 历史用户弹窗 -->
    <el-dialog title="设备历史用户" v-model="historyUserDialogVisible" width="600px" append-to-body @close="() => historyUserList.splice(0)">
      <div v-loading="historyUserLoading" style="min-height: 200px; padding: 16px">
        <el-table
          :data="historyUserList"
          stripe
          size="small"
          :show-header="historyUserList.length > 0"
          v-if="!historyUserLoading || historyUserList.length > 0"
        >
          <el-table-column label="序号" type="index" width="60" align="center" />
          <el-table-column label="用户名" align="center" prop="userName" />
          <el-table-column label="项目名称" align="center" prop="projectName" />
          <el-table-column label="状态" align="center" width="120">
            <template #default="scope">
              <el-tag :type="scope.row.type === 0 ? 'success' : 'info'" size="small">
                {{ scope.row.type === 0 ? '当前绑定' : '历史绑定' }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center" width="80">
            <template #default="scope">
              <el-tooltip content="足迹" placement="top">
                <el-button
                  link
                  type="primary"
                  icon="Location"
                  v-hasPermi="['gps:equipmentSon:getList']"
                  @click="handleGoToEmptyPage(scope.row.userId, scope.row.projectId, currentHistoryClientId, currentGpsType)"
                ></el-button>
              </el-tooltip>
            </template>
          </el-table-column>
        </el-table>

        <div v-if="!historyUserLoading && historyUserList.length === 0" style="text-align: center; padding: 50px 0">
          <el-empty description="暂无该设备的历史用户数据"></el-empty>
        </div>
      </div>

      <template #footer>
        <el-button @click="historyUserDialogVisible = false">关 闭</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup name="Equipment" lang="ts">
import {
  listEquipment,
  getEquipment,
  delEquipment,
  addEquipment,
  updateEquipment,
  bindUser,
  getUserId,
  gethistroyUser,
  getRemoveBind,
  getProjectId
} from '@/api/equipment/index';
import { EquipmentVO, EquipmentQuery, EquipmentForm } from '@/api/equipment/types';
import { getCurrentInstance, ComponentInternalInstance, onMounted, ref, reactive, toRefs, watch, computed } from 'vue';
import { useUserStoreHook } from '@/store/modules/user';
import { useRouter } from 'vue-router'; // 新增：导入路由钩子

const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const router = useRouter(); // 新增：初始化路由实例

// 扩展EquipmentVO类型，添加type字段
interface ExtendedEquipmentVO extends EquipmentVO {
  type: 1 | 2; // 1=已绑定，2=未绑定
}

// 设备列表相关
const equipmentList = ref<ExtendedEquipmentVO[]>([]);
const buttonLoading = ref(false);
const loading = ref(true);
const showSearch = ref(true);
const ids = ref<Array<string | number>>([]);
const single = ref(true);
const multiple = ref(true);
const total = ref(0);

// 表单相关引用
const queryFormRef = ref<ElFormInstance>();
const equipmentFormRef = ref<ElFormInstance>();
const bindUserFormRef = ref<ElFormInstance>();

// 项目和用户相关
const userStore = useUserStoreHook();
const currentProject = computed(() => userStore.selectedProject);
const userList = ref<any[]>([]);
const projectList = ref<any[]>([]);
const projectLoading = ref(false);
const userLoading = ref(false);
const viewAllButtonText = computed(() => {
  return queryParams.value.type === 1 ? '查看未绑定项目设备' : '查看已绑定项目设备';
});

// 对话框相关
const dialog = reactive<DialogOption>({
  visible: false,
  title: ''
});
const bindDialogVisible = ref(false);
const bindButtonLoading = ref(false);

// 历史用户弹窗相关
const historyUserDialogVisible = ref(false);
const historyUserList = ref<HistoryUserVO[]>([]);
const historyUserLoading = ref(false);

// 绑定用户表单数据
const bindForm = reactive({
  id: undefined,
  projectId: undefined,
  userId: undefined,
  deviceName: undefined
});

// 绑定用户表单验证规则
const bindRules = reactive({
  projectId: [{ required: true, message: '请选择项目', trigger: 'change' }],
  userId: [{ required: true, message: '请选择用户', trigger: 'change' }]
});

// 初始化表单数据
const initFormData: EquipmentForm = {
  id: undefined,
  projectId: undefined,
  userId: undefined,
  deviceName: undefined,
  udp: undefined,
  remoteAddressStr: undefined,
  creationTime: undefined,
  lastAccessedTime: undefined,
  registered: undefined,
  remark: undefined
};

// 当前GPS类型 (0:设备数据, 1:用户数据)
const currentGpsType = ref(0);

// 页面数据
const data = reactive<PageData<EquipmentForm, EquipmentQuery>>({
  form: { ...initFormData },
  queryParams: {
    type: 1, // 默认查询已绑定设备
    pageNum: 1,
    pageSize: 10,
    projectId: undefined,
    userId: undefined,
    clientId: undefined,
    deviceName: undefined,
    udp: undefined,
    remoteAddressStr: undefined,
    creationTime: undefined,
    lastAccessedTime: undefined,
    registered: undefined,
    gpsType: 0, // 默认显示设备数据
    params: {}
  },
  rules: {
    deviceName: [{ required: true, message: '请输入设备名称', trigger: 'blur' }]
  }
});

const { queryParams, form, rules } = toRefs(data);

/** 格式化日期时间 */
const formatDateTime = (timestamp: any): string => {
  if (!timestamp) return '-';

  let date: Date;

  // 处理自定义的 yyyyMMddHHmmss 格式数字
  if (typeof timestamp === 'number' && timestamp.toString().length === 14) {
    const timeStr = timestamp.toString();
    const year = timeStr.substring(0, 4);
    const month = timeStr.substring(4, 6);
    const day = timeStr.substring(6, 8);
    const hours = timeStr.substring(8, 10);
    const minutes = timeStr.substring(10, 12);
    const seconds = timeStr.substring(12, 14);
    date = new Date(`${year}-${month}-${day} ${hours}:${minutes}:${seconds}`);
  }
  // 处理时间戳（毫秒数）
  else if (typeof timestamp === 'number') {
    date = new Date(timestamp.toString().length === 10 ? timestamp * 1000 : timestamp);
  }
  // 处理字符串类型的时间戳或日期
  else if (typeof timestamp === 'string') {
    if (/^\d+$/.test(timestamp)) {
      const num = parseInt(timestamp);
      if (timestamp.length === 14) {
        const year = timestamp.substring(0, 4);
        const month = timestamp.substring(4, 6);
        const day = timestamp.substring(6, 8);
        const hours = timestamp.substring(8, 10);
        const minutes = timestamp.substring(10, 12);
        const seconds = timestamp.substring(12, 14);
        date = new Date(`${year}-${month}-${day} ${hours}:${minutes}:${seconds}`);
      } else {
        date = new Date(timestamp.length === 10 ? num * 1000 : num);
      }
    } else {
      date = new Date(timestamp);
    }
  }
  // 其他情况
  else {
    return '-';
  }

  // 检查日期是否有效
  if (isNaN(date.getTime())) return '-';

  // 格式化日期
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, '0');
  const day = String(date.getDate()).padStart(2, '0');
  const hours = String(date.getHours()).padStart(2, '0');
  const minutes = String(date.getMinutes()).padStart(2, '0');
  const seconds = String(date.getSeconds()).padStart(2, '0');

  return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
};

/** 切换GPS数据类型 */
const toggleGpsType = () => {
  currentGpsType.value = currentGpsType.value === 0 ? 1 : 0;
  queryParams.value.gpsType = currentGpsType.value;
  queryParams.value.pageNum = 1;
  getList();
  proxy?.$modal.msgSuccess(`已切换到${currentGpsType.value === 0 ? '设备数据' : '用户数据'}模式`);
};

/** 获取设备列表 */
const getList = async () => {
  loading.value = true;
  try {
    // 已绑定设备默认关联当前项目
    if (queryParams.value.type === 1 && currentProject.value?.id && !queryParams.value.projectId) {
      queryParams.value.projectId = currentProject.value.id;
    } else if (queryParams.value.type === 2) {
      // 未绑定设备清空项目筛选
      queryParams.value.projectId = undefined;
    }

    // 确保gpsType参数正确设置
    queryParams.value.gpsType = currentGpsType.value;

    const res = await listEquipment(queryParams.value);
    equipmentList.value = res.rows as ExtendedEquipmentVO[];
    total.value = res.total;
  } catch (error) {
    console.error('获取设备列表失败:', error);
    proxy?.$modal.msgError('获取设备列表失败，请重试');
  } finally {
    loading.value = false;
  }
};

const getProjects = async () => {
  projectLoading.value = true;
  try {
    const res = await getProjectId();
    console.log('getProjectId接口原始返回:', res);

    // 从res.data中获取数组（适配外层包裹的接口格式）
    const rawProjects = res?.data || [];

    // 验证数据类型，确保是数组
    if (!Array.isArray(rawProjects)) {
      console.warn('接口返回的项目数据不是数组，已自动修正为空数组');
      projectList.value = [];
      return;
    }

    // 处理项目数据（使用projectId和projectName）
    projectList.value = rawProjects
      .map((project) => ({
        projectId: project.projectId,
        projectName: project.projectName || '未命名项目'
      }))
      .filter((project) => project.projectId);

    console.log('处理后项目列表:', projectList.value);
  } catch (error) {
    console.error('获取项目列表失败:', error);
    proxy?.$modal.msgError('获取项目列表失败，请重试');
  } finally {
    projectLoading.value = false;
  }
};

/** 根据项目ID获取用户列表 */
const getUsersByProjectId = async (projectId: any) => {
  if (!projectId) {
    userList.value = [];
    return;
  }

  userLoading.value = true;
  try {
    const res = await getUserId(projectId);
    userList.value = res.data || [];
  } catch (error) {
    console.error('获取用户列表失败:', error);
    proxy?.$modal.msgError('获取用户列表失败，请重试');
  } finally {
    userLoading.value = false;
  }
};

/** 项目选择变化时触发 */
const handleProjectChange = (projectId: any) => {
  bindForm.userId = undefined;
  getUsersByProjectId(projectId);

  // 仅已绑定设备需要更新项目筛选
  if (queryParams.value.type === 1) {
    queryParams.value.projectId = projectId;
    getList();
  }
};

/** 切换查看已绑定/未绑定设备 */
const handleViewAll = () => {
  queryParams.value.pageNum = 1;

  if (queryParams.value.type === 1) {
    // 切换到未绑定设备
    queryParams.value.type = 2;
    proxy?.$modal.msgSuccess('已切换到查看未绑定设备模式');
  } else {
    // 切换到已绑定设备
    queryParams.value.type = 1;
    queryParams.value.projectId = currentProject.value?.id;
    proxy?.$modal.msgSuccess('已切换到查看已绑定设备模式');
  }

  getList();
};

const handleGoToEmptyPage = (userId: any, projectId: any, clientId: any, gpsType: number) => {
  console.log('userId:', userId, 'projectId:', projectId, 'clientId:', clientId, 'gpsType:', gpsType);

  const queryParams: any = {
    userId: userId,
    projectId: projectId,
    gpsType: gpsType,
    clientId: clientId
  };

  // 当gpsType为0时传入clientId，为1时不传入
  if (gpsType === 1 && clientId) {
    queryParams.clientId = '';
  }

  router.push({
    path: './equipmentGPS',
    query: queryParams
  });
};

/** 取消按钮 */
const cancel = () => {
  reset();
  dialog.visible = false;
};

/** 表单重置 */
const reset = () => {
  form.value = { ...initFormData, projectId: currentProject.value?.id };
  equipmentFormRef.value?.resetFields();
};

/** 搜索按钮操作 */
const handleQuery = () => {
  queryParams.value.pageNum = 1;
  getList();
};

/** 重置按钮操作 */
const resetQuery = () => {
  queryFormRef.value?.resetFields();
  queryParams.value.type = 1;
  queryParams.value.projectId = currentProject.value?.id;
  handleQuery();
};

/** 多选框选中数据 */
const handleSelectionChange = (selection: ExtendedEquipmentVO[]) => {
  ids.value = selection.map((item) => item.id);
  single.value = selection.length != 1;
  multiple.value = !selection.length;
};

/** 修改按钮操作 */
const handleUpdate = async (row?: ExtendedEquipmentVO) => {
  reset();
  const _id = row?.id || ids.value[0];
  try {
    const res = await getEquipment(_id);
    Object.assign(form.value, res.data);
    dialog.visible = true;
    dialog.title = '修改GPS设备详细';
  } catch (error) {
    console.error('获取设备详情失败:', error);
    proxy?.$modal.msgError('获取设备详情失败，请重试');
  }
};

/** 提交表单 */
const submitForm = () => {
  equipmentFormRef.value?.validate(async (valid: boolean) => {
    if (valid) {
      buttonLoading.value = true;
      try {
        if (form.value.id) {
          await updateEquipment(form.value);
        } else {
          await addEquipment(form.value);
        }
        proxy?.$modal.msgSuccess('操作成功');
        dialog.visible = false;
        await getList();
      } catch (error) {
        console.error('提交表单失败:', error);
        proxy?.$modal.msgError('操作失败');
      } finally {
        buttonLoading.value = false;
      }
    }
  });
};

/** 删除按钮操作 */
const handleDelete = async (row?: ExtendedEquipmentVO) => {
  const _ids = row?.id || ids.value;
  try {
    await proxy?.$modal.confirm('是否确认删除GPS设备详细编号为"' + _ids + '"的数据项？');
    await delEquipment(_ids);
    proxy?.$modal.msgSuccess('删除成功');
    await getList();
  } catch (error) {
    console.error('删除设备失败:', error);
    proxy?.$modal.msgError('删除失败，请重试');
  } finally {
    loading.value = false;
  }
};

/** 绑定用户按钮操作 */
const handleBindUser = async (row: ExtendedEquipmentVO) => {
  try {
    if (!row) {
      proxy?.$modal.msgWarning('未获取到设备信息');
      return;
    }

    if (row.id === undefined || row.id === null || row.id === '') {
      proxy?.$modal.msgWarning('设备ID不能为空');
      return;
    }
    const deviceId = Number(row.id);
    if (isNaN(deviceId) || deviceId <= 0) {
      proxy?.$modal.msgWarning(`设备ID格式错误，必须是正整数，当前值: ${row.id}`);
      return;
    }

    if (!row.clientId || typeof row.clientId !== 'string' || row.clientId.trim() === '') {
      proxy?.$modal.msgWarning(`设备标识clientId格式错误，必须是非空字符串，当前值: ${row.clientId}`);
      return;
    }

    // 初始化表单
    Object.assign(bindForm, {
      id: deviceId,
      projectId: undefined,
      userId: undefined,
      clientId: row.clientId,
      deviceName: row.deviceName || '未知设备'
    });
    bindUserFormRef.value?.resetFields();
    userList.value = [];

    // 加载项目和用户数据
    if (projectList.value.length === 0) {
      await getProjects();
    }

    if (currentProject.value?.id) {
      bindForm.projectId = currentProject.value.id;
      await getUsersByProjectId(currentProject.value.id);
    }

    bindDialogVisible.value = true;
  } catch (error) {
    console.error('打开绑定用户对话框失败:', error);
    proxy?.$modal.msgError('操作失败，请重试');
  }
};

/** 提交绑定用户 */
const submitBindUser = () => {
  bindUserFormRef.value?.validate(async (valid: boolean) => {
    if (valid) {
      if (!bindForm.clientId) {
        proxy?.$modal.msgWarning('设备标识clientId不存在，无法完成绑定');
        bindButtonLoading.value = false;
        return;
      }

      bindButtonLoading.value = true;
      try {
        // 直接使用bindForm数据调用bindUser接口
        console.log('提交绑定用户参数:', bindForm);
        await bindUser(bindForm);
        proxy?.$modal.msgSuccess('用户绑定成功');
        bindDialogVisible.value = false;
        await getList();
      } catch (error) {
        console.error('绑定用户失败:', error);
        proxy?.$modal.msgError('绑定失败，请重试');
      } finally {
        bindButtonLoading.value = false;
      }
    }
  });
};

/** 取消绑定用户对话框 */
const cancelBindUser = () => {
  bindDialogVisible.value = false;
};

/** 取消用户绑定操作 */
const handleUnbindUser = async (row: ExtendedEquipmentVO) => {
  try {
    if (!row) {
      proxy?.$modal.msgWarning('未获取到设备信息');
      return;
    }

    if (row.id === undefined || row.id === null || row.id === '') {
      proxy?.$modal.msgWarning('设备ID不能为空');
      return;
    }
    const deviceId = Number(row.id);
    if (isNaN(deviceId) || deviceId <= 0) {
      proxy?.$modal.msgWarning(`设备ID格式错误，必须是正整数，当前值: ${row.id}`);
      return;
    }

    if (!row.clientId || typeof row.clientId !== 'string' || row.clientId.trim() === '') {
      proxy?.$modal.msgWarning(`设备标识clientId格式错误，必须是非空字符串，当前值: ${row.clientId}`);
      return;
    }
    const clientId = row.clientId.trim();

    const unbindParams = {
      id: deviceId,
      clientId: clientId
    };

    await proxy?.$modal.confirm('是否确认解除该设备的用户绑定？');

    const response = await getRemoveBind(unbindParams);
    if (response && response.code === 200) {
      proxy?.$modal.msgSuccess('解除绑定成功');
      await getList();
    } else {
      throw new Error(`接口返回非成功状态: ${JSON.stringify(response)}`);
    }
  } catch (error) {
    console.error('解除绑定 - 错误详情:', error);

    if (error === 'cancel' || (error instanceof Error && error.message.includes('cancel'))) {
      console.log('用户取消了解除绑定操作');
      return;
    }

    const errorMsg = error instanceof Error ? error.message : typeof error === 'string' ? error : '未知错误';
    proxy?.$modal.msgError(`解除绑定失败: ${errorMsg}`);
  }
};

/** 打开历史用户弹窗 */
const handleOpenHistoryUser = async (clientId: string | number | undefined, currentUserId: string | number | undefined) => {
  if (!clientId) {
    proxy?.$modal.msgWarning('设备标识（clientId）不存在，无法获取历史用户');
    return;
  }

  historyUserDialogVisible.value = true;
  historyUserLoading.value = true;
  historyUserList.value = [];
  // 保存当前clientId用于足迹操作
  currentHistoryClientId.value = clientId;

  try {
    const res = await gethistroyUser({
      clientId: clientId,
      userId: currentUserId || ''
    });

    const rawUserList = res.data || [];
    if (currentUserId && rawUserList.length > 0) {
      const currentUser = rawUserList.find((user: HistoryUserVO) => user.sysUserId === currentUserId);
      const historyUsers = rawUserList.filter((user: HistoryUserVO) => user.sysUserId !== currentUserId);
      historyUserList.value = currentUser ? [currentUser, ...historyUsers] : historyUsers;
    } else {
      historyUserList.value = rawUserList;
    }
  } catch (error) {
    console.error('获取历史用户接口调用失败（clientId：%s）:', clientId, error);
    proxy?.$modal.msgError('获取历史用户失败，请重试');
    historyUserList.value = [];
  } finally {
    historyUserLoading.value = false;
  }
};

/** 历史弹窗中的足迹操作 */
const handleFootprintOperation = () => {
  if (!historyUserList.value || historyUserList.value.length === 0) {
    proxy?.$modal.msgWarning('暂无用户数据，无法查看足迹');
    return;
  }

  // 获取第一个用户的数据（通常是当前绑定用户）
  const firstUser = historyUserList.value[0];
  if (!firstUser.sysUserId) {
    proxy?.$modal.msgWarning('用户ID不存在，无法查看足迹');
    return;
  }

  // 跳转到足迹页面
  handleGoToEmptyPage(firstUser.sysUserId, firstUser.projectId || currentProject.value?.id, currentHistoryClientId.value);
};

// 当前历史弹窗的clientId
const currentHistoryClientId = ref('');

/** 页面挂载时初始化 */
onMounted(() => {
  getList();
});

/** 监听项目变化 */
const listeningProject = watch(
  () => currentProject.value?.id,
  (nid) => {
    if (queryParams.value.type === 1) {
      queryParams.value.projectId = nid;
      form.value.projectId = nid;
      getList();
    }
  }
);

/** 页面卸载时清理 */
onUnmounted(() => {
  listeningProject();
});

// 类型定义
interface DialogOption {
  visible: boolean;
  title: string;
}

interface PageData<T, Q> {
  form: T;
  queryParams: Q;
  rules: Record<string, any[]>;
}

interface HistoryUserVO {
  sysUserId: string | number;
  userName: string;
  lastUseTime?: number | string;
  bindTime?: number | string;
  type?: number; // 1:当前绑定，其他:历史绑定
}
</script>