<template>
    <ul :class="$style.accordion">
        <li
            v-for="(father,n) in accordion"
            v-if="father.children.length>0"
            :key="n"
            :class="father.isActive&&$style.active"
        >
            <Touch
                tag="div"
                :class="$style.father"
                @tap="tapFather(father,n)"
            >
                <IconFont :class="$style.icon">{{father.icon}}</IconFont>
                <span :class="$style.name">{{father.name}}</span>
                <IconFont v-if="father.isActive" key="1" :class="$style.arrow">&#xe1;</IconFont>
                <IconFont v-else key="2" :class="$style.arrow">&#xe2;</IconFont>
            </Touch>
            <div
                :class="$style.childrenWrap"
            >
                <ul :style="{marginTop:$px2rem(-40*father.children.length)}">
                    <Touch
                        tag="li"
                        v-for="(child,m) in father.children"
                        :key="m"
                        @tap="tapChild(child,n,m)"
                        :class="child.isActive&&$style.active"
                        :style="{height:$px2rem(40)}"
                    >
                        {{child.name}}
                    </Touch>
                </ul>
            </div>
        </li>
    </ul>
</template>

<script>
    import Touch from "../external/Touch";
    import IconFont from "../basic/IconFont";
    export default {
        name: "Accordion",
        components: {Touch,IconFont},
        props:{
            menu:{                      //菜单
                type:Array,
                default:[]
            }
        },
        data(){
            return {
                accordion:[]
            }
        },
        mounted(){
            this.$nextTick(()=>{
                this.accordion=this.menu.map(function({children,...father}){
                    var result=[],
                        flag=false;

                    for(let child of children){
                        // let isActive=this.$route.name==child.route;
                        let isActive=this.routeMatch(child.route);
                        if(isActive){
                            flag=true;
                        }
                        result.push({
                            ...child,
                            isActive
                        });
                    }
                    // if(this.$route.name===father.route){
                    //     flag=true;
                    // }
                    if(this.routeMatch()){
                        flag=true;
                    }
                    return {
                        ...father,
                        isActive:flag,
                        children:result
                    }
                }.bind(this))
            })
        },
        watch:{
            $route(){
                this.accordion=this.menu.map(function({children,...father}){
                    var result=[],
                        flag=false;

                    for(let child of children){
                        // let isActive=this.$route.name==child.route;
                        let isActive=this.routeMatch(child.route);
                        if(isActive){
                            flag=true;
                        }
                        result.push({
                            ...child,
                            isActive
                        });
                    }
                    // if(this.$route.name===father.route){
                    //     flag=true;
                    // }
                    if(this.routeMatch()){
                        flag=true;
                    }
                    return {
                        ...father,
                        isActive:flag,
                        children:result
                    }
                }.bind(this))
            }
        },
        methods:{
            getRoute(target){
                if(target===undefined){
                    return {
                        name:'',
                        params:{}
                    };
                }
                else if(typeof target === 'string'){
                    return {
                        name:target,
                        params:{}
                    };
                }
                return target;
            },
            routeMatch(target){
                /*格式转化*/
                if(target===undefined){
                    target={
                        name:'',
                        params:{}
                    };
                }
                else if(typeof target === 'string'){
                    target={
                        name:target,
                        params:{}
                    };
                }

                /*如果该选项被当前页面依赖，则判断为match*/
                if(this.$route.meta.relevance===target.name){
                    return true;
                }

                /*name匹配不上，unmatch*/
                if(this.$route.name!=target.name){
                    return false;
                }

                /*判断params是否一致*/
                for(let [key,value] of Object.entries(this.$route.params)){
                    if(typeof target.params[key] === 'undefined'){
                        return false;
                    }
                    if(target.params[key]!=value){
                        return false;
                    }
                }
                return true;
            },
            tapFather(item,index){
                let tempAcc=JSON.parse(JSON.stringify(this.accordion));
                if(item.route){
                    this.$router.push(this.getRoute(item.route));
                    // for(let [n,father] of Object.entries(tempAcc)){
                    //     if(n==index){
                    //         tempAcc[n].isActive=false;
                    //     }
                    //     for(let [m,child] of Object.entries(father.children)){
                    //         tempAcc[n].children[m].isActive=false;
                    //     }
                    // }
                }
                else{
                    for(let [n,father] of Object.entries(tempAcc)){
                        if(n==index){
                            tempAcc[n].isActive=!item.isActive;
                        }
                        else{
                            tempAcc[n].isActive=false;
                        }
                    }
                }
                this.accordion=tempAcc;
            },
            tapChild(item,fatherIndex,childIndex){
                const Route=this.getRoute(item.route);
                let tempAcc=JSON.parse(JSON.stringify(this.accordion));
                if(item.isActive&&Route.name===this.$route.name){
                    return;
                }
                if(item.route){
                    this.$router.push(Route);
                }
                else{
                    return;
                }
                // for(let [n,father] of Object.entries(tempAcc)){
                //     for(let [m,child] of Object.entries(father.children)){
                //         if(n==fatherIndex&&m==childIndex){
                //             tempAcc[n].isActive=true;
                //             tempAcc[n].children[m].isActive=true;
                //         }
                //         else{
                //             if(n==fatherIndex){
                //                 tempAcc[n].children[m].isActive=false;
                //             }
                //             else{
                //                 tempAcc[n].isActive=false;
                //                 tempAcc[n].children[m].isActive=false;
                //             }
                //         }
                //     }
                // }
                // this.accordion=tempAcc;
            }
        }
    }
</script>

<style module lang="scss">
    @import '../../cssInjection/cssLayout.scss';
    .accordion{
        width: 100%;
        >li{
            width: 100%;
            display: block;
            color: #FFF;
            transition: background-color .2s;
            background-color: #304156;
            &.active{
                background-color: #1F2C3D;
                >.childrenWrap{
                    >ul{
                        margin-top: 0% !important;
                    }
                }
            }
            $paddingLeft: 46px;
            >.father{
                width: 100%;
                height: 46px;
                text-align: left;
                padding: 0 36px 0 $paddingLeft;
                letter-spacing: 1PX;
                position: relative;
                cursor: pointer;
                @extend %FlexRowStartCenter;
                >.icon{
                    $left:$paddingLeft*3/5;
                    font-size: 22px;
                    color: #FFF;
                    @extend %AbsoluteCenter;
                    left: $left;
                }
                >.name{
                    line-height: 1.2em;
                    font-size: 16px;
                }
                >.arrow{
                    font-size: 14px;
                    @extend %AbsoluteVerticalCenter;
                    right: 10px;
                }
            }
            >.childrenWrap{
                width: 100%;
                overflow: hidden;
                >ul{
                    transform: translate3d(0,0,0);
                    transition: margin-top .5s 0s;
                    >li{
                        padding-left: $paddingLeft;
                        font-size: 14px;
                        @extend %FlexRowStartCenter;
                        cursor: pointer;
                        &.active{
                            color: #45C0FF;
                        }
                    }
                }
            }
        }
    }
</style>