<template>
  <div class="permission-manage">
    <div class="header">
      <h2>权限管理</h2>
      <el-button type="primary" @click="handleAdd">
        <el-icon><Plus /></el-icon>
        新增权限
      </el-button>
    </div>

    <el-table 
      :data="permissionList" 
      style="width: 100%" 
      v-loading="loading"
      border
      stripe
    >
      <el-table-column prop="name" label="权限名称" min-width="150" />
      <el-table-column prop="code" label="权限编码" min-width="200" />
      <el-table-column prop="description" label="权限描述" min-width="200" show-overflow-tooltip />
      <el-table-column prop="creatorName" label="创建人" width="120" />
      <el-table-column prop="createTime" label="创建时间" width="180" />
      <el-table-column label="操作" width="180" fixed="right">
        <template #default="{ row }">
          <el-button 
            type="primary" 
            size="small" 
            @click="handleEdit(row)"
            link
          >
            编辑
          </el-button>
          <el-button 
            type="primary" 
            size="small" 
            @click="handleBindMenu(row)"
            link
          >
            绑定菜单
          </el-button>
          <el-button 
            type="primary" 
            size="small" 
            @click="handleBindRole(row)"
            link
          >
            绑定角色
          </el-button>
          <el-button 
            type="danger" 
            size="small" 
            @click="handleDelete(row)"
            link
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 新增/编辑对话框 -->
    <el-dialog 
      v-model="dialogVisible" 
      :title="isEdit ? '编辑权限' : '新增权限'"
      width="500px"
      @close="resetForm"
    >
      <el-form 
        ref="formRef"
        :model="formData" 
        :rules="formRules" 
        label-width="100px"
      >
        <el-form-item label="权限名称" prop="name">
          <el-input 
            v-model="formData.name" 
            placeholder="请输入权限名称"
            clearable
          />
        </el-form-item>
        <el-form-item label="权限编码" prop="code">
          <el-input 
            v-model="formData.code" 
            placeholder="请输入权限编码"
            clearable
          />
        </el-form-item>
        <el-form-item label="权限描述" prop="description">
          <el-input 
            v-model="formData.description" 
            type="textarea"
            :rows="3"
            placeholder="请输入权限描述"
          />
        </el-form-item>
      </el-form>
      
      <template #footer>
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button 
          type="primary" 
          @click="handleSubmit"
          :loading="submitting"
        >
          确定
        </el-button>
      </template>
    </el-dialog>

    <!-- 绑定菜单对话框 -->
    <el-dialog v-model="bindMenuDialogVisible" title="绑定菜单" width="800px" @close="resetBindList">
      <div class="menu-binding-container">
        <!-- 权限信息显示 -->
        <div class="permission-info" v-if="currentPermission">
          <h4>权限信息：{{ currentPermission.name }}</h4>
          <p>权限编码：{{ currentPermission.code }}</p>
        </div>
        
        <!-- 菜单绑定状态表格 -->
        <el-table :data="menuList" style="width: 100%" border stripe>
          <el-table-column width="80" label="绑定状态">
            <template #default="{ row }">
              <el-tag 
                :type="isMenuSelected(row.menuID) ? 'success' : 'info'"
                size="small"
              >
                {{ isMenuSelected(row.menuID) ? '已绑定' : '未绑定' }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="name" label="菜单名称" min-width="150" />
          <el-table-column prop="menuID" label="菜单ID" min-width="120" />
          <el-table-column prop="url" label="菜单路径" min-width="200" show-overflow-tooltip />
          <el-table-column prop="component" label="菜单组件" min-width="180" show-overflow-tooltip />
          <el-table-column label="操作" width="100">
            <template #default="{ row }">
              <el-button 
                :type="isMenuSelected(row.menuID) ? 'danger' : 'primary'"
                size="small"
                @click="toggleMenuSelection(row)"
              >
                {{ isMenuSelected(row.menuID) ? '解绑' : '绑定' }}
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        
        <!-- 统计信息 -->
        <div class="binding-stats">
          <el-alert 
            :title="`已绑定 ${selectedMenus.length} 个菜单，未绑定 ${menuList.length - selectedMenus.length} 个菜单`"
            type="info"
            :closable="false"
            show-icon
          />
        </div>
      </div>
      
      <template #footer>
        <el-button @click="bindMenuDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="saveMenuBinding" :loading="submitting">
          保存
        </el-button>
      </template>
    </el-dialog>

    <!-- 绑定角色对话框 -->
    <el-dialog v-model="bindRoleDialogVisible" title="绑定角色" width="800px" @close="resetBindList">
      <div class="role-binding-container">
        <!-- 权限信息显示 -->
        <div class="permission-info" v-if="currentPermission">
          <h4>权限信息：{{ currentPermission.name }}</h4>
          <p>权限编码：{{ currentPermission.code }}</p>
        </div>
        
        <!-- 角色绑定状态表格 -->
        <el-table :data="roleList" style="width: 100%" border stripe>
          <el-table-column width="80" label="绑定状态">
            <template #default="{ row }">
              <el-tag 
                :type="isRoleSelected(row.id) ? 'success' : 'info'"
                size="small"
              >
                {{ isRoleSelected(row.id) ? '已绑定' : '未绑定' }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="name" label="角色名称" min-width="150" />
          <el-table-column prop="id" label="角色ID" min-width="120" />
          <el-table-column prop="description" label="角色描述" min-width="200" show-overflow-tooltip />
          <el-table-column label="操作" width="100">
            <template #default="{ row }">
              <el-button 
                :type="isRoleSelected(row.id) ? 'danger' : 'primary'"
                size="small"
                @click="toggleRoleSelection(row)"
              >
                {{ isRoleSelected(row.id) ? '解绑' : '绑定' }}
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        
        <!-- 统计信息 -->
        <div class="binding-stats">
          <el-alert 
            :title="`已绑定 ${selectedRoles.length} 个角色，未绑定 ${roleList.length - selectedRoles.length} 个角色`"
            type="info"
            :closable="false"
            show-icon
          />
        </div>
      </div>
      
      <template #footer>
        <el-button @click="bindRoleDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="saveRoleBinding" :loading="submitting">
          保存
        </el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { permissionApi } from '@/apis/system/permission';
import { roleApi } from '@/apis/system/role';
import { menuApi } from '@/apis/system/menu';
import { SysPermission, SysRole, SysMenu } from '@/types';
import { ref, onMounted, reactive } from 'vue';
import { ElMessage, ElMessageBox, FormInstance, FormRules } from 'element-plus';
import { Plus } from '@element-plus/icons-vue';

// 数据状态
const permissionList = ref<SysPermission[]>([]);
const loading = ref(false);
const submitting = ref(false);
const bindList = ref<SysPermission>({
  menus: [],
  roles: []
});
const roleList = ref<SysRole[]>([]);
const menuList = ref<SysMenu[]>([]);
const selectedMenus = ref<string[]>([]);
const selectedRoles = ref<string[]>([]);
const currentPermission = ref<SysPermission | null>(null);
// 对话框状态
const dialogVisible = ref(false);
const isEdit = ref(false);
const formRef = ref<FormInstance>();
const bindMenuDialogVisible = ref(false);
const bindRoleDialogVisible = ref(false);

const queryFilter = ref<SysPermission>({
  name: '',
  code: '',
  description: ''
});

// 表单数据
const formData = reactive<SysPermission>({
  name: '',
  code: '',
  description: ''
});

// 表单验证规则
const formRules: FormRules = {
  name: [
    { required: true, message: '请输入权限名称', trigger: 'blur' },
    { min: 2, max: 50, message: '权限名称长度在 2 到 50 个字符', trigger: 'blur' }
  ],
  code: [
    { required: true, message: '请输入权限编码', trigger: 'blur' },
    { 
      pattern: /^[a-zA-Z][a-zA-Z0-9:_-]*$/, 
      message: '权限编码只能包含字母、数字、冒号、下划线和横线，且必须以字母开头', 
      trigger: 'blur' 
    },
    { min: 2, max: 100, message: '权限编码长度在 2 到 100 个字符', trigger: 'blur' }
  ],
  description: [
    { max: 200, message: '权限描述不能超过 200 个字符', trigger: 'blur' }
  ]
};

// 加载权限列表
async function loadPermissionList() {
  try {
    loading.value = true;
    const result = await permissionApi.getPermissionList(queryFilter.value);
    permissionList.value = result.dataList || [];
  } catch (error) {
    console.error('加载权限列表失败:', error);
    ElMessage.error('加载权限列表失败');
  } finally {
    loading.value = false;
  }
}

// 新增权限
function handleAdd() {
  isEdit.value = false;
  dialogVisible.value = true;
}

// 编辑权限
function handleEdit(row: SysPermission) {
  isEdit.value = true;
  Object.assign(formData, row);
  dialogVisible.value = true;
}

// 查看绑定菜单
async function handleBindMenu(row: SysPermission) {
  currentPermission.value = row;
  row.bindType = "menu";
  
  try {
    // 获取已绑定的菜单
    const bindingResult = await permissionApi.getPermissionBindingList(row);
    bindList.value.menus = bindingResult.data?.menus || [];
    
    // 获取所有菜单
    const menuResult = await menuApi.getAllMenuList();
    menuList.value = menuResult.dataList || [];
    
    // 设置已选中的菜单
    selectedMenus.value = bindList.value.menus.map(menu => menu.menuID).filter((id): id is string => !!id);
    
    console.log('已绑定的菜单:', bindList.value.menus);
    console.log('所有菜单:', menuList.value);
    bindMenuDialogVisible.value = true;
  } catch (error) {
    console.error('获取菜单绑定信息失败:', error);
    ElMessage.error('获取菜单绑定信息失败');
  }
}

// 查看绑定角色
async function handleBindRole(row: SysPermission) {
  currentPermission.value = row;
  row.bindType = "role";
  
  try {
    // 获取已绑定的角色
    const bindingResult = await permissionApi.getPermissionBindingList(row);
    bindList.value.roles = bindingResult.data?.roles || [];
    
    // 获取所有角色
    const roleResult = await roleApi.getAllRoles();
    roleList.value = roleResult.dataList || [];
    
    // 设置已选中的角色
    selectedRoles.value = bindList.value.roles.map(role => role.id).filter((id): id is string => !!id);
    
    console.log('已绑定的角色:', bindList.value.roles);
    console.log('所有角色:', roleList.value);
    bindRoleDialogVisible.value = true;
  } catch (error) {
    console.error('获取角色绑定信息失败:', error);
    ElMessage.error('获取角色绑定信息失败');
  }
}

// 删除权限
async function handleDelete(row: SysPermission) {
  try {
    await ElMessageBox.confirm(
      `确定要删除权限 "${row.name}" 吗？`,
      '删除确认',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }
    );
    
    await permissionApi.deletePermission(row);
    ElMessage.success('删除成功');
    await loadPermissionList();
  } catch (error) {
    if (error !== 'cancel') {
      console.error('删除权限失败:', error);
      ElMessage.error('删除权限失败');
    }
  }
}

// 重置绑定列表
function resetBindList() {
  bindList.value = {
    menus: [],
    roles: []
  };
  selectedMenus.value = [];
  selectedRoles.value = [];
  currentPermission.value = null;
}

// 检查菜单是否已选中
function isMenuSelected(menuID: string | undefined): boolean {
  return menuID ? selectedMenus.value.includes(menuID) : false;
}

// 切换菜单选择状态
function toggleMenuSelection(menu: SysMenu) {
  if (!menu.menuID) return;
  
  const index = selectedMenus.value.indexOf(menu.menuID);
  if (index > -1) {
    selectedMenus.value.splice(index, 1);
  } else {
    selectedMenus.value.push(menu.menuID);
  }
}

// 保存菜单绑定
async function saveMenuBinding() {
  if (!currentPermission.value || !currentPermission.value.permissionID) {
    ElMessage.error('权限信息不完整');
    return;
  }
  
  try {
    submitting.value = true;
    
    // 获取当前已绑定的菜单ID
    const currentBoundMenus = (bindList.value.menus || []).map(menu => menu.menuID).filter((id): id is string => !!id);
    
    // 找出需要绑定的菜单（新增的）
    const menusToBind = selectedMenus.value.filter(menuID => !currentBoundMenus.includes(menuID));
    
    // 找出需要解绑的菜单（移除的）
    const menusToUnbind = currentBoundMenus.filter(menuID => !selectedMenus.value.includes(menuID));
    
    // 构建需要绑定的菜单对象数组
    if (menusToBind.length > 0) {
      const menusToBindObjects = menusToBind.map(menuID => {
        const menu = menuList.value.find(m => m.menuID === menuID);
        return menu || { menuID: menuID };
      });
      
      const bindPermission = {
        ...currentPermission.value,
        menus: menusToBindObjects,
        permissions: [{permissionID: currentPermission.value.permissionID}]
      };
      await permissionApi.bindMenu(bindPermission);
    }
    
    // 构建需要解绑的菜单对象数组
    if (menusToUnbind.length > 0) {
      const menusToUnbindObjects = menusToUnbind.map(menuID => {
        const menu = menuList.value.find(m => m.menuID === menuID);
        return menu || { menuID: menuID };
      });
      
      const unbindPermission = {
        ...currentPermission.value,
        menus: menusToUnbindObjects,
        permissions: [{permissionID: currentPermission.value.permissionID}]
      };
      await permissionApi.unbindMenu(unbindPermission);
    }
    
    ElMessage.success('菜单绑定保存成功');
    bindMenuDialogVisible.value = false;
    
    // 刷新权限列表
    await loadPermissionList();
  } catch (error) {
    console.error('保存菜单绑定失败:', error);
    ElMessage.error('保存菜单绑定失败');
  } finally {
    submitting.value = false;
  }
}

// 检查角色是否已选中
function isRoleSelected(roleID: string | undefined): boolean {
  return roleID ? selectedRoles.value.includes(roleID) : false;
}

// 切换角色选择状态
function toggleRoleSelection(role: SysRole) {
  if (!role.id) return;
  
  const index = selectedRoles.value.indexOf(role.id);
  if (index > -1) {
    selectedRoles.value.splice(index, 1);
  } else {
    selectedRoles.value.push(role.id);
  }
}

// 保存角色绑定
async function saveRoleBinding() {
  if (!currentPermission.value || !currentPermission.value.permissionID) {
    ElMessage.error('权限信息不完整');
    return;
  }
  
  try {
    submitting.value = true;
    
    // 获取当前已绑定的角色ID
    const currentBoundRoles = (bindList.value.roles || []).map(role => role.id).filter((id): id is string => !!id);
    
    // 找出需要绑定的角色（新增的）
    const rolesToBind = selectedRoles.value.filter(roleID => !currentBoundRoles.includes(roleID));
    
    // 找出需要解绑的角色（移除的）
    const rolesToUnbind = currentBoundRoles.filter(roleID => !selectedRoles.value.includes(roleID));
    
    // 构建需要绑定的角色对象数组
    if (rolesToBind.length > 0) {
      const rolesToBindObjects = rolesToBind.map(roleID => {
        const role = roleList.value.find(r => r.id === roleID);
        return role || { id: roleID };
      });
      
      const bindPermission = {
        ...currentPermission.value,
        roles: rolesToBindObjects,
        permissions: [{permissionID: currentPermission.value.permissionID}]
      };
      await permissionApi.bindRole(bindPermission);
    }
    
    // 构建需要解绑的角色对象数组
    if (rolesToUnbind.length > 0) {
      const rolesToUnbindObjects = rolesToUnbind.map(roleID => {
        const role = roleList.value.find(r => r.id === roleID);
        return role || { id: roleID };
      });
      
      const unbindPermission = {
        ...currentPermission.value,
        roles: rolesToUnbindObjects,
        permissions: [{permissionID: currentPermission.value.permissionID}]
      };
      await permissionApi.unbindRole(unbindPermission);
    }
    
    ElMessage.success('角色绑定保存成功');
    bindRoleDialogVisible.value = false;
    
    // 刷新权限列表
    await loadPermissionList();
  } catch (error) {
    console.error('保存角色绑定失败:', error);
    ElMessage.error('保存角色绑定失败');
  } finally {
    submitting.value = false;
  }
}

// 提交表单
async function handleSubmit() {
  if (!formRef.value) return;
  
  try {
    await formRef.value.validate();
    submitting.value = true;
    
    if (isEdit.value) {
      await permissionApi.updatePermission(formData);
      ElMessage.success('更新成功');
    } else {
      await permissionApi.addPermission(formData);
      ElMessage.success('新增成功');
    }
    
    dialogVisible.value = false;
    await loadPermissionList();
  } catch (error) {
    if (error !== false) { // 表单验证失败时error为false
      console.error('提交失败:', error);
      ElMessage.error(isEdit.value ? '更新失败' : '新增失败');
    }
  } finally {
    submitting.value = false;
  }
}

// 重置表单
function resetForm() {
  if (formRef.value) {
    formRef.value.resetFields();
  }
  Object.assign(formData, {
    name: '',
    code: '',
    description: ''
  });
}

// 页面加载时获取权限列表
onMounted(() => {
  loadPermissionList();
});
</script>

<style scoped lang="scss">
.permission-manage {
  padding: 20px;
  
  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    
    h2 {
      margin: 0;
      color: #303133;
      font-size: 20px;
      font-weight: 600;
    }
  }
  
  .el-table {
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    border-radius: 4px;
  }
}

// 对话框样式优化
:deep(.el-dialog) {
  .el-dialog__header {
    padding: 20px 20px 10px;
    border-bottom: 1px solid #ebeef5;
    
    .el-dialog__title {
      font-size: 16px;
      font-weight: 600;
      color: #303133;
    }
  }
  
  .el-dialog__body {
    padding: 20px;
  }
  
  .el-dialog__footer {
    padding: 10px 20px 20px;
    border-top: 1px solid #ebeef5;
  }
}

// 表单样式优化
:deep(.el-form) {
  .el-form-item__label {
    font-weight: 500;
    color: #606266;
  }
  
  .el-input__wrapper {
    box-shadow: 0 0 0 1px #dcdfe6 inset;
    
    &:hover {
      box-shadow: 0 0 0 1px #c0c4cc inset;
    }
    
    &.is-focus {
      box-shadow: 0 0 0 1px #409eff inset;
    }
  }
  
  .el-textarea__inner {
    box-shadow: 0 0 0 1px #dcdfe6 inset;
    
    &:hover {
      box-shadow: 0 0 0 1px #c0c4cc inset;
    }
    
    &:focus {
      box-shadow: 0 0 0 1px #409eff inset;
    }
  }
}

// 按钮样式优化
:deep(.el-button) {
  &.is-link {
    padding: 0;
    margin-right: 12px;
    
    &:last-child {
      margin-right: 0;
    }
  }
}

.menu-binding-container,
.role-binding-container {
  .permission-info {
    background: #f5f7fa;
    padding: 15px;
    border-radius: 4px;
    margin-bottom: 20px;
    
    h4 {
      margin: 0 0 8px 0;
      color: #303133;
      font-size: 16px;
    }
    
    p {
      margin: 0;
      color: #606266;
      font-size: 14px;
    }
  }
  
  .binding-stats {
    margin-top: 20px;
  }
}
</style>