<!--  -->
<template>
    <div>
        <el-menu :default-active="activeIndex" class="el-menu-profession" mode="horizontal" @select="handleSelect">
            <template v-for="(item,index) in reallMenuLists" :key="index">
            <el-submenu
            v-if="item.children"
            :index="item.index">
                <template #title>{{item.title}}</template>
                <el-menu-item style="font-size:large;color:#303133"
                @click="changeObjtypeEvent(itemChildren,indexChildren)"
                :index="itemChildren.index"
                v-for="(itemChildren,indexChildren) in item.children"
                :key="indexChildren">{{itemChildren.title}}</el-menu-item>
            </el-submenu>
            <el-menu-item
            v-else
            style="font-size:large;color:#303133"
            :index="item.index"
            @click="changeObjtypeEvent(item,index)">{{item.title}}</el-menu-item>
            </template>
        </el-menu>
    </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';

export default {
    //import引入的组件需要注入到对象中才能使用
    props:['currentNodeId','projectName','reallMenuLists'],
    components: {},
    data() {
    //这里存放数据
        return {
            // type:'',//专业类型
            activeIndex: '',
            checkedMemder:{},
            activeName: '前期与设计',

        };
    },
    //监听属性 类似于data概念
    computed: {
        type(){
            if(this.activeName == '前期与设计'){
                return 1;
            }else if(this.activeName == '建设管理'){
                return 2;
            }else if(this.activeName == '计划下达与执行'){
                return 3;
            }else if(this.activeName == '资金使用与管理'){
                return 4;
            }else if(this.activeName == '工程质量'){
                return 5;
            }else{
                return 6;
            }
        },
        persId() {
            return localStorage.getItem("userid")
                ? localStorage.getItem("userid")
                : "1098101939614724096";
        },
    },
    //监控data中的数据变化
    watch: {

    },
    //方法集合
    methods: {
        setactiveIndex(){
            this.activeIndex = '1'
        },
        handleSelect(key, keyPath) {
            console.log(key, keyPath);
        },
        changeObjtypeEvent(item,index){
            let upObj = {};
            if(this.currentNodeId == ''){
                this.$message({
                    message: '请先在左侧选择工程！',
                    type: 'warning'
                });
            }else{
                // this.checkedMemder = item;//控制了点选的是哪个子表
                upObj['tableName'] = item.title;
                upObj['type'] = item.pType;
                if(item.hasOwnProperty('reportSrc')){
                    upObj['tableSrc'] = item.reportSrc;
                }
                this.$emit('professionChildrenTableName',upObj);
            }
        },
    },
    //生命周期 - 创建完成（可以访问当前this实例）
    created() {

    },
    //生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {

    },
    beforeMount() {}, //生命周期 - 挂载之前
    beforeUpdate() {}, //生命周期 - 更新之前
    updated() {}, //生命周期 - 更新之后
    beforeDestroy() {}, //生命周期 - 销毁之前
    destroyed() {}, //生命周期 - 销毁完成
    activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style>
.el-menu-profession{
    .el-submenu__title{
        font-size: large;
        color: #303133 !important;
    }
    // .el-menu--horizontal>.el-submenu .el-submenu__title{
    //     color: #303133 !important;
    // }
    // .el-menu--horizontal .el-menu .el-menu-item{
    //     color: #303133 !important;
    // }


}
@media screen and (max-width: 1680px) {
    .el-menu-profession .el-submenu__title{
        padding: 0 12px;
    }
}
</style>
