<template>
    <el-container style="border: 1px solid #eee">
        <el-aside width="300px">
            <el-input v-model="filterText" placeholder="搜索术语"></el-input>
            <div class="warpper">
                <el-tree class="filter-tree" node-key="id" :data="treeData" :props="defaultProps"
                    :filter-node-method="filterNode" @node-click="getTermDetail" ref="tree" highlight-current="true">
                </el-tree>
            </div>
        </el-aside>

        <el-container>
            <el-main>
                <el-table :data="tableData" style="width: 100%">
                    <el-table-column prop="name" label="名字"> </el-table-column>
                    <el-table-column prop="owner" label="拥有者"> </el-table-column>
                    <el-table-column prop="description" label="描述"> </el-table-column>
                    <el-table-column prop="typeName" label="类型"> </el-table-column>
                    <el-table-column prop="classificationNames" label="分类">
                    </el-table-column>
                </el-table>
            </el-main>
        </el-container>
    </el-container>
</template>

<script>
    import axios from "axios";
    import qs from "qs";

    export default {
        watch: {
            filterText(val) {
                this.$refs.tree.filter(val);
            },
        },
        data() {
            return {
                filterText: "",
                tableData: [],
                treeData: [],
                defaultProps: {
                    children: "children",
                    label: "label",
                },
            };
        },
        created() {
            const instance = axios.create();
            instance({
                url: "/metadata/j_spring_security_check",
                method: "post",
                withCredentials: true,
                headers: {
                    "Accept": "*/*",
                    "Content-Type": "application/x-www-form-urlencoded; charset=utf-8",
                },
                data: qs.stringify({
                    j_username: "admin",
                    j_password: "admin",
                }),
            });
        },
        mounted() {
            const instance = axios.create();
            instance({
                url: "/metadata/api/atlas/v2/glossary",
                method: "get",
                withCredentials: true,
                headers: {
                    "Accept": "*/*"
                },
            }).then(({ data }) => {
                data.forEach((element) => {
                    // console.log(element);
                    var node = {};
                    var children = [];
                    node["id"] = element.guid;
                    node["label"] = element.name;

                    element.terms.forEach((item) => {
                        var childrenNode = {};
                        childrenNode["id"] = item.termGuid;
                        childrenNode["label"] = item.displayText;
                        children.push(childrenNode);
                    });
                    node["children"] = children;
                    this.treeData.push(node);
                    // console.log(this.treeData);
                });
            });
        },
        methods: {
            // 过滤
            filterNode(value, data) {
                if (!value) return true;
                return data.label.indexOf(value) !== -1;
            },
            // 获取术语具体信息
            getTermDetail(data, node) {
                this.$refs.tree.setCurrentKey(data.id);
                if (!data.children) {
                    const termName = data.label + "@" + node.parent.data.label;
                    const instance = axios.create();
                    instance({
                        url: "/metadata/api/atlas/v2/search/basic",
                        method: "post",
                        withCredentials: true,
                        headers: {
                            "Accept": "*/*",
                            "Content-Type": "application/json",
                        },
                        data: JSON.stringify({
                            excludeDeletedEntities: true,
                            includeClassificationAttributes: true,
                            includeSubClassifications: true,
                            includeSubTypes: true,
                            termName,
                        }),
                    }).then(({ data }) => {
                        console.log("res", data);
                        this.tableData = [];
                        if (data.entities) {
                            data.entities.forEach((item) => {
                                var node = {};
                                node["name"] = item.attributes.name;
                                node["owner"] = item.attributes.owner;
                                node["typeName"] = item.typeName;
                                node["classificationNames"] = item.classificationNames.toString();
                                node["description"] = "";
                                this.tableData.push(node);
                            });
                        }
                    });
                }
            },
        },
    };
</script>

<style>
    .el-header {
        background-color: #b3c0d1;
        color: #333;
        line-height: 60px;
    }

    .el-aside {
        line-height: 100px;
        color: #333;
        height: 900px;
    }

    .el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content {
        background-color: #38bb9b !important;
    }

    .el-tree-node:focus>.el-tree-node__content {
        background-color: rgb(158, 213, 250) !important;
    }
</style>