<template>
    <div class="vx-tree">
        <Input
            placeholder="查找"
            class="vx-tree__filter"
            search
            v-model="filterValue"
        />
        <div class="vx-tree__content" v-if="showContent">
            <template v-if="isRoots">
                <vx-tree-item
                    :acceptNodeFn="acceptNodeFn"
                    :innerComponentName="innerComponentName"
                    :iconClassFn="iconClassFn"
                    :key="index"
                    :index="index"
                    :level="0"
                    :model="child"
                    :showCheckbox="showCheckbox"
                    :siblingCount="copyModel.length"
                    v-for="(child, index) in copyModel"
                ></vx-tree-item>
            </template>
            <vx-tree-item
                v-else
                :acceptNodeFn="acceptNodeFn"
                :iconClassFn="iconClassFn"
                :innerComponentName="innerComponentName"
                :level="0"
                :index="0"
                :siblingCount="1"
                :model="copyModel"
                :showCheckbox="showCheckbox"
            ></vx-tree-item>
        </div>
        <div v-if="isLoading" style="height:calc(100vh - 40px)">
            <img src="../../assets/images/loading_min.gif" style="width:30px;height: 30px;display:block;margin:0 auto;margin-top:40vh;opacity: 0.3;" alt="">
        </div>
        <div class="vx-tree__empty" v-show="!hasData && !isLoading">无过滤数据</div>
    </div>
</template>

<script>
import VxTreeItem from "./vx-tree-item";
import Emitter from "./emitter";
import _ from "lodash";

export default {
    name: "VxTree",
    data() {
        return {
            showContent: true,
            filterValue: "",
            currentNode: undefined,
            reformed: false,
            hasData: true,
            copyModel: [],
            copyModel2: [],
        };
    },
    mixins: [Emitter],
    components: {
        VxTreeItem,
    },
    props: {
        showCheckbox: {
            type: Boolean,
            default: false,
        },
        model: {
            type: Object | Array,
        },
        /**
         * 可接受节点函数
         */
        acceptNodeFn: {
            type: Function,
        },
        /**
         * 图片 Class类函数，返回类名
         */
        iconClassFn: {
            type: Function,
        },
        /**
         * 内部组件名
         */
        innerComponentName: {
            type: String,
        },
    },

    computed: {
        /**
         * 是否多节点
         */
        isRoots() {
            return Array.isArray(this.copyModel);
        },
        isLoading(){
            if(this.showContent){
                return false
            }else {
                return true
            }
        }
    },
    watch: {
        copyModel(newVal) {
            if (this.reformed) {
                return;
            }

            this._reformModel(this.copyModel);
            // this.copyModel = this.model;
            this.reformed = true;
            this.$emit("on-data-ready");
        },

        filterValue(newVal) {
            this._filter();
        },
    },
    methods: {
        /**
         * 获取所有选中的Id
         */
        getCheckedGuids() {
            let ids = [];

            if (this.acceptNodeFn) {
                this._getAcceptCheckedGuids(
                    this.copyModel,
                    this.acceptNodeFn,
                    ids
                );
            } else {
                this._getCheckedGuids(this.copyModel, ids);
            }

            return ids;
        },
        _filter: _.debounce(function () {
            if (this.isRoots) {
                if (this.filterValue) {
                    this.copyModel.forEach((element) => {
                        let status =
                            element.title.indexOf(this.filterValue) !== -1;
                        this.$set(element, "isVisible", status);
                        // element.isVisible = status;

                        this._filterModel(element);
                        this._refreshNormalNode(element);
                    });
                    // this.copyModel = this.model;
                } else {
                    console.log("空");
                    this._reformModel(this.copyModel2);
                    this.copyModel = this.copyModel2;
                    this.copyModel2 = JSON.parse(JSON.stringify(this.model));
                }
            } else {
                if (this.filterValue) {
                    let status =
                        this.copyModel.title.indexOf(this.filterValue) !== -1;
                    this.$set(this.copyModel, "isVisible", status);
                    // this.model.isVisible = status;
                } else {
                    console.log("空");
                    this._reformModel(this.copyModel2);
                    this.copyModel = this.copyModel2;
                    this.copyModel2 = JSON.parse(JSON.stringify(this.model));
                }
                this._filterModel(this.copyModel);
                this._refreshNormalNode(this.copyModel);
                // this.copyModel = this.model
            }

            console.log(this.copyModel);
            this.showContent = false;
            setTimeout(() => {
                this.showContent = true;
                this.hasData = this.testHasData();
            }, 100);
        }, 500),

        _filterModel(model) {
            if (this.filterValue) {
                if (model.children) {
                    model.children.forEach((child) => {
                        let status =
                            child.title.indexOf(this.filterValue) !== -1;
                        this.$set(child, "isVisible", status);
                        // child.isVisible = status;
                        this._filterModel(child);
                    });
                }
                // this.copyModel = this.model;
            } else {
                console.log("空");
                this._reformModel(this.copyModel2);
                this.copyModel = this.copyModel2;
                this.copyModel2 = JSON.parse(JSON.stringify(this.model));
            }
        },

        /**
         * 刷新节点，如果子节点显示，设置自身显示
         */
        _refreshNormalNode(model) {
            if (model.isLeaf) {
                return;
            } else {
                this.$set(model, "isOpen", true);
                // model.isOpen = true;
                model.children.forEach((child) => {
                    this._refreshNormalNode(child);
                });

                if (!model.isVisible) {
                    for (let n of model.children) {
                        if (n.isVisible) {
                            this.$set(model, "isVisible", true);
                            // model.isVisible = true;

                            return;
                        }
                    }
                }
            }
        },

        _getCheckedGuids(model, ids) {
            if (model.children) {
                model.children.forEach((child) => {
                    if (
                        child.checkStatus === "F" ||
                        child.checkStatus === "I"
                    ) {
                        ids.push(child.guid);
                    }

                    this._getCheckedGuids(child, ids);
                });
            }
        },

        _getAcceptCheckedGuids(model, acceptFn, ids) {
            if (model.children) {
                model.children.forEach((child) => {
                    if (
                        (child.checkStatus === "F" ||
                            child.checkStatus === "I") &&
                        acceptFn(child)
                    ) {
                        ids.push(child.guid);
                    }

                    this._getAcceptCheckedGuids(child, acceptFn, ids);
                });
            }
        },

        _reformModel(model) {
            // console.log(model);
            if (Array.isArray(model)) {
                model.forEach((element) => {
                    this._reformModel(element);
                });
                return;
            }

            if (model.isVisible !== false) {
                model.isVisible = true;
            }

            if (model.children && model.children.length > 0) {
                model.children.forEach((child) => {
                    child.parentNode = model;

                    this._reformModel(child);
                });
            } else {
                model.isLeaf = true;
            }
        },
        testHasData() {
            console.log("isRoots" + this.isRoots);
            if (this.isRoots) {
                let index = this.copyModel.findIndex((element) => {
                    return element.isVisible === true;
                });

                console.log(index);
                return index > -1;
            } else {
                return this.copyModel.isVisible;
            }
        },
    },
    created() {
        this.copyModel = JSON.parse(JSON.stringify(this.model));
        this.copyModel2 = JSON.parse(JSON.stringify(this.model));
        this._reformModel(this.copyModel);

        this.$on("evt-select-node", (node) => {
            if (this.currentNode) {
                this.$set(this.currentNode, "isSelected", false);
            }

            this.currentNode = node;
            this.$set(this.currentNode, "isSelected", true);

            this.$emit("on-select-node", node);
        });
    },
};
</script>

<style lang="less">
.vx-tree {
    text-align: left;
    padding: 4px;
    font-size: 12px !important;
    position: relative;
    display: flex;
    flex-direction: column;
    border: 1px solid rgba(0, 0, 0, 0.15);

    &__filter {
        margin-bottom: 3px;
    }

    &__content {
        flex: 1;
        overflow: auto;
    }

    &__empty {
        flex: 1;
        text-align: center;
    }
}
</style>
