<!--
 * @Description: 
 * @Author: 周洋
 * @Date: 2020-06-09 11:01:38
 * @LastEditTime: 2021-05-07 09:42:00
 * @LastEditors: Please set LastEditors
 * @FilePath: \cms-components\see-anchor.vue
--> 

<template>
    <div
        class="see-anchor"
        :class="{
            active: pageType === 'active',
            detail: pageType === 'detail',
        }"
    >
        <template v-if="anchorList && anchorList.length">
            <a-anchor
                :getContainer="getContainer"
                :affix="false"
                :offsetTop="pageType === 'active' ? 200 : 220"
                :targetOffset="pageType === 'active' ? 200 : 160"
                @click="handleClick"
            >
                <a-anchor-link
                    v-for="(lv1, idx) in anchorList"
                    v-if="lv1.isVisible"
                    :key="lv1.id + idx"
                    :href="lv1.href"
                    :title="lv1.label"
                    :target="lv1.cmsHrefType === 'INNER' ? '_self' : '_blank'"
                >
                    <template v-if="lv1 && lv1.children && lv1.children.length">
                        <a-anchor-link
                            v-for="lv2 in lv1.children"
                            :key="lv2.id"
                            :href="lv2.href"
                            :title="lv2.label"
                            v-if="lv2.isVisible"
                            :target="
                                lv2.cmsHrefType === 'INNER' ? '_self' : '_blank'
                            "
                        >
                            <template
                                v-if="
                                    lv2 && lv2.children && lv2.children.length
                                "
                            >
                                <a-anchor-link
                                    v-for="lv3 in lv2.children"
                                    :key="lv3.id"
                                    :href="lv3.href"
                                    :title="lv3.label"
                                    v-if="lv3.isVisible"
                                    :target="
                                        lv3.cmsHrefType === 'INNER'
                                            ? '_self'
                                            : '_blank'
                                    "
                                />
                            </template>
                        </a-anchor-link>
                    </template>
                </a-anchor-link>
            </a-anchor>
        </template>
    </div>
</template>

<script>
import permissionMixin from "./permission-mixin";

export default {
    name: "see-anchor",
    mixins: [permissionMixin],
    inject: ["$EventBus"],
    props: {
        componentData: {
            required: false,
        },
        pageType: {
            // design 设计页， 详情页，active 活动页
            default: "detail",
            required: false,
        },
    },
    components: {},
    data() {
        return {
            // anchorList: [],
            getContainer: () => window,
        };
    },
    methods: {
        findNodeByKey(key, treeData) {
            for (let i = 0; i < treeData.length; i++) {
                let node = treeData[i];
                if (node.key === key) {
                    return node;
                }
                if (node.children && node.children.length) {
                    let tempNode = this.findNodeByKey(key, node.children);
                    if (tempNode) {
                        return tempNode;
                    }
                }
            }
            return false;
        },
        initTreeData(array) {
            for (let i = 0; i < array.length; i++) {
                let node = array[i];
                // 没设置锚点或者链接生成一个唯一href
                // 如果是外部链接没设置值，将其改为内部锚点，防止点击打开新的窗口
                if (!node.href) {
                    let tmpKey = node.cmsHrefType == "INNER" ? "#NI" : "#NO";
                    node.href = tmpKey + new Date().getTime() + i;
                    node.cmsHrefType = "INNER";
                }
                let parentNode = findNodeById(array, node.parentId);
                if (parentNode) {
                    node.isChild = true;
                    if (parentNode.children) {
                        parentNode.children.push(node);
                        parentNode.children = parentNode.children.sort(
                            (a, b) => Number(a.sort) - Number(b.sort)
                        );
                    } else {
                        parentNode.children = [node];
                    }
                }
            }
            let treeData = array.filter((n) => !n.isChild);
            let clone = JSON.parse(JSON.stringify(treeData));
            return clone.sort((a, b) => Number(a.sort) - Number(b.sort));
            function findNodeById(arrry, id) {
                return array.find((n) => n.id == id);
            }
        },
        //判断节点的展示权限
        setNodeVisible(node) {
            const nodeRoles = node.roles;
            //老数据默认展示
            if (
                !nodeRoles ||
                !Array.isArray(nodeRoles) ||
                nodeRoles.length === 0
            ) {
                node.isVisible = true;
                return true;
            }
            if (nodeRoles.includes("ROLE_ALL")) {
                node.isVisible = true;
                return true;
            }
            const userRoles = this.roleList || [];

            for (let role of userRoles) {
                if (nodeRoles.includes(role)) {
                    node.isVisible = true;
                    return true;
                }
            }

            node.isVisible = false;
        },

        //搞点恶心的逻辑。处理平级展示的父子节点
        dealTree(nodes) {
            let hiddenNodeIds = nodes
                .filter((n) => !n.isVisible)
                .map((n) => n.id);
            nodes
                .filter((n) => hiddenNodeIds.includes(n.parentId))
                .forEach((n) => {
                    n.isVisible = false;
                });
            hiddenNodeIds = nodes.filter((n) => !n.isVisible).map((n) => n.id);
            nodes
                .filter((n) => hiddenNodeIds.includes(n.parentId))
                .forEach((n) => {
                    n.isVisible = false;
                });
        },
        handleClick(){
            this.$EventBus.$emit('anchorClick');
        }
    },
    created() {},
    watch: {},
    mounted() {},
    computed: {
        anchorList() {
            let data = this.componentData || [];
            data.forEach((node) => {
                this.setNodeVisible(node);
            });

            if (this.pageType === "active") {
                this.dealTree(data);

                // 活动直接平级展示
                var stack = [].concat([].concat(this.initTreeData(data)).reverse())
                var current
                var arry = []
                while (stack.length) {
                    current = stack.pop()
                    let _cloneNode = JSON.parse(JSON.stringify(current))
                    delete _cloneNode.children
                    arry.push(_cloneNode)
                    if (current.children && current.children.length) {
                        stack = stack.concat([].concat(current.children).reverse())
                    }
                }
                return arry
            } else {
                // 应用还是区分三级
                return this.initTreeData(data);
            }
        },
    },
    beforeDestory() {},
};
</script>

<style lang='scss' scoped>
.detail {
    /deep/ .ant-anchor {
        padding-left: 0;
        font-size: 16px;
        color: #2d5bb1;
    }
    /deep/ .ant-anchor-wrapper {
        padding-left: 0;
        margin-left: 0;
    }
    /deep/ .ant-anchor-ink {
        display: none;
    }
    /deep/ .ant-anchor-link {
        padding: 0;
    }
    /deep/ .ant-anchor-link-title {
        margin-bottom: 0;
        color: #2d5bb1;
    }
    /deep/ .ant-anchor-link-active > .ant-anchor-link-title {
        color: #000;
        font-weight: 700;
        &::before {
            content: "";
            position: absolute;
            left: 0;
            bottom: 0;
            top: 0;
            width: 6px;
            background: #007aff;
        }
    }
    /deep/ .ant-anchor > .ant-anchor-link > .ant-anchor-link-title {
        padding: 11px 11px 11px 30px;
    }
    /deep/
        .ant-anchor
        > .ant-anchor-link
        > .ant-anchor-link
        > .ant-anchor-link-title {
        padding: 11px 11px 11px 60px;
    }
    /deep/
        .ant-anchor
        > .ant-anchor-link
        > .ant-anchor-link
        > .ant-anchor-link
        > .ant-anchor-link-title {
        padding: 11px 11px 11px 90px;
    }
}
.active {
    // position: absolute;
    // right: 360px;
    // top: 80px;
    /deep/ .ant-anchor {
        font-size: 12px;
    }
    /deep/ .ant-anchor-ink {
        .visible {
            display: inline-block !important;
        }
    }
    /deep/ .ant-anchor-link {
        padding: 12px 0 12px 16px;
    }
    /deep/ .ant-anchor-link-active > .ant-anchor-link-title {
        font-weight: bold;
    }
}
</style>


