<template>
  <div class="app-container">
    <!-- 选项卡组件：增加 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="Delete" @click="handleDelete(scope.row)" >删除</el-button>
            </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-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 label="作用域" prop="scope" />
          </el-table>
          <pagination
              v-show="importTenantProjectListTotal > 0"
              :total="importTenantProjectListTotal"
              v-model:page="importTenantProjectListQueryParams.pageNum"
              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 label="性别" prop="gender" />
          <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.pageNum"
            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 label="性别" prop="gender" />
          </el-table>
          <pagination
              v-show="importTenantUserListTotal > 0"
              :total="importTenantUserListTotal"
              v-model:page="importTenantUserListQueryParams.pageNum"
              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="1000px"
            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="getLeftRoleList">搜索</el-button>
                  <el-button icon="Refresh" @click="resetLeftQuery">重置</el-button>
                </el-form-item>
              </el-form>

              <el-table
                  v-loading="leftLoading"
                  :data="leftRoleList"
                  @selection-change="handleLeftSelectionChange"
                  border
                  row-key="roleId"
              >
                <el-table-column type="selection" width="55" align="center" />
                <el-table-column label="角色名称" prop="roleName" width="200" />
                <el-table-column label="权限字符" prop="roleKey" width="200" />
                <el-table-column label="状态" prop="status">
                  <template #default="scope">
                    <el-tag :type="scope.row.status === '0' ? 'success' : 'danger'">
                      {{ scope.row.status === '0' ? '启用' : '停用' }}
                    </el-tag>
                  </template>
                </el-table-column>
              </el-table>

              <pagination
                  v-show="leftTotal > 0"
                  :total="leftTotal"
                  v-model:page="leftQuery.pageNum"
                  v-model:limit="leftQuery.pageSize"
                  @pagination="getLeftRoleList"
                  style="margin-top: 10px"
              />
            </div>

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

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

            </div>

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

              <el-table
                  :data="rightRoleList"
                  @selection-change="handleRightSelectionChange"
                  border
                  row-key="roleId"
                  style="margin-top: 10px"
              >
                <el-table-column type="selection" width="55" align="center" />
                <el-table-column label="角色名称" prop="roleName" width="200" />
                <el-table-column label="权限字符" prop="roleKey" width="200" />
                <el-table-column label="状态" prop="status">
                  <template #default="scope">
                    <el-tag :type="scope.row.status === '0' ? 'success' : 'danger'">
                      {{ scope.row.status === '0' ? '启用' : '停用' }}
                    </el-tag>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </div>

          <!-- 底部统一保存按钮 -->
          <template #footer>
            <div class="dialog-footer">
              <el-button type="primary" @click="saveAllRoles">确 定</el-button>
              <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 label="作用域" prop="scope" />
          <el-table-column label="角色类型" prop="roleType" />
          <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.pageNum"
            v-model:limit="roleQueryParams.pageSize"
            @pagination="getRoleList"
        />

        <!-- 角色导入（根据权限从角色池导入进来） -->
        <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 label="作用域" prop="scope" />
            <el-table-column label="角色类型" prop="roleType" />
          </el-table>
          <pagination
              v-show="importTenantRoleListTotal > 0"
              :total="importTenantRoleListTotal"
              v-model:page="importTenantRoleListQueryParams.pageNum"
              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_normal_disable" :value="scope.row.status" />-->
<!--            </template>-->
          </el-table-column>
          <el-table-column prop="scope" label="菜单类型">
            <!--            <template #default="scope">-->
            <!--              <dict-tag :options="sys_normal_disable" :value="scope.row.status" />-->
            <!--            </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-tabs>
  </div>
</template>

<script setup name="TenantPermission">
import { listTenantProject,listImportTenantProject,addImportTenantProjectList,
  delRelTenantProject,listTenantUser,listImportTenantUser,
  addImportTenantUserList,delRelTenantUser,listTenantRole,
  delRelTenantRole,addImportTenantRoleList,listImportTenantRole,
  listMenu,getMenuTree,getImportSelectedMenuList,addImportTenantMenuList,
  listRole, getUserRole, assignUserRole} from "@/api/system/tenantPermission"
import { ref } from 'vue'

const { proxy } = getCurrentInstance()
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([])
// 当前租户绑定的选中菜单ID
const checkedKeys = ref([])
// 树组件引用
const treeRef = ref(null)
// 添加响应式变量控制严格模式
const isCheckStrictly = ref(false);  // 默认关闭严格模式（启用联动）
// 树形配置
const defaultProps = {
  children: 'children',
  label: 'menuName'
}

const data = reactive({
  form: {},
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    tenantBizId: route.query.tenantBizId,
    projectName: undefined
  },
  importTenantProjectListQueryParams: {
    pageNum: 1,
    pageSize: 10,
    tenantBizId: route.query.tenantBizId,
    projectName: undefined
  },
  userQueryParams: {
    pageNum: 1,
    pageSize: 10,
    tenantBizId: route.query.tenantBizId,
    userName: undefined,
    realName: undefined,
    mobile: undefined
  },
  importTenantUserListQueryParams: {
    pageNum: 1,
    pageSize: 10,
    tenantBizId: route.query.tenantBizId,
    userName: undefined,
    realName: undefined,
    mobile: undefined
  },
  roleQueryParams: {
    pageNum: 1,
    pageSize: 10,
    tenantBizId: route.query.tenantBizId,
    roleName: undefined
  },
  importTenantRoleListQueryParams: {
    pageNum: 1,
    pageSize: 10,
    tenantBizId: route.query.tenantBizId,
    roleName: undefined
  },
  menuQueryParams: {
    pageNum: 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.pageNum = 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 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.pageNum = 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.pageNum = 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.pageNum = 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.pageNum = 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.pageNum = 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.pageNum = 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)
    ElMessage.error('菜单加载失败')
  }
}
// 修改加载选中菜单列表的逻辑
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);
    ElMessage.error('加载选中的菜单列表失败');
    // 异常时也要恢复严格模式状态
    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
    ElMessage.success('更新成功')

  } catch (error) {
    console.error('更新失败:', error)
    ElMessage.error('更新失败')
  }
}
//========菜单-导入逻辑结束=========






// 全局实例（用于弹窗、表单操作）

// ===== 核心数据 =====
// 弹窗显隐与标题
const assignRoleDialogVisible = ref(false)
const assignRoleTitle = ref("分配角色")

// 左侧可选角色（查询参数 + 列表数据）
const leftQuery = reactive({
  pageNum: 1,
  pageSize: 10,
  roleName: '',
  userId: '' // 当前操作的用户ID（用于过滤已选角色）
})
const leftRoleList = ref([])
const leftLoading = ref(false)
const leftTotal = ref(0)
const leftSelectedRoles = ref([]) // 左侧选中的角色

// 右侧已选角色（列表数据 + 选中项）
const rightRoleList = ref([])
const rightSelectedRoles = ref([]) // 右侧选中的角色
const originRightRoles = ref([]) // 原始已选角色（用于计算变更）

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

  // 加载数据
  getLeftRoleList() // 加载可选角色（排除已选）
  getOriginRightRoles(userRow.userId) // 加载用户当前已分配的角色

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

/** 获取左侧可选角色列表（排除已选角色） */
function getLeftRoleList() {
  leftLoading.value = true
  // listRole({
  //   ...leftQuery,
  //   excludeRoleIds: rightRoleList.value.map(role => role.roleId) // 排除右侧已选角色
  // }).then(res => {
  //   leftRoleList.value = res.rows
  //   leftTotal.value = res.total
  //   leftLoading.value = false
  // }).catch(() => {
  //   leftLoading.value = false
  // })
}

/** 获取用户原始已选角色（用于后续计算变更） */
function getOriginRightRoles(userId) {
  // getUserRole(userId).then(res => {
  //   rightRoleList.value = res.roles || []
  //   originRightRoles.value = [...rightRoleList.value] // 深拷贝原始数据
  // })
}

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

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

/** 重置左侧搜索 */
function resetLeftQuery() {
  proxy.resetForm("leftQueryRef")
  leftQuery.pageNum = 1
  getLeftRoleList()
}

/** 向右箭头：将左侧选中角色移到右侧 */
function moveToRight() {
  leftSelectedRoles.value.forEach(role => {
    // 去重：右侧不存在才添加
    const isExist = rightRoleList.value.some(r => r.roleId === role.roleId)
    if (!isExist) {
      rightRoleList.value.push(role)
    }
  })
  // 清空左侧选中 + 刷新左侧列表（排除新添加的角色）
  leftSelectedRoles.value = []
  getLeftRoleList()
}

/** 向左箭头：将右侧选中角色移到左侧 */
function moveToLeft() {
  // 过滤掉右侧选中的角色
  rightRoleList.value = rightRoleList.value.filter(
      role => !rightSelectedRoles.value.some(r => r.roleId === role.roleId)
  )
  // 清空右侧选中 + 刷新左侧列表（重新包含移除的角色）
  rightSelectedRoles.value = []
  getLeftRoleList()
}

/** 底部保存按钮：统一提交所有变更 */
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
}

// 暴露打开弹窗的方法给外部调用
defineExpose({
  openAssignRoleDialog
})




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()
  }

}

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>
