<!--
 * @Description: 移动端锚点组件
 * @Date: 2020-07-07 14:03:20
 * @LastEditTime: 2020-10-20 15:54:05
 * @LastEditors: 李璕
--> 

<template>
    <div
        class="see-anchor"
        :class="{
            active: pageType === 'active',
            detail: pageType === 'detail',
        }"
    >
        <template>
            <div class="see-anchor__active">
                <div class="see-anchor__active__title" @click="showMenu">
                    <span>{{ activeMenu }}</span>
                    <seeyon-icon iconClass="arrow-down-serif"></seeyon-icon>
                </div>
                <template v-if="anchorList && anchorList.length">
                    <div
                        class="see-anchor-select"
                        v-show="showAnchor"
                        :style="{
                            top: fixTop + 'px',
                        }"
                    >
                        <a-anchor
                            class="see-anchor-select_main"
                            :getContainer="getContainer"
                            :affix="false"
                            @change="activeChange"
                            :targetOffset="250"
                        >
                            <a-anchor-link
                                v-for="lv1 in anchorList"
                                v-if="lv1.isVisible"
                                :key="lv1.id"
                                :href="lv1.href"
                                :title="lv1.label"
                                target="_self"
                            >
                                <template
                                    v-if="
                                        lv1 &&
                                        lv1.children &&
                                        lv1.children.length
                                    "
                                >
                                    <a-anchor-link
                                        v-for="lv2 in lv1.children"
                                        :key="lv2.id"
                                        v-if="lv2.isVisible"
                                        :href="lv2.href"
                                        :title="lv2.label"
                                        target="_self"
                                    >
                                        <template
                                            v-if="
                                                lv2 &&
                                                lv2.children &&
                                                lv2.children.length
                                            "
                                        >
                                            <a-anchor-link
                                                v-for="lv3 in lv2.children"
                                                :key="lv3.id"
                                                :href="lv3.href"
                                                v-if="lv3.isVisible"
                                                :title="lv3.label"
                                                target="_self"
                                            />
                                        </template>
                                    </a-anchor-link>
                                </template>
                            </a-anchor-link>
                        </a-anchor>
                        <div class="closeMenu" @click="closeMenu">取消</div>
                    </div>
                </template>
            </div>
        </template>
    </div>
</template>

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

export default {
    name: "see-anchor-mobile",
    mixins: [permissionMixin],
    props: {
        componentData: {
            required: true,
        },
        contanerId: {
            type: String,
            required: true,
        },
        targetOffset: {
            type: Number,
            required: true,
        },
        pageType: {
            // design 设计页， 详情页，active 活动页
            default: "detail",
            required: false,
        },
    },
    components: {},
    data() {
        return {
            fixTop: 0,
            // anchorList: [],
            getContainer: () => document.getElementById(this.contanerId),
            activeMenu: "",
            showAnchor: false,
        };
    },
    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;
        },
        findNodeByTarget(href, treeData) {
            for (let i = 0; i < treeData.length; i++) {
                let node = treeData[i];
                if (node.href === href) {
                    return node;
                }
                if (node.children && node.children.length) {
                    let tempNode = this.findNodeByKey(href, node.children);
                    if (tempNode) {
                        return tempNode;
                    }
                }
            }
            return false;
        },
        //判断节点的展示权限
        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;
        },
        initTreeData(array) {
            for (let i = 0; i < array.length; i++) {
                let node = array[i];
                this.setNodeVisible(node);
                if (!node.href) node.href = "javascript:;";
                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));
            if (clone[0]) {
                for (let node of clone) {
                    if (node.isVisible) {
                        this.activeMenu = node.label;
                        break
                    }
                }
            }
            return clone.sort((a, b) => Number(a.sort) - Number(b.sort));
            function findNodeById(arrry, id) {
                return array.find((n) => n.id == id);
            }
        },
        activeChange(val) {
            let node = this.findNodeByTarget(val, this.anchorList);

            if (node) {
                if (node.cmsHrefType === "OUTER") {
                    window.location.href = node.href;
                    return;
                }
                this.activeMenu = node.label;
            }
            if (document.getElementsByClassName("bar-tab")[0]) {
                document.getElementsByClassName("bar-tab")[0].style.display =
                    "flex";
                document.getElementsByClassName("bar-tab")[0].style.zIndex = 10;
                this.getContainer().style.overflowY = "scroll";
            }

            this.showAnchor = false;
        },
        showMenu() {
            if (this.anchorList.filter((n) => n.isVisible).length === 0) {
                return;
            }

            if (document.getElementsByClassName("bar-tab")[0]) {
                document.getElementsByClassName("bar-tab")[0].style.display =
                    "none";
                document.getElementsByClassName("bar-tab")[0].style.zIndex = 1;
                this.getContainer().style.overflowY = "hidden";
            }

            this.showAnchor = true;
            this.$nextTick(() => {
                this.fixTop = -this.$el
                    .getElementsByClassName("see-anchor-select")[0]
                    .getBoundingClientRect().top;
            });
        },
        closeMenu() {
            this.fixTop = 0;
            if (document.getElementsByClassName("bar-tab")[0]) {
                document.getElementsByClassName("bar-tab")[0].style.display =
                    "flex";
                document.getElementsByClassName("bar-tab")[0].style.zIndex = 10;
                this.getContainer().style.overflowY = "scroll";
            }
            this.showAnchor = false;
        },
    },
    created() {},
    watch: {},
    mounted() {},
    computed: {
        anchorList() {
            let data = this.componentData || [];
            data = JSON.parse(JSON.stringify(data));
            return this.initTreeData(data);
        },
    },
    beforeDestory() {},
};
</script>

<style lang='scss'>
.see-anchor {
    .see-anchor__active {
        position: relative;
        top: 0;
        width: 100%;
        height: 80px;
        padding: 0px 15px;
        background: #f2f5f7;

        display: flex;
        align-items: center;
        .see-anchor__active__title {
            width: 100%;
            height: 40px;
            line-height: 40px;
            font-size: 14px;
            font-weight: 600;

            text-align: center;
            color: #000;
            background: #ffffff;
            box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.07);
            border-radius: 30px;
            .svg-icon {
                margin-left: 6px;
                font-size: 20px;
                vertical-align: middle;
                color: #999;
            }
        }
    }

    .see-anchor-select {
        position: fixed;
        overflow: visible;
        height: 100vh;
        width: 100%;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        z-index: 99999;
        // background: red;
        background: rgba(0, 0, 0, 0.5);
        margin-left: 0;
        padding-left: 0;
        .see-anchor-select_main {
            height: 80vh;
            overflow: auto;
            background: white;
        }

        .ant-anchor {
            padding-left: 0;
        }
        .ant-anchor-link {
            min-height: 50px;

            background: white;
            position: relative;
            line-height: 50px;
            padding: 0 12px;
            font-size: 14px;
            color: #333;
            &:after {
                content: "";
                position: absolute;
                left: 10px;
                bottom: -1px;
                right: 10px;
                top: auto;
                height: 1px;
                background-color: #eeeeee;
                display: block;
            }
            &.selected {
                background: #3ac4ff;
                color: #fff;
            }
        }

        .ant-anchor-ink::before {
            display: none;
            content: "";
        }

        .closeMenu {
            position: absolute;
            width: 90%;
            text-align: center;
            font-size: 16px;
            bottom: 3vh;
            margin: 20px 5%;
            height: 40px;
            line-height: 40px;

            border-radius: 4px;
            background: white;
        }
    }
}
</style>

