<template>
	<div class="el-top-Menu">
         <div class="menu-list" v-for="(item,index) in MenuData.list" :key="index"  @click="junpUrl(item)">
			<el-badge
				:hidden="!item.pendingNum"
				:max="99"
				:value="item.pendingNum"
				class="infoWarring"
			>
			<span>{{item.res_na}}</span>
			<!-- <div class="line-dis" v-show="currentTab == index"></div> -->
			</el-badge>
		 </div>
		 <div class="menu-list2"><i class="el-icon-plus" @click="addIcone"></i></div>
		 <el-dialog :visible.sync="menushow" :append-to-body="true"  :show-close="false" class="menuDlogTop" :modal="false">
		    <menu-cont :itemdata="MenuData" ref="menuRef"  :data="data" @getMessage="closeShow"/>
		 </el-dialog>
	</div>
</template>
<script>
import MenuCont from './MenuCont'
import ElDialog from 'element-ui-qz/packages/dialog';
import ElIcon from 'element-ui-qz/packages/icon';
import ElBadge from 'element-ui-qz/packages/badge';
export default {
	name: 'ElProtalMenu',
	mixins: [],
	props: {
		data: {
		  type: Object,
		  default: () => {
		    return {};
		  }
		}
	},
	components: {
        MenuCont,
		ElDialog,
		ElIcon,
		ElBadge
	},
	data() {
		 const myUserinfo = localStorage.getItem('myUserinfo');
		return {
			dataRend: '',
            needFixed: false,
            width:0,
            check:false,
			menUrl:"mhgl-prj/ManagerPlate/refresh",
		    getUsers: myUserinfo ? JSON.parse(myUserinfo) : '',
			MenuData:[],
		    menushow: false,
			currentTab:''
		};
	},
	watch: {
		$route: {
			handler: function(val, oldVal){
				this.mainRend();
			},
			// 深度观察监听
			deep: true
		}
	},
	created() {
       this.mainRend()
	},
	methods: {
		junpUrl(item) {
		     let path =item.res_url_ca.split('/#')[1]
		     this.$router.push({path:path})
		},
		mainRend(){
			let parmas = {};
			parmas.type = 'menu';
			parmas.user_prn =this.getUsers.prn;
            parmas.dispOr = '1';
			this.$http.post(this.data.baseUrl + this.menUrl, parmas, {
			    emulateJSON: true
			  })
			  .then((res) => {
			       this.MenuData=res.data.obj.itemData;
			  });
		},
		addIcone(){//增加菜单
           this.menushow=true
		   console.log("menushow",this.menushow)
		},
	   closeShow() {
            //设置菜单关闭
            this.menushow = false;
            this.mainRend();
        },
		async datadragEnd() {
            let that = this;
            	let resp = await getDefaultUrl(that.data.saveMenu,{
            		 menuMap:JSON.stringify(that.itemdata.list),
                    user_prn:that.data.user_prn
            	});
            	if (resp.status === false) {
            		that.$message.error(resp.error[0]);
            		return;
            	}
        }
     }
};
</script>

<style  lang="scss">
	.el-top-Menu{
		display: -webkit-box;
		/* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */
		display: -moz-box;
		/* Firefox 17- */
		display: -webkit-flex;
		/* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */
		display: -moz-flex;
		/* Firefox 18+ */
		display: -ms-flexbox;
		/* IE 10 */
		display: flex;
		/* Chrome 29+, Firefox 22+, IE 11+, Opera 12.1/17/18, Android 4.4+ */
		/* -webkit-box-pack: center;
		-ms-flex-pack: center;
		-webkit-justify-content: center;
		justify-content: center; */
		-webkit-box-align: center;
		-ms-flex-align: center;
		-webkit-align-items: center;
		align-items: center;
	/* 	overflow-x: auto; */
		margin: 0 10px;
		height:100%;
	}
	
	.el-top-Menu .menu-list{
/* 		min-width:56px; */
		font-size: 14px;
		font-family: PingFang SC;
		font-weight: 400;
		color: #333333;
		opacity: 0.6;
		margin:0 16px;
		white-space:nowrap;
		position: relative;
		.line-dis{
			
		}
	}
	.el-top-Menu .menu-list2{
		font-size: 14px;
		font-family: PingFang SC;
		font-weight: 400;
		color: #333333;
		opacity: 0.6;
		margin:0 16px;
		white-space:nowrap;
		&:hover{
			cursor:pointer;
		}
	}
	.el-top-Menu .menu-list:hover{
		// border-bottom: 2px solid #1A90FD;
        opacity: 1;
		cursor:pointer;
		&:after{
			content:"";
			position:absolute;
			width: 32px;
			height: 3px;
			border-radius:6px;
			bottom: 0;
			background:#1A90FD;
			margin-bottom: 0;
			left:50%;
			bottom:-13px;
			z-index:200;
			margin-left:-16px;
		}
	}
	.menuDlogTop .el-dialog {
		width: calc(100% - 48px);
		width: -webkit-calc(100% - 48px);
		margin-left: 48px;
}
</style>

