<template>
    <Layout class="main" style="height: 100%">
        <Sider class="left_sider" hide-trigger collapsible :width="240" :collapsed-width="53" v-model="collapsed">
            <div class="logo_box">
                <img class="logo_icon" src="/img/call_logo.png"></img>
            </div>
            <!-- <div class="menu_list">
                <div class="menu_item" :class="{'a_menu_item': $route.path===item.menuUrl||(item.menuUrl==='/data'&&$route.path.includes('/blogger'))||(item.menuUrl==='/task'&&($route.path.includes('/createTask')||$route.path.includes('/editTask'))||(item.menuUrl==='/administrator'&&$route.path.includes('/inviteUser')))}" v-for="item in menuList" :key="item.name" @click="turnToPage(item)">
                    <img class="menu_icon" :src="item.iconUrl"></img>
                    <div class="menu_name">{{ item.name }}</div>
                </div>
            </div> -->
            <Menu class="menu_list">
                <template v-for="item in menuList">
                    <div v-if="!item.children" :key="item.name" class="menu_item"
                        :class="{ 'a_menu_item': aMenu(item.menuUrl) }" @click="turnToPage(item)">
                        <img class="menu_icon" :src="aMenu(item.menuUrl) ? item.iconUrl2 : item.iconUrl1"></img>
                        <div class="menu_name">{{ item.name }}</div>
                    </div>
                    <Submenu v-if="item.children" :key="item.name" :name="item.name">
                        <template #title>
                            <div class="menu_item" :class="{ 'a_menu_item': aMenu(item.menuUrl) }">
                                <img class="menu_icon" :src="aMenu(item.menuUrl) ? item.iconUrl2 : item.iconUrl1"></img>
                                <div class="menu_name">{{ item.name }}</div>
                            </div>
                        </template>
                        <div v-for="cItem in item.children" :key="cItem.name" class="menu_item"
                            :class="{ 'a_submenu_item': aMenu(cItem.menuUrl) }" @click="turnToPage(cItem)">
                            <div class="menu_icon"></div>
                            <div class="menu_name">{{ cItem.name }}</div>
                        </div>
                    </Submenu>
                </template>
            </Menu>
        </Sider>
        <Layout class="right_content">
            <router-view/>
        </Layout>
    </Layout>
</template>
<script>
import { mapState } from 'vuex'
export default {
    name: 'Main',
    data() {
        return {
            collapsed: false,
        }
    },
    computed: {
        ...mapState({
            user: (state) => state.user, //
        }),
        menuList () {
            let menuList = []
            if (!this.user) {
                return menuList
            }
            menuList = [
                {
                    title: '经销商管理',
                    name: '经销商管理',
                    menuUrl: '/home',
                    iconUrl1: '/img/menu/home_menu_icon1@2x.png',
                    iconUrl2: '/img/menu/home_menu_icon2@2x.png',
                },
                {
                    title: '用户管理',
                    name: '用户管理',
                    menuUrl: '/user',
                    iconUrl1: '/img/menu/orders_menu_icon1@2x.png',
                    iconUrl2: '/img/menu/orders_menu_icon2@2x.png',
                },
                {
                    title: '变量话术配置',
                    name: '变量话术配置',
                    menuUrl: '/config',
                    iconUrl1: '/img/menu/config_menu_icon1@2x.png',
                    iconUrl2: '/img/menu/config_menu_icon2@2x.png',
                }
            ]
            return menuList
        }
    },
    created () {
    },
    methods: {
        aMenu (menuUrl) {
            return this.$route.path === menuUrl || this.$route.path.includes(menuUrl)
        },
        turnToPage(item) {
            this.$router.push({
                path: item.menuUrl,
            })
        },
    }
}
</script>
<style lang="less" scoped>
.main {
    background: #FAFAFA;

    .left_sider {
        background: #FFFFFF;

        .logo_box {
            padding: 32px 40px 30px;

            .logo_icon {
                height: 32px;
                cursor: pointer;
            }
        }

        .menu_list::after {
            display: none !important;
        }

        .menu_list {
            padding: 0 20px;
            margin-top: 10px;
            background: inherit;

            /deep/.ivu-menu-submenu-title {
                padding: 0 !important;
            }

            /deep/.ivu-menu-submenu-title-icon {
                right: -10px;
                color: #222222;
                font-size: 18px;
            }

            .menu_item {
                height: 48px;
                display: flex;
                align-items: center;
                border-radius: 15px;
                padding: 0 20px;
                margin-bottom: 16px;
                cursor: pointer;

                .menu_icon {
                    width: 24px;
                    height: 24px;
                    margin-right: 10px;
                }

                .menu_name {
                    font-weight: 400;
                    font-size: 16px;
                    color: #222222;
                }
            }
            /deep/.menu_item+.ivu-menu-submenu-title-icon{
                right: 10px;
            }

            .a_menu_item {
                background: #35E89A;

                .menu_name {
                    color: #FFFFFF;
                }
            }
            /deep/.a_menu_item+.ivu-menu-submenu-title-icon{
                color: #FFFFFF;
            }
            .a_submenu_item{
                background: #FAFAFA;
                .menu_name {
                    color: #35E89A;
                }
            }
        }
    }

    .right_content {
        background: #FAFAFA;
        width: calc(~'100vw - 240px');
        height: 100%;
        overflow: hidden;
    }
}
</style>
