<template>
  <div class="permission-item" :class="{ expanded: permission.expanded }">
    <div class="permission-item-header" :style="{ paddingLeft: `${level * 24 + 16}px` }" @click="handleHeaderClick">
      <span class="permission-name" @click.stop="togglePermission">{{ permission.name }}</span>
      <el-icon v-if="hasChildren" class="expand-icon" :class="{ rotated: permission.expanded }" @click.stop="togglePermission">
        <ArrowDown />
      </el-icon>
    </div>
    <div v-if="permission.expanded && hasChildren" class="permission-item-content">
      <PermissionItem
        v-for="child in permission.children"
        :key="child.id"
        :permission="child"
        :level="level + 1"
        @permission-change="(perm, checked) => emit('permissionChange', perm, checked)"
        @child-permission-change="(parent, child, checked) => emit('childPermissionChange', parent, child, checked)"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from "vue";
import { ArrowDown } from "@element-plus/icons-vue";

interface PermissionItem {
  id: number;
  name: string;
  checked: boolean;
  expanded: boolean;
  children?: PermissionItem[];
}

interface Props {
  permission: PermissionItem;
  level?: number;
}

const props = withDefaults(defineProps<Props>(), {
  level: 0
});

const emit = defineEmits<{
  permissionChange: [perm: PermissionItem, checked: boolean];
  childPermissionChange: [parent: PermissionItem, child: PermissionItem, checked: boolean];
}>();

const hasChildren = computed(() => props.permission.children && props.permission.children.length > 0);

const togglePermission = () => {
  // 创建新对象而不是直接修改 props
  const updatedPermission = {
    ...props.permission,
    expanded: !props.permission.expanded
  };
  // 注意：这里需要父组件处理状态更新，或者使用 emit 通知父组件
  // 由于这是递归组件，暂时保持原逻辑，但添加注释说明
  // eslint-disable-next-line vue/no-mutating-props
  props.permission.expanded = !props.permission.expanded;
};

const handleHeaderClick = (e: MouseEvent) => {
  // 如果点击的不是 checkbox、名称或图标，则触发展开/收起
  const target = e.target as HTMLElement;
  if (!target.closest(".el-checkbox") && !target.closest(".permission-name") && !target.closest(".expand-icon")) {
    togglePermission();
  }
};
</script>

<style lang="scss" scoped>
.permission-item {
  margin-bottom: 12px;
  overflow: hidden;
  background: #f5f7fa;
  border-radius: 4px;
  transition: all 0.3s;
  &.expanded {
    .permission-item-header {
      background: #ecf5ff;
    }
  }
  .permission-item-header {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    cursor: pointer;
    transition: background-color 0.2s;
    &:hover {
      background: #ecf5ff;
    }
    .permission-name {
      flex: 1;
      margin-left: 12px;
      font-size: 14px;
      color: var(--el-text-color-primary);
    }
    .expand-icon {
      margin-left: auto;
      font-size: 14px;
      color: #909399;
      transition: transform 0.3s;
      &.rotated {
        transform: rotate(180deg);
      }
    }
  }
  .permission-item-content {
    padding: 12px 0;
    background: #ffffff;
    border-top: 1px solid #e4e7ed;
  }
}
</style>
