<template>
    <div class="page-container">
        <div class="category-tree">
            <!-- 头部 -->
            <div class="tree-header">
                <span class="stat-label">语料库目录</span>
                <el-button size="small" type="primary" plain @click="handleAddRoot">
                    ＋新建分类
                </el-button>
            </div>

            <!-- 树 -->
            <el-tree ref="treeRef" :data="treeData" :props="defaultProps" default-expand-all highlight-current
                node-key="id" @node-click="handleNodeClick">
                <template #default="{ data }">
                    <div class="tree-node">
                        <span class="node-label">{{ data.categoryName }}</span>
                        <!-- v-if="selectedNode && selectedNode.id === data.id" -->
                        <span class="node-actions">
                            <!-- 新增子分类（所有节点均可） -->
                            <el-button size="small" link circle type="primary" @click.stop="handleAddChild(data)"
                                title="新增子分类">
                                <el-icon>
                                    <Plus />
                                </el-icon>
                            </el-button>
                            <!-- 修改（根节点不可修改） -->
                            <el-button v-if="data.id !== 'root'" size="small" link circle type="warning"
                                @click.stop="handleEdit(data)" title="修改分类">
                                <el-icon>
                                    <Edit />
                                </el-icon>
                            </el-button>
                            <!-- 删除（根节点不可删除） -->
                            <el-button v-if="data.id !== 'root'" size="small" link circle type="danger"
                                @click.stop="handleDelete(data)" title="删除分类">
                                <el-icon>
                                    <Delete />
                                </el-icon>
                            </el-button>
                        </span>
                    </div>
                </template>
            </el-tree>


        </div>
        <!-- 弹窗：新增 / 修改分类 -->
        <el-dialog v-model="dialogVisible" :title="dialogTitle" :append-to-body="true" width="400px"
            @close="resetDialog">
            <el-form ref="ruleFormRef" :model="ruleForm" label-width="auto">
                <el-form-item label="分类名称" prop="categoryName"
                    :rules="[{ required: true, message: '请输入分类名称', trigger: 'blur' }]">
                    <el-input v-model="ruleForm.categoryName" />
                </el-form-item>
            </el-form>
            <template #footer>
                <el-button @click="dialogVisible = false">取消</el-button>
                <el-button type="primary" @click="confirmDialog">确定</el-button>
            </template>
        </el-dialog>
    </div>
</template>

<script setup>
import { ref, reactive, nextTick, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Plus, Edit, Delete } from '@element-plus/icons-vue'
import { addCategory, getCategoryTreeApi, updateCategoryTreeApi, deleteCategory } from '@/api/corpusManger/corpus.js'

// ---------- 数据 ----------
const defaultProps = {
    children: 'children',
    label: 'label'
}

const emit = defineEmits(['select-category'])

const treeData = ref([
    {
        categoryName: '全部',
        children: [],
        id: ''
    }
])

const getCategoryTree = async () => {
    const res = await getCategoryTreeApi()
    if (res.code === 200) {
        treeData.value[0].children = res.data
    }
}

// 当前选中的节点
const selectedNode = ref(null)

// 弹窗相关
const dialogVisible = ref(false)
const dialogTitle = ref('')
const dialogMode = ref('add') // 'add' | 'edit'
const dialogParent = ref(null) // 新增时的父节点
const dialogTarget = ref(null) // 编辑时的目标节点

const ruleFormRef = ref(null)
const ruleForm = ref({
    categoryName: ''
})

// ---------- 方法 ----------
// 选中节点
const handleNodeClick = (data) => {
    selectedNode.value = data
    emit('select-category', data)
}

// 新增一级分类（根节点下）
const handleAddRoot = () => {
    openDialog('add', null, null)
}

// 新增子分类
const handleAddChild = (parent) => {
    openDialog('add', parent, null)
}

// 修改分类
const handleEdit = (node) => {
    openDialog('edit', null, node)
}

// 删除分类
const handleDelete = (node) => {
    ElMessageBox.confirm(`确定要删除分类“${node.categoryName}”及其所有子分类吗？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
    }).then(async () => {
        const res = await deleteCategory(node.id)
        if (res.code === 200) {
            selectedNode.value = null
            getCategoryTree()
            ElMessage.success(res.msg)
        }
    }).catch(() => { })
}

// 打开弹窗
const openDialog = (mode, parent, target) => {
    dialogMode.value = mode
    dialogParent.value = parent
    dialogTarget.value = target
    if (mode === 'add') {
        dialogTitle.value = parent ? `在“${parent.categoryName}”下新增子分类` : '新增一级分类';
        ruleForm.value.categoryName = ''
    } else {
        dialogTitle.value = `修改分类“${target.categoryName}”`
        ruleForm.value.categoryName = target.categoryName
    }
    dialogVisible.value = true
}

// 弹窗确认
const confirmDialog = async () => {
    const result = await ruleFormRef.value.validate()
    if (result) {
        if (dialogMode.value === 'add') {
            const parent = dialogParent.value
            if (parent) {
                if (!parent.children) {
                    parent.children = []
                }
                const exists = parent.children.some(child => child.categoryName === name)
                if (exists) {
                    ElMessage.warning('该分类已存在，请勿重复添加')
                    return
                }
            }
            // 检查重名（可选）

            const res = await addCategory({
                parentId: parent?.id || null,
                categoryName: ruleForm.value.categoryName
            })
            if (res.code === 200) {
                ElMessage.success(res.msg)
                getCategoryTree()
            }
        } else {
            // 编辑
            const res = await updateCategoryTreeApi({
                id: dialogTarget.value.id,
                categoryName: ruleForm.value.categoryName
            })
            if (res.code === 200) {
                ElMessage.success(res.msg)
                getCategoryTree()
            }
        }
        dialogVisible.value = false
    }
}

// 重置弹窗
const resetDialog = () => {
    ruleForm.value.categoryName = ''
}

// 查找父节点（辅助函数）
const findParent = (root, childId) => {
    if (!root.children) return null
    for (const child of root.children) {
        if (child.id === childId) {
            return root
        }
        if (child.children) {
            const found = findParent(child, childId)
            if (found) return found
        }
    }
    return null
}

// 暴露树引用（可选）
const treeRef = ref(null)

onMounted(() => {
    getCategoryTree()
})
</script>

<style lang="scss" scoped>
.page-container {
    height: 100%;
}
.category-tree {
    height: 100%;
    padding: 20px;
    border-radius: 12px;
    background: #fff;

    .tree-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 12px;

        .stat-label {
            font-size: 16px;
            color: #000;
            font-weight: bold;
        }
    }

    .tree-node {
        display: flex;
        align-items: center;
        width: 100%;

        .node-label {
            font-size: 14px;
            flex: 0 0 auto;
        }

        .node-count {
            margin-left: 8px;
            font-size: 12px;
            color: #94a3b8;
            flex: 0 0 auto;
        }

        .node-actions {
            margin-left: auto;
            display: none;
            align-items: center;
            // gap: 2px;

            .el-button {
                margin-left: 0;
            }
        }

        &:hover {
            .node-actions {
                display: flex;
            }
        }
    }


}
</style>