<template>
    <div class="system-manage-container">
        <div class="system-manage-header">
            <div class="header-left">
                <el-form :inline="true" :model="searchForm">
                    <el-form-item label="关键字查询">
                        <el-input v-model="searchForm.name" clearable @keydown.enter="handleSearch" />
                    </el-form-item>
                    <el-form-item label="数据类型查询">
                        <el-select v-model="searchForm.type">
                            <el-option label="平级数据" value="1"></el-option>
                            <el-option label="树形数据" value="2"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="handleSearch">查询</el-button>
                    </el-form-item>
                </el-form>
            </div>
            <div class="header-right">
                <el-form>
                    <el-form-item>
                        <el-button type="primary" @click="handleAdd">新增</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
        <div class="system-manage-content manage-content">
            <common-table
                :autoHeight="true"
                :data="tableData"
                :columns="tableColumns"
                :total="total"
                :current-page="currentPage"
                :page-size="pageSize"
                title=""
                :index="true"
                :border="true"
                @size-change="handleSizeChange"
                @current-page-change="handleCurrentPageChange"
            >
                <template #operations="{ row, index }">
                    <el-button link type="primary" size="small" @click="handleEdit(row, index)">
                        编辑
                    </el-button>
                    <el-button link type="danger" size="small" @click="handleDelete(row, index)">
                        删除
                    </el-button>
                </template>
            </common-table>
        </div>
        <el-dialog class="add-dialog"
            v-model="dialogVisible"
            :title="dialogTitle"
            width="600px"
            @close="cancelResourceForm"
            :close-on-click-modal="false" :close-on-press-escape="false"
        >
            <el-form :model="resourceFormData" ref="resourceForm" :rules="resourceRules" label-width="100">
                <el-form-item label="名称" prop="name">
                    <el-input v-model="resourceFormData.name" placeholder="请输入资源库名称" />
                </el-form-item>
                <el-form-item label="唯一标识" prop="key">
                    <el-input v-model="resourceFormData.key" placeholder="请输入唯一标识" />
                </el-form-item>
                <el-form-item label="类型" prop="type">
                    <el-select v-model="resourceFormData.type" placeholder="请选择数据类型"
                        :disabled="!!resourceFormData.id"
                    >
                        <el-option label="平级数据" value="1"></el-option>
                        <el-option label="树形数据" value="2"></el-option>
                    </el-select>
                </el-form-item>
                <el-button type="primary" @click="addNode">添加节点</el-button>
                <el-form-item label="资源库数据">
                    <div class="tree-content">
                        <el-tree
                            ref="treeRef"
                            :data="treeData"
                            node-key="key"
                            :props="{label: 'name'}"
                            render-after-expand
                        >
                            <template #default="{ node, data }">
                                <div class="custom-tree-node">
                                    <span class="node-name">
                                        {{ node.label }}
                                        <span class="node-key">{{ data.key }}</span>
                                    </span>
                                    <el-dropdown>
                                        <span class="el-dropdown-link">
                                            <i class="iconfont icon-gengduo"></i>
                                        </span>
                                        <template #dropdown>
                                        <el-dropdown-menu>
                                            <el-dropdown-item @click="nodeAddChild(data)" v-if="resourceFormData.type == 2">
                                                <i class="iconfont icon-tianjia"></i>
                                                添加子部门
                                            </el-dropdown-item>
                                            <el-dropdown-item @click="nodeEdit(data)">
                                                <i class="iconfont icon-bianji"></i>
                                                编辑
                                            </el-dropdown-item>
                                            <el-dropdown-item @click="nodeDelete(data)">
                                                <i class="iconfont icon-shanchu"></i>
                                                删除
                                            </el-dropdown-item>
                                        </el-dropdown-menu>
                                        </template>
                                    </el-dropdown>
                                </div>
                            </template>
                        </el-tree>
                    </div>
                </el-form-item>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="cancelResourceForm">取消</el-button>
                    <el-button type="primary" @click="saveResourceForm">保存</el-button>
                </div>
            </template>
        </el-dialog>
        <el-dialog
            v-model="listDialogVisible"
            :title="listDialogTitle"
            width="600px"
            @close="cancelListForm"
            :close-on-click-modal="false" :close-on-press-escape="false"
        >
            <el-form :model="listFormData" ref="listForm" :rules="listRules" label-width="100">
                <el-form-item label="名称" prop="name">
                    <el-input v-model="listFormData.name" placeholder="请输入资源库名称" />
                </el-form-item>
                <el-form-item label="唯一标识" prop="key">
                    <el-input v-model="listFormData.key" placeholder="请输入唯一标识"/>
                </el-form-item>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="cancelListForm">取消</el-button>
                    <el-button type="primary" @click="saveListForm">确定</el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>

<script setup>
    import { ref, reactive, onMounted, getCurrentInstance, computed } from "vue";
    import { ElMessage, ElMessageBox } from "element-plus";
    import CommonTable from "@/components/common/commonTable.vue";

    const { proxy } = getCurrentInstance();
    const loading = ref(false);
    const tableData = ref([]);
    const total = ref(0);
    const currentPage = ref(1);
    const pageSize = ref(10);
    const searchForm = ref({});
    // 表格列配置
    const tableColumns = [
        {
            prop: "name",
            label: "资源库名称",
            minWidth: 100,
            showOverflowTooltip: true,
        },
        {
            prop: "key",
            label: "唯一标识",
            minWidth: 100,
            showOverflowTooltip: true,
        },
        {
            prop: "operations",
            label: "操作",
            width: 120,
            slot: "operations",
            fixed: "right",
            align: "center",
        }
    ];
    const getResourceData = () => {
        loading.value = true;
        proxy.$post({
            url: "/api/resource/listResource",
            data: {
                ...searchForm.value,
                page: currentPage.value,
                pagesize: pageSize.value
            },
            callback: (data) => {
                tableData.value = data.rows;
                total.value = data.count;
                loading.value = false;
            }
        })
    };
    onMounted(() => {
        getResourceData();
    });
    // 分页
    const handleSizeChange = (size) => {
        pageSize.value = size;
        currentPage.value = 1;
        getResourceData();
    }
    const handleCurrentPageChange = (page) => {
        currentPage.value = page;
        getResourceData();
    }
    const handleSearch = (formData) => {
        currentPage.value = 1;
        getResourceData();
    };

    const dialogVisible = ref(false);
    const dialogTitle = ref("新增资源库");
    const resourceForm = ref();
    const resourceFormData = ref({});
    const resourceRules = {
        name: [
            { required: true, message: "请输入名称", trigger: "blur" }
        ],
        key: [
            { required: true, message: "请输入唯一标识", trigger: "blur" }
        ]
    };
    let treeData = ref([]);
    const treeRef = ref();
    const handleAdd = () => {
        dialogTitle.value = "新增资源库";
        dialogVisible.value = true;
    };

    const listDialogVisible = ref(false);
    const listDialogTitle = ref("添加节点");
    const listForm = ref();
    const listFormData = ref({});
    const listRules = {
        name: [
            { required: true, message: "请输入名称", trigger: "blur" }
        ],
        key: [
            { required: true, message: "请输入唯一标识", trigger: "blur" }
        ]
    };
    const addNode = () => {
        listDialogVisible.value = true;
        listDialogTitle.value = "添加节点";
    };
    const nodeData = ref(null);
    const cancelListForm = () => {
        nodeData.value = null;
        listFormData.value = {};
        listForm.value.resetFields();
        listDialogVisible.value = false;
    };
    // 添加子节点
    const nodeAddChild = (data) => {
        nodeData.value = data;
        addNode();
    }
    // 添加节点数据
    const saveListForm = () => {
        let data = {
            name: listFormData.value.name,
            key: listFormData.value.key
        };
        if (nodeData.value) {
            treeRef.value.append(data, nodeData.value);
        } else {
            treeRef.value.append(data);
        }
        cancelListForm();
    };
    const nodeEdit = (data) => {
        listFormData.value = {
            ...data
        };
        dialogVisible.value = false;
        listDialogVisible.value = true;
        listDialogTitle.value = "编辑节点";
    };
    // 删除节点
    const nodeDelete = (data) => {
        ElMessageBox.confirm(`确定删除节点${data.name}？`, "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
        }).then(() => {
            treeRef.value.remove(data);
        });
    };
    // 添加资源库
    const saveResourceForm = () => {
        resourceForm.value.validate(valid => {
            if (valid) {
                let url = resourceFormData.value.id ? "updateResource" : "createResource"
                proxy.$post({
                    url: "/api/resource/" + url,
                    data: {
                        ...resourceFormData.value,
                        type: resourceFormData.value.type || "1",
                        resourceInfos: treeData.value
                    },
                    callback: (data) => {
                        ElMessage.success(dialogTitle.value + "成功");
                        cancelResourceForm();
                        getResourceData();
                    },
                    error: (err) => {
                        ElMessage.error(dialogTitle.value + "失败:", err);
                    }
                })
            }
        })
    }
    const cancelResourceForm = () => {
        resourceFormData.value = {};
        treeData.value = [];
        resourceForm.value.resetFields();
        dialogVisible.value = false;
    };
    
    const handleEdit = (row, index) => {
        proxy.$post({
            url: "/api/resource/getResource",
            data: {
                id: row.id
            },
            callback: (data) => {
                resourceFormData.value = {
                    ...data,
                    type: data.type.toString()
                };
                treeData.value = data.resourceInfos || [];
                dialogVisible.value = true;
            }
        })
    }

    // 删除资源库
    const handleDelete = async (row, index) => {
        try {
            await ElMessageBox.confirm(`确定要删除"${row.name}"吗？`, "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            });
            proxy.$post({
                url: "/api/resource/deleteResource",
                data: { id: row.id },
                callback: (data) => {
                    getResourceData();
                    ElMessage.success("删除成功");
                },
                error: (err) => {
                    ElMessage.error("删除失败:", err);
                }
            });
        } catch {}
    };
</script>

<style lang="less">
  @import "@/styles/manage.less";
  .tree-content{
    width: 100%;
    height: 150px;
  }
</style>