<template>
   <div class="menuContpare">
	<div class="menuContBootom">
		<div class="menuContbox">
			<draggable v-model="datademo"  :options="{ group: {name:'ronli', put:true}}" class="menuContboxChild">
					<div class="slider-Content" v-for="(item, index) in datademo" :key="index">
						<div class="slider-Latex">
							<div class="imgcont">
							<img :src="`${data.baseUrl}${pictureshows}${item.res_icon_no}`" v-if="item.res_icon_no"/>
							<img src="../img/e4.png" v-else/>
							<span class="iconbase">
							<i class="el-icon-minus" @click="delateIcon(item,index)"></i></span></img></div>
							<div class="text">{{item.res_na}}</div>
						</div>
					</div>
			</draggable>
			<el-button class="savebtn" @click="saveMenus">保存</el-button>
			<i class="el-icon-close closebtn" @click="closeShow"></i>
			<div class="menuContent">
				<div class="menutop">
					<el-button-group class="btnContent">
						  <el-button v-for="(item,i) in firstLevelCont" :key="item.res_no" :class="[tabPosition==i?'active':'']"
						   @click.native="handleClick(item,i)">{{item.res_na}}</el-button>
				</el-button-group>
				</div>
			<div class="menuCenter">
				<div class="menuList" v-for="(items, i) in secondaryCont" :key="i">
						 <div  class="menutitle">{{items.res_na}}</div>
						<draggable v-model="items.sub_list"  :sort="false" :options="{group: {name:'ronli', put:false}}">
						 <div class="slider-Content" v-for="(item,index) in items.sub_list" :key="index">
							<div class="slider-Latex">
								 <div class="imgcont">
								<img :src="`${data.baseUrl}${pictureshows}${item.res_icon_no}`" v-if="item.res_icon_no" @click="addIcon(item,index)"/>
								<img src="../img/e4.png" v-else @click="addIcon(item,index)"/>
								<span class="iconbase"><i class="el-icon-plus" @click="addIcon(item,index)"></i></span></div>
								  <div class="text">{{item.res_na}}</div>
							  </div>
							</div>
						 </draggable>
					   </div>
				   </div>
			</div>
		</div>
	</div>
</div>
</template>
<script>
import draggable from 'vuedraggable'
// import { getAllMenu,Pictureshows,saveMenu} from '../../api/config.js'
// import {Pictureshows,getDefaultUrl} from '@/api';
import ElButtonGroup from 'element-ui-qz/packages/button-group';
import ElButton from 'element-ui-qz/packages/button';
export default {
	name: 'MenuCont',
	props: {
		width: {
			type: String,
			default: '200px'
		},
		defalutColor: {
			type: String,
			default: 'red'
		},
		itemdata: {
			default: Object
		},
        data:{
           default: Object
        }
	},
	data() {
		 const myUserinfo = localStorage.getItem('myUserinfo');
		return {
			tabPosition:0,
			firstLevelCont:[],//一级菜单
			secondaryCont:[],//二级菜单
		    datademo:[],
			 getAllMenu:"mhgl-prj/userInfo/getAllMenu",
			 saveMenu:"mhgl-prj/userInfo/saveMenu",
             pictureshows:'tu-prj/cu/cuicons/loadImage?iconNo=',
			  getUsers: myUserinfo ? JSON.parse(myUserinfo) : '',
		}
	},
	components: {
		draggable,
		ElButtonGroup,
		ElButton
	},
	mounted() {

	},
   created() {
	    console.log("9091")
       this.getMenu()
    },
	methods: {
		 getMenu() {//获取菜单栏
		     console.log("9090")
            let that = this;
           let parmas = {};
			parmas.user_prn =this.getUsers.prn;
			this.$http.post(this.data.baseUrl + this.getAllMenu, parmas, {
			    emulateJSON: true
			  })
			  .then((res) => {
			        that.firstLevelCont=res.data.obj;
		        	that.secondaryCont=that.firstLevelCont[0].sub_list;
			  })
		},
		handleClick(tab,index){
			 this.tabPosition=index;
			 this.secondaryCont=tab.sub_list
		},
		addIcon(item,index){//增加菜单栏
		    let that=this;
		    let first_res_no=item.first_res_no;
			let fa_res_no=item.fa_res_no;
			for(let v of this.firstLevelCont){
				if(v.first_res_no===first_res_no){
					 for(let j of v.sub_list){
						 if(j.res_no==fa_res_no){
							 j.sub_list.splice(index,1)
							  that.datademo.unshift(item)
						 }
					 }
				}
			}
		},
		delateIcon(item,index){//删除菜单栏
        //   let that=this;
        //   let first_res_no=item.first_res_no;
		//   let fa_res_no=item.fa_res_no;
        //   for(let v of this.firstLevelCont){
		// 		if(v.first_res_no===first_res_no){
		// 			 for(let j of v.sub_list){
		// 				 if(j.res_no==fa_res_no){
		// 					 j.sub_list.push(item)
		// 					 that.datademo.splice(index,1)
		// 				 }
		// 			 }
		// 		}
		// 	}
		this.datademo.splice(index, 1)
		},
		 saveMenus(){//保存菜单栏
		   let that = this;
           let parmas = {};
			parmas.user_prn =this.getUsers.prn;
			parmas.menuMap =JSON.stringify(that.datademo);
			this.$http.post(this.data.baseUrl + this. saveMenu, parmas, {
			    emulateJSON: true
			  })
			  .then((res) => {
			      that.$emit('getMessage', '我是父组件')
			  })
		},
		closeShow(){//关闭
		   this.$emit('getMessage', '我是父组件')
		}
	},
	watch:{
		datademo(){

		},
    itemdata: {
    	handler(newName, oldName) {
        this.datademo=this.itemdata.list;
          this.getMenu()
    	},
    	// 代表在wacth里声明了firstName这个方法之后立即先去执行handler方法
    	immediate: true
    },
	}
};
</script>

<style lang="scss">

.menuContpare{
	top: 0;
	width: 100%;
	// height:calc(100vh - 48px;);
	.menuContBootom {
		height: 544px;
		box-shadow: 0px 1px 4px rgba(204, 204, 204, 1);
		background: #ffffff;
		.menuContbox{
		   .menuContboxChild{
			   width:864px;
			   margin:0 auto;
			   height:88px;
			  white-space: nowrap;
			  overflow-x:scroll;
			  overflow-y:hidden;
			   /* 滚动条默认样式 */
				&::-webkit-scrollbar-track-piece {
					//滚动条凹槽的颜色，还可以设置边框属性
					background-color: #f8f8f8 !important;
				}
				&::-webkit-scrollbar {
					//滚动条的宽度
					// display: none;
					width: 6px !important;
					height: 6px !important;
					opacity: 1 !important;
					border-radius: 8px !important;
				}
				&::-webkit-scrollbar-button{
					display:none !important;
				}
				/*定义滑块 内阴影+圆角*/
				&::-webkit-scrollbar-thumb {
					border-radius: 10px !important;
					background-color: #999999 !important;
					background-clip: padding-box !important;
					border: 2px solid #999999;
				}
				&::-webkit-scrollbar-thumb:hover {
					background-color: #999999 !important;
				}

		   }
		}
	}
}


.menuContbox {
	height: 96px;
	position: relative;
	.slider-Content {
		display: inline-block;
		width: 88px;
		height: 72px;
		text-align: center;
		margin-top: 16px;
		padding: 0 5px;
		vertical-align:middle;
		.slider-Latex {
			text-align: center;
			line-height: 40px;
			font-size: 14px;
			margin: 0 auto;
			position: relative;
			.imgcont {
				display: block;
				width: 40px;
				height: 40px;
				margin: 0 auto;
				img {
					display: block;
					width: 40px;
					height: 40px;
					border-radius: 50%;
				}
				.iconbase {
					width: 20px;
					height: 20px;
					border-radius: 50%;
					background: #faad14;
					color: #ffffff;
					right: 10px;
					top: 0;
					text-align: center;
					line-height: 20px;
					font-weight: 600;
					position: absolute;
					display: block;
					opacity: 0;
					-webkit-transition: all 0.5s ease-in;
					-moz-transition: all 0.5s ease-in;
					transition: all 0.5s ease-in;
				}
				&:hover {
					cursor: pointer;
					.iconbase {
						opacity: 1;
					}
				}
			}
		}
		.text {
			height: 26px;
			line-height: 26px;
			font-size: 12px;
			text-align: center;
			color: #8c8c8c;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}
	}
    button.savebtn {
		width: 72px;
		height: 32px;
		color: #ffffff;
		font-size:14px;
		background: #1a90fd;
		position: absolute;
		right: 80px;
		top: 16px;
        border-color: #1a90fd;
	}
	.closebtn {
		font-size: 16px;
		color: #979797;
		position: absolute;
		font-weight: 600;
		right: 24px;
		top: 20px;
    width: 28px;
    height: 28px;
    text-align: center;
    line-height: 28px;
    border: 1px solid #dcdcdc;;
    background: #ffffff;
    border-radius: 50%;
		&:hover {
			cursor: pointer;
		}
	}
	.menuContent {
		height: 408px;
		width: calc(100% - 336px);
		border:1px solid #e6e6e6;;
		margin: 0 auto;
		.menutop {
			text-align: left;
			margin-top: 16px;
			padding-left: 16px;
			height: 32px;
			.btnContent {
				.el-button {
					font-size:12px;
                    border: 1px solid #dcdfe6;
                    background: eee;
                    border:1px solid  #dcdfe6;
                    color:#262626;
				}
				.active {
					background: #1a90fd;
					color: #ffffff;
				}
			}
		}
		.menuCenter {
			height: 328px;
			text-align: left;
			padding: 16px;
			overflow-y: auto;
			.menuList {
				margin-bottom: 14px;
				.menutitle {
					color:#595959;
					font-size:14px;
				}
			}
		}
	}
}

</style>
