<template>
  <div class="app-container">
    <el-button type="primary" icon="Back" @click="handleBack" style="margin-bottom: 10px"
      >返回</el-button
    >
    <!-- 选项卡组件：增加 custom-tabs 类名 -->
    <el-tabs v-model="activeTab" type="card" @tab-change="handleTabChange" class="custom-tabs">
      <!-- 项目权限选项卡 -->
      <el-tab-pane label="项目" name="project" class="tab-pane-content">
        <el-form
          :model="queryParams"
          ref="queryRef"
          v-show="showSearch"
          :inline="true"
          label-width="68px"
        >
          <el-form-item label="项目名称" prop="roleName">
            <el-input
              v-model="queryParams.projectName"
              placeholder="请输入项目名称"
              clearable
              style="width: 240px"
              @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-button type="info" plain icon="Upload" @click="handleImportTenantProjectList"
              >导入</el-button
            >
          </el-form-item>
        </el-form>

        <!-- 表格数据 -->
        <el-table v-loading="loading" :data="tenantProjectList">
          <el-table-column label="项目名称" prop="projectName" />
          <el-table-column label="项目开始时间" align="center" prop="startTime">
            <template #default="scope">
              <span>{{ parseTime(scope.row.startTime) }}</span>
            </template>
          </el-table-column>
          <el-table-column label="项目结束时间" align="center" prop="endTime">
            <template #default="scope">
              <span>{{ parseTime(scope.row.endTime) }}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
            <template #default="scope">
              <el-button
                link
                type="primary"
                icon="Edit"
                @click="handlePermission(scope.row)"
                v-if="
                  (userStore.isSuperAdmin === 0 && scope.row.scope !== 1) ||
                  userStore.isSuperAdmin === 1
                "
                >分配权限</el-button
              >
              <!--              <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)"-->
              <!--                >删除</el-button-->
              <!--              >-->
            </template>
          </el-table-column>
        </el-table>

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

        <!-- 项目导入（根据权限从项目池导入进来） -->
        <el-dialog
          :title="title"
          v-model="importTenantProjectListOpen"
          width="700px"
          append-to-body
        >
          <el-form
            :model="importTenantProjectListQueryParams"
            ref="importTenantProjectListQueryRef"
            :inline="true"
            label-width="68px"
          >
            <el-form-item label="项目名称" prop="projectName">
              <el-input
                v-model="importTenantProjectListQueryParams.projectName"
                placeholder="请输入项目名称"
                clearable
                style="width: 240px"
                @keyup.enter="importTenantProjectListHandleQuery"
              />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" icon="Search" @click="importTenantProjectListHandleQuery"
                >搜索</el-button
              >
              <el-button icon="Refresh" @click="importTenantProjectListResetQuery">重置</el-button>
            </el-form-item>
          </el-form>
          <!-- 表格数据 -->
          <el-table
            v-loading="importTenantProjectListLoading"
            :data="importTenantProjectList"
            @selection-change="importTenantProjectListHandleSelectionChange"
          >
            <el-table-column type="selection" width="55" align="center" />
            <el-table-column label="项目名称" prop="projectName" />
            <el-table-column prop="scope" label="作用域">
              <template #default="scope">
                <dict-tag :options="sys_scope" :value="scope.row.scope" />
              </template>
            </el-table-column>
          </el-table>
          <pagination
            v-show="importTenantProjectListTotal > 0"
            :total="importTenantProjectListTotal"
            v-model:page="importTenantProjectListQueryParams.pageNo"
            v-model:limit="importTenantProjectListQueryParams.pageSize"
            @pagination="getImportTenantProjectList"
          />
          <template #footer>
            <div class="dialog-footer">
              <el-button type="primary" @click="importTenantProjectListSubmitForm">确 定</el-button>
              <el-button @click="importTenantProjectListCancel">取 消</el-button>
            </div>
          </template>
        </el-dialog>
      </el-tab-pane>
      <!-- 用户权限选项卡 -->
      <el-tab-pane label="用户" name="user" class="tab-pane-content">
        <el-form
          :model="userQueryParams"
          ref="userQueryRef"
          v-show="userShowSearch"
          :inline="true"
          label-width="68px"
        >
          <el-form-item label="账号" prop="userName">
            <el-input
              v-model="userQueryParams.userName"
              placeholder="请输入账号"
              clearable
              style="width: 240px"
              @keyup.enter="userHandleQuery"
            />
          </el-form-item>
          <el-form-item label="姓名" prop="realName">
            <el-input
              v-model="userQueryParams.realName"
              placeholder="请输入姓名"
              clearable
              style="width: 240px"
              @keyup.enter="userHandleQuery"
            />
          </el-form-item>
          <el-form-item label="手机号" prop="mobile">
            <el-input
              v-model="userQueryParams.mobile"
              placeholder="请输入手机号"
              clearable
              style="width: 240px"
              @keyup.enter="userHandleQuery"
            />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="Search" @click="userHandleQuery">搜索</el-button>
            <el-button icon="Refresh" @click="userResetQuery">重置</el-button>
            <el-button type="info" plain icon="Upload" @click="handleImportTenantUserList"
              >导入</el-button
            >
          </el-form-item>
        </el-form>

        <!-- 表格数据 -->
        <el-table v-loading="userLoading" :data="tenantUserList">
          <el-table-column label="账号" prop="userName" />
          <el-table-column label="姓名" prop="realName" />
          <el-table-column label="昵称" prop="nickName" />
          <el-table-column label="邮箱" prop="email" />
          <el-table-column label="手机号" prop="mobile" />
          <el-table-column prop="gender" label="性别">
            <template #default="scope">
              <dict-tag :options="sys_gender" :value="scope.row.gender" />
            </template>
          </el-table-column>
          <el-table-column
            label="操作"
            align="center"
            class-name="small-padding fixed-width"
            width="160px"
          >
            <template #default="scope">
              <el-button link type="primary" icon="Edit" @click="openAssignRoleDialog(scope.row)"
                >分配角色</el-button
              >
              <el-button link type="primary" icon="Delete" @click="userHandleDelete(scope.row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>

        <pagination
          v-show="userTotal > 0"
          :total="userTotal"
          v-model:page="userQueryParams.pageNo"
          v-model:limit="userQueryParams.pageSize"
          @pagination="getUserList"
        />

        <!-- 用户导入（根据权限从用户池导入进来） -->
        <el-dialog
          :title="importUserTitle"
          v-model="importTenantUserListOpen"
          width="800px"
          append-to-body
        >
          <el-form
            :model="importTenantUserListQueryParams"
            ref="importTenantUserListQueryRef"
            v-show="importTenantUserListShowSearch"
            :inline="true"
            label-width="55px"
          >
            <el-form-item label="账号" prop="userName">
              <el-input
                v-model="importTenantUserListQueryParams.userName"
                placeholder="请输入账号"
                clearable
                style="width: 240px"
                @keyup.enter="importTenantUserListHandleQuery"
              />
            </el-form-item>
            <el-form-item label="姓名" prop="realName">
              <el-input
                v-model="importTenantUserListQueryParams.realName"
                placeholder="请输入姓名"
                clearable
                style="width: 240px"
                @keyup.enter="importTenantUserListHandleQuery"
              />
            </el-form-item>
            <el-form-item label="手机号" prop="mobile">
              <el-input
                v-model="importTenantUserListQueryParams.mobile"
                placeholder="请输入手机号"
                clearable
                style="width: 240px"
                @keyup.enter="importTenantUserListHandleQuery"
              />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" icon="Search" @click="importTenantUserListHandleQuery"
                >搜索</el-button
              >
              <el-button icon="Refresh" @click="importTenantUserListResetQuery">重置</el-button>
            </el-form-item>
          </el-form>
          <!-- 表格数据 -->
          <el-table
            v-loading="importTenantUserListLoading"
            :data="importTenantUserList"
            @selection-change="importTenantUserListHandleSelectionChange"
          >
            <el-table-column type="selection" width="55" align="center" />
            <el-table-column label="账号" prop="userName" />
            <el-table-column label="姓名" prop="realName" />
            <el-table-column label="昵称" prop="nickName" />
            <el-table-column label="邮箱" prop="email" />
            <el-table-column label="手机号" prop="mobile" />
            <el-table-column prop="gender" label="性别">
              <template #default="scope">
                <dict-tag :options="sys_gender" :value="scope.row.gender" />
              </template>
            </el-table-column>
          </el-table>
          <pagination
            v-show="importTenantUserListTotal > 0"
            :total="importTenantUserListTotal"
            v-model:page="importTenantUserListQueryParams.pageNo"
            v-model:limit="importTenantUserListQueryParams.pageSize"
            @pagination="getImportTenantUserList"
          />
          <template #footer>
            <div class="dialog-footer">
              <el-button type="primary" @click="importTenantUserListSubmitForm">确 定</el-button>
              <el-button @click="importTenantUserListCancel">取 消</el-button>
            </div>
          </template>
        </el-dialog>

        <!-- 用户分配角色弹窗 -->
        <el-dialog
          :title="assignRoleTitle"
          v-model="assignRoleDialogVisible"
          width="1100px"
          append-to-body
        >
          <!-- 弹窗内容：左侧可选角色 + 中间箭头 + 右侧已选角色 -->
          <div class="assign-role-container">
            <!-- 左侧：可选角色列表（带复选框） -->
            <div class="left-panel">
              <el-form
                :model="leftQuery"
                ref="leftQueryRef"
                :inline="true"
                label-width="68px"
                class="search-form"
              >
                <el-form-item label="角色名称">
                  <el-input
                    v-model="leftQuery.roleName"
                    placeholder="请输入角色名称"
                    clearable
                    @keyup.enter="getLeftRoleList"
                  />
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" icon="Search" @click="queryLeftRoleList"
                    >搜索</el-button
                  >
                  <el-button icon="Refresh" @click="resetLeftRoleQuery">重置</el-button>
                </el-form-item>
              </el-form>

              <el-table
                v-loading="leftLoading"
                :data="leftRoleList"
                @selection-change="handleLeftSelectionChange"
                border
              >
                <el-table-column type="selection" align="center" />
                <el-table-column label="角色名称" prop="roleName" />
                <el-table-column prop="roleType" label="角色类型">
                  <template #default="scope">
                    <dict-tag :options="sys_role_type" :value="scope.row.roleType" />
                  </template>
                </el-table-column>
                <el-table-column prop="scope" label="作用域">
                  <template #default="scope">
                    <dict-tag :options="sys_scope" :value="scope.row.scope" />
                  </template>
                </el-table-column>
              </el-table>

              <pagination
                v-show="leftTotal > 0"
                :total="leftTotal"
                v-model:page="leftQuery.pageNo"
                v-model:limit="leftQuery.pageSize"
                @pagination="getLeftRoleList"
              />
            </div>

            <!-- 中间：箭头按钮（带提示和高亮） -->
            <div class="center-panel">
              <div class="arrow-buttons-container">
                <!-- 向右箭头：添加到右侧 -->
                <el-tooltip content="添加选中角色到已选列表" placement="top">
                  <el-button
                    icon="ArrowRight"
                    @click="moveToRight"
                    :disabled="leftSelectedRoles.length === 0"
                    class="arrow-btn"
                  />
                </el-tooltip>

                <!-- 向左箭头：移除到左侧 -->
                <el-tooltip content="移除选中角色到可选列表" placement="top">
                  <el-button
                    icon="ArrowLeft"
                    @click="moveToLeft"
                    :disabled="rightSelectedRoles.length === 0"
                    class="arrow-btn"
                  />
                </el-tooltip>
              </div>
            </div>

            <!-- 右侧：已选角色列表（带复选框） -->
            <div class="right-panel">
              <div class="selected-title">已选角色（{{ rightRoleList.length }}个）</div>

              <el-form
                :model="rightQuery"
                ref="rightQueryRef"
                :inline="true"
                label-width="68px"
                class="search-form"
              >
                <el-form-item label="角色名称">
                  <el-input
                    v-model="rightQuery.roleName"
                    placeholder="请输入角色名称"
                    clearable
                    @keyup.enter="getRightRoleList"
                  />
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" icon="Search" @click="queryRightRoleList"
                    >搜索</el-button
                  >
                  <el-button icon="Refresh" @click="resetRightRoleQuery">重置</el-button>
                </el-form-item>
              </el-form>

              <el-table
                v-loading="rightLoading"
                :data="rightRoleList"
                @selection-change="handleRightSelectionChange"
                border
              >
                <el-table-column type="selection" align="center" />
                <el-table-column label="角色名称" prop="roleName" />
                <el-table-column prop="roleType" label="角色类型">
                  <template #default="scope">
                    <dict-tag :options="sys_role_type" :value="scope.row.roleType" />
                  </template>
                </el-table-column>
                <el-table-column prop="scope" label="作用域">
                  <template #default="scope">
                    <dict-tag :options="sys_scope" :value="scope.row.scope" />
                  </template>
                </el-table-column>
              </el-table>

              <pagination
                v-show="rightTotal > 0"
                :total="rightTotal"
                v-model:page="rightQuery.pageNo"
                v-model:limit="rightQuery.pageSize"
                @pagination="getRightRoleList"
              />
            </div>
          </div>

          <!-- 底部统一保存按钮 -->
          <template #footer>
            <div class="dialog-footer">
              <el-button @click="cancelAssignRole">取 消</el-button>
            </div>
          </template>
        </el-dialog>
      </el-tab-pane>
      <!-- 角色权限选项卡 -->
      <el-tab-pane label="角色" name="role" class="tab-pane-content">
        <el-form
          :model="roleQueryParams"
          ref="roleQueryRef"
          v-show="roleShowSearch"
          :inline="true"
          label-width="68px"
        >
          <el-form-item label="角色名称" prop="roleName">
            <el-input
              v-model="roleQueryParams.roleName"
              placeholder="请输入角色名称"
              clearable
              style="width: 240px"
              @keyup.enter="roleHandleQuery"
            />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="Search" @click="roleHandleQuery">搜索</el-button>
            <el-button icon="Refresh" @click="roleResetQuery">重置</el-button>
            <el-button type="info" plain icon="Upload" @click="handleImportTenantRoleList"
              >导入</el-button
            >
          </el-form-item>
        </el-form>

        <!-- 表格数据 -->
        <el-table v-loading="roleLoading" :data="tenantRoleList">
          <el-table-column label="角色名称" prop="roleName" />
          <el-table-column prop="scope" label="作用域">
            <template #default="scope">
              <dict-tag :options="sys_scope" :value="scope.row.scope" />
            </template>
          </el-table-column>
          <el-table-column prop="roleType" label="角色类型">
            <template #default="scope">
              <dict-tag :options="sys_role_type" :value="scope.row.roleType" />
            </template>
          </el-table-column>
          <el-table-column
            label="操作"
            align="center"
            class-name="small-padding fixed-width"
            width="160px"
          >
            <template #default="scope">
              <el-button link type="primary" icon="Edit" @click="handleFpMenu(scope.row)"
                >分配菜单</el-button
              >
              <el-button link type="primary" icon="Delete" @click="roleHandleDelete(scope.row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>

        <pagination
          v-show="roleTotal > 0"
          :total="roleTotal"
          v-model:page="roleQueryParams.pageNo"
          v-model:limit="roleQueryParams.pageSize"
          @pagination="getRoleList"
        />

        <!-- 角色配置-分配菜单弹出框 -->
        <el-dialog :title="fpMenuTitle" v-model="fpMenuOpen" width="500px" append-to-body>
          <!-- 权限分配区域 -->
          <div class="permission-section">
            <el-card header="分配菜单" class="mt-4">
              <el-tree
                ref="fpMenuRef"
                :data="fpMenuTree"
                :props="fpMenuProps"
                node-key="menuBizId"
                show-checkbox
                highlight-current
                :check-strictly="fpMenuIsCheckStrictly"
                :expand-on-click-node="false"
                class="permission-tree"
              >
                <template #default="{ node, data }">
                  <span class="custom-tree-node">
                    <span>{{ data.menuName }}</span>
                  </span>
                </template>
              </el-tree>

              <div class="tree-actions mt-4">
                <el-button type="primary" @click="saveFpMenuList">确定</el-button>
              </div>
            </el-card>
          </div>
        </el-dialog>

        <!-- 角色导入（根据权限从角色池导入进来） -->
        <el-dialog
          :title="importRoleTitle"
          v-model="importTenantRoleListOpen"
          width="800px"
          append-to-body
        >
          <el-form
            :model="importTenantRoleListQueryParams"
            ref="importTenantRoleListQueryRef"
            v-show="importTenantRoleListShowSearch"
            :inline="true"
            label-width="70px"
          >
            <el-form-item label="角色名称" prop="roleName">
              <el-input
                v-model="importTenantRoleListQueryParams.roleName"
                placeholder="请输入角色名称"
                clearable
                style="width: 240px"
                @keyup.enter="importTenantRoleListHandleQuery"
              />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" icon="Search" @click="importTenantRoleListHandleQuery"
                >搜索</el-button
              >
              <el-button icon="Refresh" @click="importTenantRoleListResetQuery">重置</el-button>
            </el-form-item>
          </el-form>
          <!-- 表格数据 -->
          <el-table
            v-loading="importTenantRoleListLoading"
            :data="importTenantRoleList"
            @selection-change="importTenantRoleListHandleSelectionChange"
          >
            <el-table-column type="selection" width="55" align="center" />
            <el-table-column label="角色名称" prop="roleName" />
            <el-table-column prop="scope" label="作用域">
              <template #default="scope">
                <dict-tag :options="sys_scope" :value="scope.row.scope" />
              </template>
            </el-table-column>
            <el-table-column prop="roleType" label="角色类型">
              <template #default="scope">
                <dict-tag :options="sys_role_type" :value="scope.row.roleType" />
              </template>
            </el-table-column>
          </el-table>
          <pagination
            v-show="importTenantRoleListTotal > 0"
            :total="importTenantRoleListTotal"
            v-model:page="importTenantRoleListQueryParams.pageNo"
            v-model:limit="importTenantRoleListQueryParams.pageSize"
            @pagination="getImportTenantRoleList"
          />
          <template #footer>
            <div class="dialog-footer">
              <el-button type="primary" @click="importTenantRoleListSubmitForm">确 定</el-button>
              <el-button @click="importTenantRoleListCancel">取 消</el-button>
            </div>
          </template>
        </el-dialog>
      </el-tab-pane>
      <!-- 菜单权限选项卡 -->
      <el-tab-pane label="菜单" name="menu" class="tab-pane-content">
        <el-form
          :model="menuQueryParams"
          ref="menuQueryRef"
          v-show="menuShowSearch"
          :inline="true"
          label-width="68px"
        >
          <el-form-item label="菜单名称" prop="menuName">
            <el-input
              v-model="menuQueryParams.menuName"
              placeholder="请输入菜单名称"
              clearable
              style="width: 240px"
              @keyup.enter="menuHandleQuery"
            />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="Search" @click="menuHandleQuery">搜索</el-button>
            <el-button icon="Refresh" @click="menuResetQuery">重置</el-button>
            <el-button type="info" plain icon="Upload" @click="handleImportTenantMenuList"
              >导入</el-button
            >
          </el-form-item>
        </el-form>

        <el-row :gutter="10" class="mb8">
          <el-col :span="1.5">
            <el-button type="info" plain icon="Sort" @click="toggleExpandAll">展开/折叠</el-button>
          </el-col>
          <right-toolbar
            v-model:showSearch="menuShowSearch"
            @queryTable="getMenuList"
          ></right-toolbar>
        </el-row>

        <el-table
          v-if="refreshTable"
          v-loading="menuLoading"
          :data="menuList"
          row-key="menuBizId"
          :default-expand-all="isExpandAll"
          :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
        >
          <el-table-column
            prop="menuName"
            label="菜单名称"
            :show-overflow-tooltip="true"
          ></el-table-column>
          <el-table-column prop="icon" label="图标" align="center">
            <template #default="scope">
              <svg-icon :icon-class="scope.row.icon" />
            </template>
          </el-table-column>
          <el-table-column prop="menuType" label="菜单类型">
            <template #default="scope">
              <dict-tag :options="sys_menu_type" :value="scope.row.menuType" />
            </template>
          </el-table-column>
          <el-table-column prop="scope" label="作用域">
            <template #default="scope">
              <dict-tag :options="sys_scope" :value="scope.row.scope" />
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
            <template #default="scope">
              <el-button
                link
                type="primary"
                icon="Delete"
                @click="handleDelete(scope.row)"
                v-if="scope.row.parentBizId === '0'"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>

        <!-- 菜单导入（根据权限从菜单池导入进来） -->
        <el-dialog
          :title="importMenuTitle"
          v-model="importTenantMenuListOpen"
          width="500px"
          append-to-body
        >
          <!-- 权限分配区域 -->
          <div class="permission-section">
            <el-card header="导入菜单" class="mt-4">
              <el-tree
                ref="treeRef"
                :data="menuTree"
                :props="defaultProps"
                node-key="menuBizId"
                show-checkbox
                highlight-current
                :check-strictly="isCheckStrictly"
                :expand-on-click-node="false"
                class="permission-tree"
              >
                <template #default="{ node, data }">
                  <span class="custom-tree-node">
                    <span>{{ data.menuName }}</span>
                  </span>
                </template>
              </el-tree>

              <div class="tree-actions mt-4">
                <el-button type="primary" @click="saveImportSelectedMenuList">确定</el-button>
              </div>
            </el-card>
          </div>
        </el-dialog>
      </el-tab-pane>
      <el-tab-pane label="部门" name="dept" class="tab-pane-content">
        <DeptList :tenantBizId="route.query.tenantBizId" :activeTab="activeTab" />
      </el-tab-pane>
      <el-tab-pane label="保险产品" name="insurance" class="tab-pane-content">
        <InsuranceList :tenantBizId="route.query.tenantBizId" :activeTab="activeTab" />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup name="TenantPermission">
import {
  listTenantProject,
  listImportTenantProject,
  addImportTenantProjectList,
  delRelTenantProject,
  listTenantUser,
  listImportTenantUser,
  addImportTenantUserList,
  delRelTenantUser,
  listTenantRole,
  delRelTenantRole,
  addImportTenantRoleList,
  listImportTenantRole,
  listMenu,
  getMenuTree,
  getImportSelectedMenuList,
  addImportTenantMenuList,
  listLeftRole,
  listRightRole,
  addRightRoleList,
  delRightRoleList,
  getFpMenuTree,
  getSelectedFpMenuList,
  addFpMenuList
} from '@/api/system/tenantPermission'
import DeptList from './deptList.vue'
import InsuranceList from './insuranceList.vue'
import { ref } from 'vue'
import useUserStore from '@/store/modules/user'

const router = useRouter()
const userStore = useUserStore()

const { proxy } = getCurrentInstance()
const {
  sys_status,
  sys_scope,
  sys_no_yes,
  sys_user_status,
  sys_gender,
  sys_role_type,
  sys_menu_type
} = proxy.useDict(
  'sys_status',
  'sys_scope',
  'sys_no_yes',
  'sys_user_status',
  'sys_gender',
  'sys_role_type',
  'sys_menu_type'
)

const route = useRoute()
const activeTab = ref('project')
const refreshTable = ref(true)

const tenantProjectList = ref([])
const importTenantProjectList = ref([])
const tenantUserList = ref([])
const importTenantUserList = ref([])
const tenantRoleList = ref([])
const importTenantRoleList = ref([])
const menuList = ref([])
const isExpandAll = ref(false)
const showSearch = ref(true)
const userShowSearch = ref(true)
const importTenantUserListShowSearch = ref(true)
const roleShowSearch = ref(true)
const importTenantRoleListShowSearch = ref(true)
const menuShowSearch = ref(true)
const loading = ref(true)
const importTenantProjectListLoading = ref(true)
const userLoading = ref(true)
const importTenantUserListLoading = ref(true)
const roleLoading = ref(true)
const importTenantRoleListLoading = ref(true)
const menuLoading = ref(true)
const total = ref(0)
const importTenantProjectListTotal = ref(0)
const userTotal = ref(0)
const importTenantUserListTotal = ref(0)
const roleTotal = ref(0)
const importTenantRoleListTotal = ref(0)
const title = ref('')
const importUserTitle = ref('')
const importRoleTitle = ref('')
const importMenuTitle = ref('')
const importTenantProjectListOpen = ref(false)
const importTenantUserListOpen = ref(false)
const importTenantRoleListOpen = ref(false)
const importTenantMenuListOpen = ref(false)
const importTenantProjectListIds = ref([])
const importTenantProjectListNames = ref([])
const importTenantUserListIds = ref([])
const importTenantUserListNames = ref([])
const importTenantRoleListIds = ref([])
const importTenantRoleListNames = ref([])

// 菜单树数据（直接从接口获取树形结构）
const menuTree = ref([])
// 树组件引用
const treeRef = ref(null)
// 添加响应式变量控制严格模式
const isCheckStrictly = ref(false) // 默认关闭严格模式（启用联动）
// 树形配置
const defaultProps = {
  children: 'children',
  label: 'menuName'
}

const data = reactive({
  form: {},
  queryParams: {
    pageNo: 1,
    pageSize: 10,
    tenantBizId: route.query.tenantBizId,
    projectName: undefined
  },
  importTenantProjectListQueryParams: {
    pageNo: 1,
    pageSize: 10,
    tenantBizId: route.query.tenantBizId,
    projectName: undefined
  },
  userQueryParams: {
    pageNo: 1,
    pageSize: 10,
    tenantBizId: route.query.tenantBizId,
    userName: undefined,
    realName: undefined,
    mobile: undefined
  },
  importTenantUserListQueryParams: {
    pageNo: 1,
    pageSize: 10,
    tenantBizId: route.query.tenantBizId,
    userName: undefined,
    realName: undefined,
    mobile: undefined
  },
  roleQueryParams: {
    pageNo: 1,
    pageSize: 10,
    tenantBizId: route.query.tenantBizId,
    roleName: undefined
  },
  importTenantRoleListQueryParams: {
    pageNo: 1,
    pageSize: 10,
    tenantBizId: route.query.tenantBizId,
    roleName: undefined
  },
  menuQueryParams: {
    pageNo: 1,
    pageSize: 999999,
    tenantBizId: route.query.tenantBizId,
    menuName: undefined
  }
})
const {
  queryParams,
  importTenantProjectListQueryParams,
  userQueryParams,
  importTenantUserListQueryParams,
  roleQueryParams,
  importTenantRoleListQueryParams,
  menuQueryParams,
  form,
  rules
} = toRefs(data)

//========项目-列表逻辑=========
/** 查询租户项目关系列表 */
function getList() {
  loading.value = true
  listTenantProject(queryParams.value).then(response => {
    tenantProjectList.value = response.data.records
    total.value = response.data.total
    loading.value = false
  })
}
/** 搜索 */
function handleQuery() {
  queryParams.value.pageNo = 1
  getList()
}
/** 项目列表-重置按钮操作 */
function resetQuery() {
  proxy.resetForm('queryRef')
  handleQuery()
}
/** 删除租户项目关系 */
function handleDelete(row) {
  //租户和项目关系表主键id
  const relTenantProjectId = row.id
  const projectName = row.projectName
  proxy.$modal
    .confirm('是否确认删除项目名称为"' + projectName + '"的租户和项目关系的数据项?')
    .then(function () {
      return delRelTenantProject(relTenantProjectId)
    })
    .then(() => {
      getList()
      proxy.$modal.msgSuccess('删除成功')
    })
    .catch(() => {})
}

/** 项目分配权限 */
function handlePermission(row) {
  router.push(
    `/system/project/permission?tenantBizId=` +
      route.query.tenantBizId +
      `&projectBizId=` +
      row.projectBizId
  )
}
//========项目-列表结束=========

//========项目-导入逻辑开始=========
/** 查询导入租户项目关系列表 */
function getImportTenantProjectList() {
  importTenantProjectListLoading.value = true
  listImportTenantProject(importTenantProjectListQueryParams.value).then(response => {
    importTenantProjectList.value = response.data.records
    importTenantProjectListTotal.value = response.data.total
    importTenantProjectListLoading.value = false
  })
}
/** 项目列表-导入项目 */
function handleImportTenantProjectList() {
  getImportTenantProjectList()
  importTenantProjectListOpen.value = true
  title.value = '导入项目'
}
/** 搜索按钮操作 */
function importTenantProjectListHandleQuery() {
  importTenantProjectListQueryParams.value.pageNo = 1
  getImportTenantProjectList()
}
/** 重置按钮操作 */
function importTenantProjectListResetQuery() {
  proxy.resetForm('importTenantProjectListQueryRef')
  importTenantProjectListHandleQuery()
}
/** 多选框选中数据 */
function importTenantProjectListHandleSelectionChange(selection) {
  importTenantProjectListIds.value = selection.map(item => item.projectBizId)
  importTenantProjectListNames.value = selection.map(item => item.projectName)
}
/** 导入项目提交 */
function importTenantProjectListSubmitForm() {
  const importTenantProjectListIdList = importTenantProjectListIds.value
  const importTenantProjectListNameList = importTenantProjectListNames.value
  const tenantBizId = route.query.tenantBizId

  proxy.$modal
    .confirm('是否确认导入项目名称为"' + importTenantProjectListNameList + '"的数据项?')
    .then(function () {
      return addImportTenantProjectList(importTenantProjectListIdList, tenantBizId)
    })
    .then(() => {
      importTenantProjectListOpen.value = false
      getList()
      proxy.$modal.msgSuccess('导入成功')
    })
    .catch(() => {})
}
/** 导入项目取消 */
function importTenantProjectListCancel() {
  importTenantProjectListOpen.value = false
  proxy.resetForm('importTenantProjectListQueryRef')
}
//========项目-导入逻辑结束=========

//========用户-列表逻辑开始=========
/** 查询租户用户关系列表 */
function getUserList() {
  userLoading.value = true
  listTenantUser(userQueryParams.value).then(response => {
    tenantUserList.value = response.data.records
    userTotal.value = response.data.total
    userLoading.value = false
  })
}
/** 用户列表-搜索 */
function userHandleQuery() {
  userQueryParams.value.pageNo = 1
  getUserList()
}
/** 用户列表-重置按钮操作 */
function userResetQuery() {
  proxy.resetForm('userQueryRef')
  userHandleQuery()
}
/** 删除租户用户关系 */
function userHandleDelete(row) {
  //租户和用户关系表主键id
  const relTenantUserId = row.id
  const userName = row.userName
  proxy.$modal
    .confirm('是否确认删除用户账号为"' + userName + '"的租户和用户关系的数据项?')
    .then(function () {
      return delRelTenantUser(relTenantUserId)
    })
    .then(() => {
      getUserList()
      proxy.$modal.msgSuccess('删除成功')
    })
    .catch(() => {})
}
//========用户-列表逻辑结束=========

//========用户-导入逻辑开始=========
/** 用户列表-导入-查询导入租户用户关系列表 */
function getImportTenantUserList() {
  importTenantUserListLoading.value = true
  listImportTenantUser(importTenantUserListQueryParams.value).then(response => {
    importTenantUserList.value = response.data.records
    importTenantUserListTotal.value = response.data.total
    importTenantUserListLoading.value = false
  })
}
/** 用户列表-导入用户 */
function handleImportTenantUserList() {
  getImportTenantUserList()
  importTenantUserListOpen.value = true
  importUserTitle.value = '导入用户'
}
/** 用户列表-导入-搜索按钮操作 */
function importTenantUserListHandleQuery() {
  importTenantUserListQueryParams.value.pageNo = 1
  getImportTenantUserList()
}
/** 用户列表-导入-重置按钮操作 */
function importTenantUserListResetQuery() {
  proxy.resetForm('importTenantUserListQueryRef')
  importTenantUserListHandleQuery()
}
/** 用户列表-导入-多选框选中数据 */
function importTenantUserListHandleSelectionChange(selection) {
  importTenantUserListIds.value = selection.map(item => item.userBizId)
  importTenantUserListNames.value = selection.map(item => item.userName)
}
/** 用户列表-导入-导入用户提交 */
function importTenantUserListSubmitForm() {
  const importTenantUserListIdList = importTenantUserListIds.value
  const importTenantUserListNameList = importTenantUserListNames.value
  const tenantBizId = route.query.tenantBizId

  proxy.$modal
    .confirm('是否确认导入用户账号为"' + importTenantUserListNameList + '"的数据项?')
    .then(function () {
      return addImportTenantUserList(importTenantUserListIdList, tenantBizId)
    })
    .then(() => {
      importTenantUserListOpen.value = false
      getUserList()
      proxy.$modal.msgSuccess('导入成功')
    })
    .catch(() => {})
}
/** 用户列表-导入-取消 */
function importTenantUserListCancel() {
  importTenantUserListOpen.value = false
  proxy.resetForm('importTenantUserListQueryRef')
}
//========用户-导入逻辑结束=========

//========角色-列表逻辑开始=========
/** 查询租户角色关系列表 */
function getRoleList() {
  roleLoading.value = true
  listTenantRole(roleQueryParams.value).then(response => {
    tenantRoleList.value = response.data.records
    roleTotal.value = response.data.total
    roleLoading.value = false
  })
}
/** 角色列表-搜索 */
function roleHandleQuery() {
  roleQueryParams.value.pageNo = 1
  getRoleList()
}
/** 角色列表-重置按钮操作 */
function roleResetQuery() {
  proxy.resetForm('roleQueryRef')
  roleHandleQuery()
}
/** 删除租户角色关系 */
function roleHandleDelete(row) {
  //租户和角色关系表主键id
  const relTenantRoleId = row.id
  const roleName = row.roleName
  proxy.$modal
    .confirm('是否确认删除角色名称为"' + roleName + '"的租户和角色关系的数据项?')
    .then(function () {
      return delRelTenantRole(relTenantRoleId)
    })
    .then(() => {
      getRoleList()
      proxy.$modal.msgSuccess('删除成功')
    })
    .catch(() => {})
}
//========角色-列表逻辑结束=========

//========角色-导入逻辑开始=========
/** 角色列表-导入-查询导入租户角色关系列表 */
function getImportTenantRoleList() {
  importTenantRoleListLoading.value = true
  listImportTenantRole(importTenantRoleListQueryParams.value).then(response => {
    importTenantRoleList.value = response.data.records
    importTenantRoleListTotal.value = response.data.total
    importTenantRoleListLoading.value = false
  })
}
/** 角色列表-导入角色 */
function handleImportTenantRoleList() {
  getImportTenantRoleList()
  importTenantRoleListOpen.value = true
  importRoleTitle.value = '导入角色'
}
/** 角色列表-导入-搜索按钮操作 */
function importTenantRoleListHandleQuery() {
  importTenantRoleListQueryParams.value.pageNo = 1
  getImportTenantRoleList()
}
/** 角色列表-导入-重置按钮操作 */
function importTenantRoleListResetQuery() {
  proxy.resetForm('importTenantRoleListQueryRef')
  importTenantRoleListHandleQuery()
}
/** 角色列表-导入-多选框选中数据 */
function importTenantRoleListHandleSelectionChange(selection) {
  importTenantRoleListIds.value = selection.map(item => item.roleBizId)
  importTenantRoleListNames.value = selection.map(item => item.roleName)
}
/** 角色列表-导入-导入角色提交 */
function importTenantRoleListSubmitForm() {
  const importTenantRoleListIdList = importTenantRoleListIds.value
  const importTenantRoleListNameList = importTenantRoleListNames.value
  const tenantBizId = route.query.tenantBizId

  proxy.$modal
    .confirm('是否确认导入角色名称为"' + importTenantRoleListNameList + '"的数据项?')
    .then(function () {
      return addImportTenantRoleList(importTenantRoleListIdList, tenantBizId)
    })
    .then(() => {
      importTenantRoleListOpen.value = false
      getRoleList()
      proxy.$modal.msgSuccess('导入成功')
    })
    .catch(() => {})
}
/** 角色列表-导入-取消 */
function importTenantRoleListCancel() {
  importTenantRoleListOpen.value = false
  proxy.resetForm('importTenantRoleListQueryRef')
}
//========角色-导入逻辑结束=========

//========菜单-列表逻辑结束=========
/** 查询菜单列表 */
function getMenuList() {
  menuLoading.value = true
  listMenu(menuQueryParams.value).then(response => {
    menuList.value = proxy.handleTree(response.data.records, 'menuBizId')
    menuLoading.value = false
  })
}
/** 菜单展开/折叠操作 */
function toggleExpandAll() {
  refreshTable.value = false
  isExpandAll.value = !isExpandAll.value
  nextTick(() => {
    refreshTable.value = true
  })
}
/** 菜单列表-搜索 */
function menuHandleQuery() {
  menuQueryParams.value.pageNo = 1
  getMenuList()
}
/** 菜单列表-重置按钮操作 */
function menuResetQuery() {
  proxy.resetForm('menuQueryRef')
  menuHandleQuery()
}
//========菜单-列表逻辑结束=========

//========菜单-导入逻辑开始=========
/** 菜单列表-导入菜单 */
function handleImportTenantMenuList() {
  loadMenuTree()
  importTenantMenuListOpen.value = true
  importMenuTitle.value = '导入菜单'
}
// 加载菜单树
const loadMenuTree = async () => {
  try {
    const res = await getMenuTree(route.query.tenantBizId)
    menuTree.value = res.data // 直接使用后端返回的树形结构
    loadImportSelectedMenuList() // 加载选中的菜单列表，更新树勾选
  } catch (error) {
    console.error('加载菜单树失败:', error)
    proxy.$modal.msgError('菜单加载失败')
  }
}
// 修改加载选中菜单列表的逻辑
const loadImportSelectedMenuList = async () => {
  try {
    const res = await getImportSelectedMenuList(route.query.tenantBizId)
    const targetKeys = res.data || []

    // 开启严格模式（禁用联动）
    isCheckStrictly.value = true

    // 等待DOM更新（确保严格模式生效）
    await nextTick()

    //清空并设置选中状态（此时不会触发联动）
    if (treeRef.value) {
      treeRef.value.setCheckedKeys([])
      treeRef.value.setCheckedKeys(targetKeys)
    }

    //等待选中状态渲染完成
    await nextTick()

    //关闭严格模式（恢复联动）
    isCheckStrictly.value = false
  } catch (error) {
    console.error('加载选中的菜单列表失败:', error)
    proxy.$modal.msgError('加载选中的菜单列表失败')
    // 异常时也要恢复严格模式状态
    isCheckStrictly.value = false
  }
}
// 保存
const saveImportSelectedMenuList = async () => {
  try {
    // 获取当前选中的节点
    const checkedKeys = treeRef.value.getCheckedKeys()
    // 获取半选中的节点（下级勾选，上级没勾选，把上级没勾选带出来）
    const halfCheckedKeys = treeRef.value.getHalfCheckedKeys()

    // 合并选中节点（根据业务需求选择是否包含半选节点）
    const allCheckedKeys = [...checkedKeys, ...halfCheckedKeys]

    await addImportTenantMenuList({
      tenantBizId: route.query.tenantBizId,
      menuBizIdList: allCheckedKeys
    })
    getMenuList()
    importTenantMenuListOpen.value = false
    proxy.$modal.msgSuccess('更新成功')
  } catch (error) {
    console.error('更新失败:', error)
    proxy.$modal.msgError('更新失败')
  }
}
//========菜单-导入逻辑结束=========

//========分配角色-导入逻辑开始=========
// 弹窗显隐与标题
const assignRoleDialogVisible = ref(false)
const assignRoleTitle = ref('分配角色')

// 左侧可选角色（查询参数 + 列表数据）
const leftQuery = reactive({
  pageNo: 1,
  pageSize: 10,
  tenantBizId: route.query.tenantBizId,
  userBizId: '',
  roleName: ''
})
const leftRoleList = ref([])
const leftLoading = ref(false)
const leftTotal = ref(0)
const leftSelectedRoles = ref([]) // 左侧选中的角色

// 右侧可选角色（查询参数 + 列表数据）
const rightQuery = reactive({
  pageNo: 1,
  pageSize: 10,
  tenantBizId: route.query.tenantBizId,
  userBizId: '',
  roleName: ''
})
// 右侧已选角色（列表数据 + 选中项）
const rightRoleList = ref([])
const rightLoading = ref(false)
const rightTotal = ref(0)
const rightSelectedRoles = ref([]) // 右侧选中的角色

/** 打开分配角色弹窗 */
function openAssignRoleDialog(userRow) {
  // 初始化状态
  leftQuery.userBizId = userRow.userBizId
  rightQuery.userBizId = userRow.userBizId
  leftSelectedRoles.value = []
  rightSelectedRoles.value = []
  leftRoleList.value = []
  rightRoleList.value = []

  // 加载左侧待选角色分页列表（排除已选）
  getLeftRoleList()
  // 加载右侧已选角色分页列表
  getRightRoleList()

  // 显示弹窗
  assignRoleDialogVisible.value = true
}

/** 获取左侧待选角色分页列表（排除已选角色） */
function getLeftRoleList() {
  leftLoading.value = true
  listLeftRole({
    ...leftQuery
  })
    .then(res => {
      leftRoleList.value = res.data.records
      leftTotal.value = res.data.total
      leftLoading.value = false
    })
    .catch(() => {
      leftLoading.value = false
    })
}

/** 获取右侧已选角色分页列表 */
function getRightRoleList() {
  rightLoading.value = true
  listRightRole({
    ...rightQuery
  })
    .then(res => {
      rightRoleList.value = res.data.records
      rightTotal.value = res.data.total
      rightLoading.value = false
    })
    .catch(() => {
      rightLoading.value = false
    })
}

/** 左侧表格选中事件 */
function handleLeftSelectionChange(selection) {
  leftSelectedRoles.value = selection
}

/** 右侧表格选中事件 */
function handleRightSelectionChange(selection) {
  rightSelectedRoles.value = selection
}

/** 左侧搜索 */
function queryLeftRoleList() {
  leftQuery.pageNo = 1
  getLeftRoleList()
}

/** 重置左侧搜索 */
function resetLeftRoleQuery() {
  proxy.resetForm('leftQueryRef')
  leftQuery.pageNo = 1
  leftQuery.roleName = ''
  getLeftRoleList()
}

/** 右侧搜索 */
function queryRightRoleList() {
  rightQuery.pageNo = 1
  getRightRoleList()
}

/** 重置右侧搜索 */
function resetRightRoleQuery() {
  proxy.resetForm('rightQueryRef')
  rightQuery.pageNo = 1
  rightQuery.roleName = ''
  getRightRoleList()
}

/** 向右箭头：将左侧选中角色移到右侧-调接口添加关系 */
function moveToRight() {
  const roleBizIdList = []
  const leftRoleNameList = []
  leftSelectedRoles.value.forEach(r => {
    roleBizIdList.push(r.roleBizId)
    leftRoleNameList.push(r.roleName)
  })
  const data = {
    tenantBizId: route.query.tenantBizId,
    userBizId: leftQuery.userBizId,
    roleBizIdList: roleBizIdList
  }
  proxy.$modal
    .confirm('是否向右移动角色名称为"' + leftRoleNameList + '"的数据项?')
    .then(function () {
      return addRightRoleList(data)
    })
    .then(() => {
      // 加载左侧待选角色分页列表（排除已选）
      getLeftRoleList()
      // 加载右侧已选角色分页列表
      getRightRoleList()
      proxy.$modal.msgSuccess('添加成功')
    })
    .catch(() => {})
}

/** 向左箭头：将右侧选中角色移除左侧，删除关系*/
function moveToLeft() {
  const roleBizIdList = []
  const rightRoleNameList = []
  rightSelectedRoles.value.forEach(r => {
    roleBizIdList.push(r.roleBizId)
    rightRoleNameList.push(r.roleName)
  })
  const data = {
    tenantBizId: route.query.tenantBizId,
    userBizId: rightQuery.userBizId,
    roleBizIdList: roleBizIdList
  }
  proxy.$modal
    .confirm('是否向左移除角色名称为"' + rightRoleNameList + '"的数据项?')
    .then(function () {
      return delRightRoleList(data)
    })
    .then(() => {
      // 加载左侧待选角色分页列表（排除已选）
      getLeftRoleList()
      // 加载右侧已选角色分页列表
      getRightRoleList()
      proxy.$modal.msgSuccess('移除成功')
    })
    .catch(() => {})
}

/** 底部保存按钮：统一提交所有变更 */
function saveAllRoles() {
  // 计算需要添加和移除的角色ID
  const newRoleIds = rightRoleList.value.map(role => role.roleId)
  const oldRoleIds = originRightRoles.value.map(role => role.roleId)

  // 需要添加的角色（新选的）
  const addIds = newRoleIds.filter(id => !oldRoleIds.includes(id))
  // 需要移除的角色（取消选中的）
  const removeIds = oldRoleIds.filter(id => !newRoleIds.includes(id))

  // 调用接口统一保存（一次请求）
  proxy.$modal
    .confirm(`确认要分配 ${newRoleIds.length} 个角色吗？`)
    .then(() => {
      return assignUserRole({
        userId: leftQuery.userId,
        addRoleIds: addIds,
        removeRoleIds: removeIds
      })
    })
    .then(() => {
      proxy.$modal.msgSuccess('角色分配成功')
      assignRoleDialogVisible.value = false
      // 可触发父组件刷新用户列表
      // emit('refreshUserList')
    })
}
/** 取消操作 */
function cancelAssignRole() {
  assignRoleDialogVisible.value = false
}
//========分配角色-导入逻辑结束=========

//========分配菜单-导入逻辑开始=========
// 菜单树数据（直接从接口获取树形结构）
const fpMenuTree = ref([])
// 树组件引用
const fpMenuRef = ref(null)
// 添加响应式变量控制严格模式
const fpMenuIsCheckStrictly = ref(false) // 默认关闭严格模式（启用联动）
// 树形配置
const fpMenuProps = {
  children: 'children',
  label: 'menuName'
}
const getSelectedFpMenuListParams = reactive({
  tenantBizId: route.query.tenantBizId,
  roleBizId: ''
})
const addFpMenuParams = reactive({
  roleBizId: ''
})
const getFpMenuTreeParams = reactive({
  pageNo: 1,
  pageSize: 10,
  tenantBizId: route.query.tenantBizId,
  menuName: undefined
})
const fpMenuTitle = ref('')
const fpMenuOpen = ref(false)

/** 分配菜单弹出 */
function handleFpMenu(row) {
  addFpMenuParams.roleBizId = row.roleBizId
  getSelectedFpMenuListParams.roleBizId = row.roleBizId
  loadFpMenuTree()
  fpMenuOpen.value = true
  fpMenuTitle.value = '分配菜单'
}
// 加载菜单树
const loadFpMenuTree = async () => {
  try {
    const res = await getFpMenuTree({ ...getFpMenuTreeParams })
    fpMenuTree.value = res.data // 直接使用后端返回的树形结构
    loadSelectedFpMenuList() // 加载选中的菜单列表，更新树勾选
  } catch (error) {
    console.error('加载菜单树失败:', error)
    proxy.$modal.msgError('菜单加载失败')
  }
}
// 修改加载选中菜单列表的逻辑
const loadSelectedFpMenuList = async () => {
  try {
    const res = await getSelectedFpMenuList({ ...getSelectedFpMenuListParams })
    const targetKeys = res.data || []

    // 开启严格模式（禁用联动）
    fpMenuIsCheckStrictly.value = true

    // 等待DOM更新（确保严格模式生效）
    await nextTick()

    //清空并设置选中状态（此时不会触发联动）
    if (fpMenuRef.value) {
      fpMenuRef.value.setCheckedKeys([])
      fpMenuRef.value.setCheckedKeys(targetKeys)
    }

    //等待选中状态渲染完成
    await nextTick()

    //关闭严格模式（恢复联动）
    fpMenuIsCheckStrictly.value = false
  } catch (error) {
    console.error('加载选中的菜单列表失败:', error)
    proxy.$modal.msgError('加载选中的菜单列表失败')
    // 异常时也要恢复严格模式状态
    fpMenuIsCheckStrictly.value = false
  }
}
// 保存
const saveFpMenuList = async () => {
  try {
    // 获取当前选中的节点
    const checkedKeys = fpMenuRef.value.getCheckedKeys()
    // 获取半选中的节点（下级勾选，上级没勾选，把上级没勾选带出来）
    const halfCheckedKeys = fpMenuRef.value.getHalfCheckedKeys()

    // 合并选中节点（根据业务需求选择是否包含半选节点）
    const allCheckedKeys = [...checkedKeys, ...halfCheckedKeys]

    await addFpMenuList({
      tenantBizId: route.query.tenantBizId,
      roleBizId: addFpMenuParams.roleBizId,
      menuBizIdList: allCheckedKeys
    })

    getRoleList()
    fpMenuOpen.value = false
    proxy.$modal.msgSuccess('更新成功')
  } catch (error) {
    console.error('更新失败:', error)
    proxy.$modal.msgError('更新失败')
  }
}
//========分配菜单-导入逻辑结束=========

const handleTabChange = tabName => {
  console.log('切换到:', tabName)
  if (tabName === 'project') {
    //项目tab获取项目列表数据
    getList()
  } else if (tabName === 'user') {
    //用户tab获取用户列表数据
    getUserList()
  } else if (tabName === 'role') {
    //用户tab获取角色列表数据
    getRoleList()
  } else if (tabName === 'menu') {
    //用户tab获取菜单树数据
    getMenuList()
  }
}
const handleBack = () => {
  router.go(-1)
}
getList()
</script>

<style scoped>
/* 全局容器 */
.app-container {
  padding: 20px;
  background-color: #f5f7fa;
  min-height: calc(100vh - 60px); /* 适配布局 */
}

/* 自定义选项卡：核心样式 */
.custom-tabs {
  --active-tab-color: #fff; /* 激活选项卡文字颜色 */
  --active-tab-bg: #409eff; /* 激活选项卡背景色 */
  --inactive-tab-color: #606266; /* 未激活文字颜色 */
  --inactive-tab-bg: #f5f7fa; /* 未激活背景色 */
  --border-color: #dcdfe6; /* 边框颜色 */
  --radius: 8px; /* 圆角 */
  width: 100%;
}

/* 选项卡头部：消除默认样式，重构凹陷效果 */
::v-deep .el-tabs__header {
  line-height: 1; /* 重置行高，避免影响高度计算 */
  padding: 0; /* 清除默认内边距 */
}

/* 选项卡导航容器：核心凹陷逻辑 */
::v-deep .el-tabs__nav {
  display: flex;
  margin: 0; /* 清除默认 margin */
  border-bottom: 1px solid var(--border-color); /* 底部边框 */
}

/* 选项卡 item 基础样式 */
::v-deep .el-tabs__item {
  position: relative;
  padding: 12px 24px;
  margin-right: 0; /* 清除默认间距 */
  font-size: 14px;
  color: var(--inactive-tab-color);
  background-color: var(--inactive-tab-bg);
  border: 1px solid var(--border-color);
  border-bottom: none; /* 隐藏底部边框，通过父容器 border 实现分割 */
  cursor: pointer;
  transition: all 0.3s ease;
}

/* 激活态：凹陷 + 高亮 */
::v-deep .el-tabs__item.is-active {
  color: var(--active-tab-color);
  background-color: var(--active-tab-bg);
  /* 上、左、右边框 + 底部无边框，模拟“凹陷” */
  border: 1px solid var(--border-color);
  border-bottom-color: var(--active-tab-bg); /* 与背景色一致，视觉上“凹陷” */
  /* 调整层级，避免底部边框遮挡 */
  z-index: 1;
  /* 细微阴影增强立体 */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* 未激活态：悬浮效果 */
::v-deep .el-tabs__item:not(.is-active):hover {
  color: #409eff;
  background-color: #eaf2ff;
}

/* 左侧边框处理（仅第一个 tab 左侧圆角） */
::v-deep .el-tabs__item:first-child {
  border-top-left-radius: var(--radius);
}

/* 右侧边框处理（仅最后一个 tab 右侧圆角） */
::v-deep .el-tabs__item:last-child {
  border-top-right-radius: var(--radius);
}

/* 激活态：覆盖父容器的底部边框，实现“凹陷” */
::v-deep .el-tabs__item.is-active::before {
  content: '';
  position: absolute;
  bottom: -1px; /* 覆盖父容器的 border-bottom */
  left: 0;
  width: 100%;
  height: 1px;
  background-color: var(--active-tab-bg); /* 与激活态背景一致 */
}

/* 内容区域：和选项卡无缝衔接 */
::v-deep .el-tabs__content {
  padding: 20px;
  background-color: #fff;
  border: 1px solid var(--border-color);
  border-top: none; /* 消除顶部边框，与选项卡衔接 */
  border-bottom-left-radius: var(--radius);
  border-bottom-right-radius: var(--radius);
}

/* 空数据提示 */
.empty-tip {
  text-align: center;
  padding: 40px 0;
  color: #909399;
}

.permission-section {
  margin-top: 20px;
}

.permission-tree {
  max-height: 500px;
  overflow-y: auto;
  padding: 10px;
  border: 1px solid #ebeef5;
  border-radius: 4px;
}

.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}

.perm-tag {
  margin-left: 10px;
  padding: 0 5px;
  background-color: #ecf5ff;
  color: #409eff;
  border-radius: 3px;
  font-size: 12px;
}

.tree-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

/* 分配角色弹窗布局 */
.assign-role-container {
  display: flex;
  height: 450px;
  padding: 15px 0;
  box-sizing: border-box;
}

/* 左侧面板 */
.left-panel {
  flex: 1;
  height: 100%;
  overflow: auto;
  border: 1px solid #e5e7eb;
  border-radius: 4px;
  padding: 15px;
  background-color: #fff;
}

/* 搜索表单样式 */
.search-form {
  margin-bottom: 15px;
  padding-bottom: 10px;
  border-bottom: 1px dashed #f0f0f0;
}

/* 中间箭头区域 */
.center-panel {
  width: 60px;
  display: flex;
  flex-direction: column;
  justify-content: center; /* 垂直居中 */
  align-items: center; /* 水平居中 */
  height: 100%;
  padding: 0 10px;
}

.arrow-buttons-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: center; /* 确保按钮水平居中 */
}
/* 箭头按钮样式（基础 + 高亮） */
.arrow-btn {
  width: 36px;
  height: 36px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #409eff;
  border: none;
  color: white;
  font-size: 16px;
  border-radius: 50%;
  transition: all 0.2s ease;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.arrow-btn {
  display: inline-flex;
  margin: 0 auto;
}

.arrow-btn:hover {
  background-color: #66b1ff;
  transform: scale(1.1);
}
.arrow-btn:disabled {
  background-color: #c0c4cc;
  cursor: not-allowed;
  opacity: 0.6;
  transform: none;
}

/* 右侧面板（带边框） */
.right-panel {
  flex: 1;
  height: 100%;
  overflow: auto;
  border: 1px solid #e5e7eb;
  border-radius: 4px;
  padding: 15px;
  background-color: #fff;
}

/* 右侧标题 */
.selected-title {
  font-size: 14px;
  font-weight: 500;
  color: #374151;
  padding-bottom: 10px;
  border-bottom: 1px dashed #f0f0f0;
}
</style>
