<template>
    <div class="left-menu">
        <div class="menu-top" v-for="item in getCurSide" :key="item.name">
            <div class="first-title">{{item.name}}</div>
            <div>
                <div v-for="itemChild in item.children" :key="itemChild.name" @click="leftMenuClick(itemChild.path)"
                     :class="activeMenu == itemChild.path?'second-title activeMenu':'second-title'">{{itemChild.name}}
                    <div>
                        <div v-for="threeChild in itemChild.children"
                             :key="threeChild.name"
                             @click="leftMenuClick(threeChild.path)"
                             :class="activeMenu == threeChild.path?'third-title activeMenu':'third-title'"
                        >
                            {{threeChild.name}}
                        </div>
                    </div>
                </div>
            </div>
        </div>
        </div>
</template>

<script>
    export default {
        props: {
            collapsed: {
                type: Boolean,
                default: true,
            },
            dynamicTags:{
                type: Array,
                default: [],
            },
        },
        data() {
            return {
                activeMenu:'',
                path:'',
                thirdMenu:''
            }
        },
        computed:{
            getCurSide() {
                let leftMenuArry = [
                    {
                        name: '综合分析',
                        children: [
                            {name: '数据汇总', path: '/dataReport/dataSummary', children: []}
                        ]
                    },
                    {
                        name: '运营分析',
                        children: [
                            {
                                name: '店铺表现', children: [
                                    {name: '店铺业绩', path: '/dataReport/storeAchievement',children:[]},
                                    {name: '店铺健康度', path: '/dataReport/storeHealth',children:[]},
                                    {name: '店铺罚款', path: '/dataReport/storeFine',children:[]}
                                ]
                            },
                            {name: '产品表现', children: [
                                    {name: '新品开发', path: '/dataReport/productsNew',children:[]},
                                    {name: '销售统计', path: '/dataReport/productsSales',children:[]},
                                    {name: '产品评分', path: '/dataReport/productsRate',children:[]}
                                    ]
                            },
                            {name: '订单表现', children: [
                                    {name: '订单统计', path: '/dataReport/orderSummary',children:[]},
                                    {name: '订单同步', path: '/dataReport/orderSynchro',children:[]}
                                ]
                            }
                        ]
                    }
                ]
                return leftMenuArry
            }
        },
        methods: {
            leftMenuClick(value){
                this.$router.push({path:value})
                this.$nextTick(() => {
                    this.activeMenu = this.$route.path;
                })
            }
        },
        mounted() {
            this.path=this.$route.path
            this.activeMenu = this.$route.path;
        },
    }

</script>

<style scoped lang="less">
    .left-menu {
        width: 160px;
        /*height: 180px;*/
        border: 1px solid #ccc;
        background: #FFFFFF;
        margin-right: 20px;
        .menu-top{
            text-align: left;
            // padding:32px 45px 0 45px;
            font-size: 16px;
            color: #333333;
            .first-title{
                height: 32px;
                line-height: 32px;
                color: #000;
                vertical-align: top;
                padding-left: 5px;
                background-color: #eee;
                border-bottom: 1px solid #dbdbdb;
                font-weight: 700;
                font-size: 13px
            }
            .second-title{
                color: #000;
                line-height: 28px;
                vertical-align: top;
                /*height: 28px;*/
                border-bottom: 1px solid #dbdbdb;
                cursor: pointer;
                padding-left: 12px;
                font-size: 13px
            }
            .third-title{
                color: #000;
                line-height: 24px;
                vertical-align: top;
                height: 28px;
                /*border-bottom: 1px solid #dbdbdb;*/
                cursor: pointer;
                padding-left: 22px;
                font-size: 13px
            }
            .activeMenu{
                color: #fff;
                background-color: #367EE2
            }
        }
    }
</style>