<template>
    <div>
      <logo v-if="showLogo" :collapse="collapse" />
      <el-menu
        :background-color="menuBgColor"
        :text-color="textColor"
        :active-text-color="activeColor"
        @select="selectMenu"
        unique-opened
        :default-active="activePath"
        :default-openeds="comArr"
        :collapse="collapse"
        class="almenu"
      >
        <MenuTree :data="menuList" :active="menuSelect" />
      </el-menu>
    </div>

</template>

<script>
    import MenuTree from './MenuTree'
    import Logo from "./Logo";
    export default {
        components: { MenuTree,Logo },
        props: {
            menuBgColor: {
                type: String,
                default: '#192122'
            },
            textColor: {
                type: String,
            default: '#6E727B'
            },
            activeColor: {
                type: String,
                default: '#1accbd'
            },
            collapse: {
                type: Boolean,
                default: false
            },
            showLogo: {
                type: Boolean,
                default: true
            },
            menuList: {
                type: Array,
                default() {
                    return [
                        {
                            path: '/basic',
                            title: '基础组件',
                            icon: '',
                            children:[
                                {
                                    path: 'grid',
                                    title: '栅格',
                                    icon: ''
                                },
                                {
                                    path: 'font',
                                    title: '字体',
                                    icon: ''
                                },
                                {
                                    path: 'icon',
                                    title: '图标',
                                    icon: ''
                                },
                                {
                                    path: 'button',
                                    title: '按钮',
                                    icon: ''
                                },
                            ]
                        },
                        {
                            path: 'combination',
                            title: '组合组件',
                            icon: '',
                            children: [
                                {
                                    path: 'input',
                                    title: '文本输入框',
                                    icon: ''
                                },
                                {
                                    path: 'switch',
                                    title: '开关',
                                    icon: ''
                                },
                                {
                                    path: 'inputNum',
                                    title: '计数器',
                                    icon: ''
                                },
                                {
                                    path: 'cascader',
                                    title: '级联选择器',
                                    icon: ''
                                },
                                {
                                    path: 'select',
                                    title: '选择器',
                                    icon: ''
                                },
                                {
                                    path: 'table',
                                    title: '表格',
                                    icon: ''
                                },
                                {
                                    path: 'checkbox',
                                    title: '多选框',
                                    icon: ''
                                },
                                {
                                    path: 'datetime',
                                    title: '时间日期选择器',
                                    icon: ''
                                },
                                {
                                    path: 'card',
                                    title: '卡片',
                                    icon: ''
                                },
                            ]
                        },
                        {
                            path: 'model',
                            title: '模版组件',
                            icon: '',
                            children: [
                                {
                                    path: 'form',
                                    title: '表单',
                                    icon: ''
                                },
                                {
                                    path: 'quickForm',
                                    title: '便捷表单单列',
                                    icon: ''
                                },
                                {
                                    path: 'quickFormtow',
                                    title: '便捷表单双列',
                                    icon: ''
                                },
                                {
                                    path: 'quickFormthree',
                                    title: '便捷表单三列',
                                    icon: ''
                                },
                                {
                                    path: 'showmore',
                                    title: '高级搜索',
                                    icon: ''
                                },
                                {
                                    path: 'navMenu',
                                    title: '导航菜单',
                                    icon: ''
                                },
                            ]
                        },
                        {
                            path: 'demo',
                            title: 'demo',
                            icon: '',
                            children: [
                                {
                                    path: 'uploadjson',
                                    title: '上传表单配置',
                                    icon: ''
                                }
                            ]
                        },
                    ]
                }
            }
        },
        data() {
            return {
                activePath: this.$route.path,
                menuSelect: '',
            }
        },
        updated() {
            this.$nextTick(() => {
                this.setActivePath(this.menuList, this.$route.name)
            })
        },
        computed:{
            comArr(){
                var arr=[];
                for (var i =0;i<this.menuList.length;i++){
                    arr.push(this.menuList[i].path)
                }
                return arr;
            }
        },
        methods: {
            setActivePath(links, path) {
                links.some((item, index) => {
                    if (path === item.path) {
                        this.activePath = item.path
                        return true
                    }
                    if (item.actives) {
                        if (item.actives.indexOf(path) > -1) {
                            this.activePath = item.path
                            return true
                        }
                    }
                    if (item.children && item.children.length) {
                        this.setActivePath(item.children, path)
                    }
                    return false
                })
            },
            selectMenu(item, indexPath) {
                this.menuSelect = item
                // const arr = item.split(',')
                // if (arr[0] !== 'undefined') {
                //     this.$router.push({ name: arr[0] })
                // }
                this.$emit('selectMenu',{item,indexPath})
            }
        }
    }
</script>

<style lang="scss">
  .almenu{
    li {
      text-align: left;
    }
    &.el-menu {
      width: 210px;
    }
    .el-submenu__title {
      font-size: 14px;
      color: #c8cbd1 !important;
    }
    .el-menu--collapse {
      width: 77px;
      .el-submenu {
        &>.el-submenu__title {
          &>span {
            height: 0;
            width: 0;
            overflow: hidden;
            visibility: hidden;
            display: inline-block;
          }
          .el-submenu__icon-arrow{
            display: none;
          }
        }
      }
    }
    .el-submenu {
      overflow: hidden;
      .is-active {
      }
      .el-menu-item {
        height: 40px !important;
        line-height: 40px !important;

        &:hover {
          background-color: #192122 !important;
        }
      }
      .el-submenu__title,.submenu-title-noDropdown {
        &:hover {
          background-color: #192122 !important;
        }
        .el-submenu__icon-arrow {
          color: #b4b8c5;
        }
      }
    }
    .el-menu--collapse .el-menu .el-submenu {
      min-width: 210px !important;
    }
    .menuTree {
      .el-menu-item .el-submenu__title {
        height: 56px;
        line-height: 56px;
        box-sizing: border-box;
      }
    }
  }
</style>
