<template>
  <div class="category-node-wrapper">
    <div 
      class="category-item" 
      :class="{ 'child-item': level > 0, disabled: !item.status }"
    >
      <div 
        class="category-main"
        :style="{ paddingLeft: (level * 24 + 20) + 'px' }"
        @click="handleRowClick"
      >
        <div class="expand-btn" v-if="item.children && item.children.length > 0">
          <el-button
            type="text"
            size="small"
            @click="toggleExpand"
            class="expand-button"
          >
            <el-icon>
              <component :is="item.expanded ? 'ArrowDown' : 'ArrowRight'" />
            </el-icon>
          </el-button>
        </div>
        <div class="expand-spacer" v-else></div>

        <div class="category-info">
          <div class="color-dot" :style="{ backgroundColor: item.color }"></div>
          <div class="category-icon">
            <el-icon v-if="item.icon"><component :is="item.icon" /></el-icon>
            <el-icon v-else class="default-icon"><Document /></el-icon>
          </div>

          <div class="category-text">
            <div class="category-title">
              <span class="name">{{ item.label }}</span>
              <el-tag
                :type="item.status ? 'success' : 'danger'"
                size="small"
                class="status-tag"
              >
                {{ item.status ? "启用" : "禁用" }}
              </el-tag>
            </div>
            <div class="category-desc" v-if="item.remark">{{ item.remark }}</div>
          </div>
        </div>

        <div class="category-actions">
          <el-button-group size="small">
            <el-button type="text" title="编辑" @click.stop="$emit('edit', item)">
              <el-icon><Edit /></el-icon>
            </el-button>
            <el-button type="text" title="添加子分类" @click.stop="$emit('add-child', item)">
              <el-icon><Plus /></el-icon>
            </el-button>
            <el-button type="text" class="danger" title="删除" @click.stop="$emit('delete', item)">
              <el-icon><Delete /></el-icon>
            </el-button>
          </el-button-group>
        </div>
      </div>
    </div>

    <div 
      v-if="item.children && item.children.length > 0 && item.expanded" 
      class="category-children"
    >
      <category-node
        v-for="child in item.children"
        :key="child.id"
        :item="child"
        :level="level + 1"
        @edit="$emit('edit', $event)"
        @add-child="$emit('add-child', $event)"
        @delete="$emit('delete', $event)"
      />
    </div>
  </div>
</template>

<script setup>
import { ArrowDown, ArrowRight, Edit, Plus, Delete, Document } from "@element-plus/icons-vue";

const props = defineProps({
  item: { type: Object, required: true },
  level: { type: Number, default: 0 }
});

const emit = defineEmits(['edit', 'add-child', 'delete']);

const toggleExpand = () => {
  props.item.expanded = !props.item.expanded;
};

const handleRowClick = () => {
  if (props.item.children && props.item.children.length > 0) {
    toggleExpand();
  }
};
</script>

<style lang="less" scoped>
.category-node-wrapper {
  .category-item {
    border-bottom: 1px solid var(--el-border-color-lighter);
    transition: all 0.2s;

    &:last-child {
      border-bottom: none;
    }

    &.disabled {
      .category-main {
        opacity: 0.6;
        background-color: var(--el-fill-color-lightest);
      }
    }

    &.child-item {
      .category-main {
        background-color: rgba(245, 247, 250, 0.2);
      }
    }

    .category-main {
      display: flex;
      align-items: center;
      padding: 14px 24px;
      transition: background-color 0.2s;
      position: relative;
      cursor: pointer;

      &:hover {
        background-color: var(--el-fill-color-light) !important;
      }

      .expand-btn,
      .expand-spacer {
        width: 28px;
        flex-shrink: 0;
      }

      .expand-btn {
        .expand-button {
          padding: 4px;
          color: var(--el-text-color-placeholder);
          
          &:hover {
            color: var(--el-color-primary);
          }
        }
      }

      .category-info {
        display: flex;
        align-items: center;
        flex: 1;
        min-width: 0;

        .color-dot {
          width: 10px;
          height: 10px;
          border-radius: 50%;
          margin-right: 12px;
          flex-shrink: 0;
        }

        .category-icon {
          width: 32px;
          height: 32px;
          border-radius: 6px;
          background-color: var(--el-fill-color-light);
          display: flex;
          align-items: center;
          justify-content: center;
          margin-right: 12px;
          flex-shrink: 0;
          
          .el-icon {
            font-size: 16px;
            color: var(--el-text-color-regular);
          }
        }

        .category-text {
          flex: 1;
          min-width: 0;
          
          .category-title {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 2px;
            
            .name {
              font-weight: 600;
              font-size: 14px;
              color: var(--el-text-color-primary);
            }
            
            .status-tag {
              font-size: 10px;
              height: 20px;
              padding: 0 6px;
            }
          }
          
          .category-desc {
            color: var(--el-text-color-placeholder);
            font-size: 12px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }
        }
      }

      .category-actions {
        flex-shrink: 0;
        margin-left: 16px;
        opacity: 0.4;
        transition: opacity 0.2s;

        .el-button-group .el-button {
          padding: 8px;
          border-radius: 4px;
          margin-left: 4px;
          
          &.danger:hover {
            color: var(--el-color-danger);
          }
          
          &:hover {
            color: var(--el-color-primary);
          }
        }
      }

      &:hover .category-actions {
        opacity: 1;
      }
    }
  }

  .category-children {
    .category-node-wrapper {
      margin-top: 0;
    }
  }
}

@media (max-width: 768px) {
  .category-node-wrapper {
    .category-item {
      .category-main {
        padding: 12px !important;
        
        .category-actions {
          opacity: 1;
        }
        
        .category-desc {
          display: none;
        }
      }
    }
  }
}
</style>