<template>
		<div class="left-menu">
			<div class="menu-top" v-for="(item,index) in getCurSide" :key="index">
				<div class="first-title">{{item.name}}
					<!-- <span v-if="item.name=='待发布产品'||item.name=='在线产品'" class="set-type" >设置</span> -->
				</div>
				<div class="third-title" v-if="item.allType&&item.allType.length>0">
					<i class="fa fa-sort-desc fa-lg iconColor" v-if="item.allType[0].ifShow" @click="foldClick(index)"></i>
					<i class="fa fa-caret-right fa-lg iconColor" v-else @click="foldClick(index)"></i>
					<span :class="active==item.allType[0].id?'active':''" @click="typeClick(item.allType[0])">{{item.allType[0].name}}</span>
				</div>
				<div v-if="item.allType&&item.allType.length>0&&item.allType[0].ifShow">
					<div v-if="item.unclassified&&item.unclassified.length>0" :class="active==item.unclassified[0].id?'four-title active':'four-title'" @click="typeClick(item.unclassified[0])">{{item.unclassified[0].name}}<span>{{item.unclassified[0].number>0?`(${item.unclassified[0].number})`:''}}</span></div>
					<div class="four-title" v-for="(v,index2) in item.waitList" :key="v.pid" v-if="item.waitList&&item.waitList.length>0">
						<span v-if="v.waitChildrenList&&v.waitChildrenList.length>0">
							<i class="fa fa-sort-desc fa-lg iconColor" v-if="v.ifShow" @click="showChildrenClick(index,index2)"></i>
							<i class="fa fa-caret-right fa-lg iconColor" v-else @click="showChildrenClick(index,index2)"></i>
						</span>
						<div :class="active==v.id?'active':''"  style="display:inline" @click="typeClick(v)">{{v.name}}
							<span>{{v.number>0?`(${v.number})`:''}}</span>
						</div>
						<div v-if="v.ifShow&&v.waitChildrenList" class="four-title" v-for="(m,index3) in v.waitChildrenList" :key="m.pid">
							<span v-if="m.waitChildrenList&&m.waitChildrenList.length>0">
								<i class="fa fa-sort-desc fa-lg iconColor" v-if="m.ifShow" @click="showTwoChildrenClick(index,index2,index3)"></i>
								<i class="fa fa-caret-right fa-lg iconColor" v-else @click="showTwoChildrenClick(index,index2,index3)"></i>
							</span>
							<div :class="active==m.id?'active':''"  style="display:inline" @click.prevent="typeClick(m)">{{m.name}}
								<span>{{m.number>0?`(${m.number})`:''}}</span></div>
							<div v-if="m.ifShow&&m.waitChildrenList" :class="active==l.id?'four-title active':'four-title'" v-for="l in m.waitChildrenList" :key="l.pid" @click.prevent="typeClick(l)">{{l.name}}
								<span>{{l.number>0?`(${l.number})`:''}}</span>
							</div>
						</div>
					</div>
				</div>
				<div v-for="itemChild in item.children" :key="itemChild.name" @click="leftMenuClick(itemChild)" :class="activeMenu == itemChild.name?'second-title activeMenu':'second-title'">{{itemChild.name}}<span>{{itemChild.number>0?`(${itemChild.number})`:''}}</span>
				</div>
			</div>
			<el-dialog
				title="管理分类"
				:visible.sync="dialogVisible"
				width="600px"
				:before-close="handleClose">
				<div class="pl20">
					<!-- <ul class="ztree">
						<li  class="level0">
							<span class="button level0 switch noline_open" ></span>
							<a class="level0">
								<span class="button ico_open" style="width:0px;height:0px;">
									<i class="fa fa-sort-desc fa-lg iconColor" @click="foldClick"/><i class="fa fa-caret-right fa-lg iconColor" @click="foldClick"/>
								</span>
								<span class="leaves">所有分类</span>
							<div class="btnGroup"><span class="button add glyphicon glyphicon-plus" style="margin-right: 60px;"></span></div>
							</a>
							<ul class="level0 " style="display:block">
								<li class="level1">
									<span class="button level1 switch noline_docu"></span>
									<a class="level1">
										<span class="button ico_docu" style="width:0px;height:0px;"></span>
										<span class="leaves">未分类</span>
									</a>
								</li>
								<li class="level1">
									<span class="button level1 switch noline_open"></span>
									<a class="level1">
										<span class="button ico_open" style="width:0px;height:0px;"></span>
										<span class="leaves">Hoodies【卫衣】</span>
										<div class="btnGroup">
											<span class="button add glyphicon glyphicon-plus" title="添加分类"></span>
											<span class="button edit glyphicon glyphicon-edit" title="更改分类名"></span>
											<span class="button remove glyphicon glyphicon-remove" title="删除分类"></span>
										</div>
									</a>
									<ul class="level1 " style="display: block;">
										<li class="level2">
											<span class="button level2 switch noline_docu"></span>
											<a class="level2 curSelectedNode">
												<span class="button ico_docu" style="width:0px;height:0px;"></span>
												<span class="leaves">11</span>
												<div class="btnGroup">
													<span class="button add glyphicon glyphicon-plus" title="添加分类"></span>
													<span class="button edit glyphicon glyphicon-edit" title="更改分类名"></span>
													<span class="button remove glyphicon glyphicon-remove"title="删除分类"></span>
												</div>
											</a>
										</li>
									</ul>
								</li>
							</ul>
						</li>
					</ul> -->
					<div class="block">
						<el-tree
							:data="dataTree"
							node-key="id"
							default-expand-all
							@current-change="SwitchNode"
							:expand-on-click-node="false">
							<span class="custom-tree-node" slot-scope="{ node, data }">
								<span v-if="!data.edit">{{ node.label }}</span>
								<span  v-else @click.stop><el-input v-model="data.label" size="mini" style="width:200px"/></span>
								<span v-if="node.label!='未分类'">
									<el-button
										type="text"
										size="mini"
										@click="() => append(data)">
										<i class="el-icon-plus add-type"/>
									</el-button>
									<el-button
									 	v-if="node.label!='所有分类'"
										type="text"
										size="mini"
										@click.stop="() => edit(node,data)">
										<i class="el-icon-edit-outline add-type edit-type"/>
									</el-button>
									<el-button
									 	v-if="node.label!='所有分类'"
										type="text"
										size="mini"
										@click.stop="() => remove(node, data)">
										<i class="el-icon-close add-type delete-type"/>
									</el-button>
								</span>
							</span>
						</el-tree>
					</div>
				</div>
				<span slot="footer" class="dialog-footer">
					<el-button type="primary" @click="sureTypeClick">确 定</el-button>
				</span>
			</el-dialog>
		</div>
</template>

<script>
	export default {
		props: {
			collapsed: {
				type: Boolean,
				default: true,
			},
			dynamicTags:{
				type: Array,
				default: [],
			},
			agentCode: '',
			authCode:'',
		},
		data() {
			return {
				dialogVisible:false,
				activeMenu:'wish',
				active:'',
				getCurSide:[],
				showType:true,
				showChildren:true,
				showTwoChildren:true,
				ids:[],
				dataTree:[],
				agentCode: ''
			}
		},
		methods: {
			getClassifyAndNum(type){
				let url
				if(this.$route.path.indexOf('systemProduct')!=-1){
					url='assistant/info/get/queryProductGroupCount'
				}else{
					url='assistant/info/get/classificationQuantity'
				}
				this.axios({
						url,
						data:{
              agentCode: this.agentCode
            },
						method: "post"
				}).then(res => {
					if(res.success){
						this.getCurSide=res.module.resultList
						// if(!type){
						// 	this.leftActive()
						// }
					}
				})
			},
			getClassify(){
				this.axios({
						url: 'assistant/dictionary/getClassificationList',
						data:{},
						method: "post"
				}).then(res => {
					if(res.success){
						this.dialogVisible=true
						this.dataTree=res.module.dataTree
					}
				})
			},
			leftMenuClick(value){
				// this.$router.push({path:value})
				// this.$nextTick(() => {
					this.activeMenu = value.name;
					this.active=''
					this.$emit('getCurrentLeft',value)
				// })
			},
			typeClick(value){
				this.active = value.id;
				this.activeMenu=''
				this.$emit('getCurrentLeft',value)
			},
			foldClick(index){
				this.$set(this.getCurSide[index].allType[0],'ifShow',!this.getCurSide[index].allType[0].ifShow)
				// this.showType=!this.showType
			},
			showChildrenClick(index,indexChild){
				this.$set(this.getCurSide[index].waitList[indexChild],'ifShow',!this.getCurSide[index].waitList[indexChild].ifShow)
				// this.showChildren=!this.showChildren
			},
			showTwoChildrenClick(index,indexChild,indexLast){
				this.$set(this.getCurSide[index].waitList[indexChild].waitChildrenList[indexLast],'ifShow',!this.getCurSide[index].waitList[indexChild].waitChildrenList[indexLast].ifShow)
				// this.showTwoChildren=!this.showTwoChildren
			},
			leftActive(){
				let activeMenu = this.agentCode?this.agentCode:'wish'
				let value={}
				let id=this.$route.query.id
				if((id==1||!id)&&this.$route.path.indexOf('productList')>-1){
					// if(this.$route.path.indexOf('productList')>-1){
						this.activeMenu=activeMenu
						this.active=''
						value={id: "31a12c85b7d6416689412ddf267f7c5b",ifShow: false,name: activeMenu,number: 6,path: "/product/productList",type: 1}
					// }
					// else{
					// 	this.active = id;
					// 	this.activeMenu='',
					// 	value={id: `${id}`,ifShow: false,name: "所有分类",pid: "assistion_type",type: id}
					// }
				}else{
					value={id: `${id}`,ifShow: false,name: "所有分类",pid: "assistion_type",type: id}
					this.active = id;
					this.activeMenu=''
				}
				this.$emit('getCurrentLeft',value)
			},
			setTypeClick(){
				this.getClassify()
			},
			append(data) {
				let id = 1000;
        const newChild = { pid: '', label: '新分类',edit:true, children: [] };
        if (!data.children) {
          this.$set(data, 'children', []);
        }
        data.children.push(newChild);
			},
			edit(node,data){
			  const parent = node.parent;
        const children = parent.data.children || parent.data;
				const index = children.findIndex(d => d.id === data.id);
				this.$set(children[index],'edit',true)
			},
			SwitchNode(data,node){
				const parent = node.parent;
        const children = parent.data.children || parent.data;
				const index = children.findIndex(d => d.id === data.id);
				this.$set(children[index],'edit',false)
			},
      remove(node, data) {
				this.ids.push(data.pid)
        const parent = node.parent;
        const children = parent.data.children || parent.data;
        const index = children.findIndex(d => d.id === data.id);
        children.splice(index, 1);
			},
			sureTypeClick(){
				const{dataTree,ids}=this
				this.axios({
						url: 'assistant/dictionary/addClassification',
						data:{
							dataTree:JSON.stringify(dataTree),
							ids:JSON.stringify(ids)
						},
						method: "post"
				}).then(res => {
					if(res.success){
						this.getClassifyAndNum()
						this.ids=[]
						this.dialogVisible=false
					}
				})
			}
		},
		mounted() {
			this.getClassifyAndNum()
			this.leftActive()
		},
		watch: {
			"$route": function() {
				this.leftActive()
			}
		}
	}

</script>

<style scoped lang="less">
.add-type{
	color: #61BD50;
  font-size: 18px;
  font-weight: 1000;
}
.delete-type{
	color:#EC5947
}
.edit-type{
	color:#137ABF
}
.ztree {
    margin: 0;
    padding: 5px;
		color: #333;
	li{
		padding: 0;
    margin: 0;
    list-style: none;
    line-height: 14px;
    text-align: left;
  	white-space: inherit !important;
    position: relative;
		outline: 0;
		span{
			margin-right: 2px;
		}
		a{
			padding: 0 5px;
			margin: 0;
			color: #000 !important;
			height: 26px !important;
			width: 100%;
			border-bottom: 1px solid #DDDDDD;
			margin-top: 10px !important;
			background-color: transparent;
			text-decoration: none;
			vertical-align: top;
			display: inline-block;
			.leaves {
				line-height: 26px;
				overflow-y: hidden;
				height: 26px;
				display: block;
				float: left;
				width: 80%;
				word-break: break-all;
				word-wrap: break-word;
				padding-left:15px;
			}
			.btnGroup {
				display: block;
				float: right;
				padding: 10px 0 5px 5px;
			}
		}
		ul{
			margin: 0;
   		padding: 0 0 0 18px;
		}
	}
}
ul {
    list-style-type: none;
}
.left-menu {
	width: 230px;
	min-height: 450px;
	max-height: 600px;
	border: 1px solid #ccc;
	background: #FFFFFF;
	margin-right: 20px;
	overflow:scroll;
	overflow-x:hidden;
	.menu-top{
		text-align: left;
		font-size: 16px;
		color: #333333;
		.set-type{
			cursor: pointer;
			color: #367EE2;
			float: right;
			margin-right: 10px
		}
		.iconColor{
			color:#999;
			padding-right: 10px;
		}
		.fa-sort-desc{
			vertical-align: 5%;
		}
		.first-title{
			height: 32px;
			line-height: 32px;
			color: #000;
			vertical-align: top;
			padding-left: 15px;
			background-color: #eee;
			border-bottom: 1px solid #dbdbdb;
			font-weight: 700;
			font-size: 13px
		}
		.second-title{
			color: #000;
			line-height: 28px;
			vertical-align: top;
			height: 28px;
			border-bottom: 1px solid #dbdbdb;
			cursor: pointer;
			padding-left: 22px;
			font-size: 13px;
			span{
				color: #999;
				margin-left: 3px;
			}
		}
		.third-title,.four-title{
			font-size: 13px;
			cursor: pointer;
			font-weight: 400;
			margin: 6px 0 6px 15px;
		}
		.four-title{
			padding-left:10px;
			width: max-content;
			span{
				color: #999;
				margin-left: 3px;
			}
		}
		.active{
			background-color: #367EE2;
			padding: 0 3px;
			color: #fff;
			span{
				color:#fff
			}
		}
		.activeMenu{
			color: #fff;
			background-color: #367EE2;
			span{
				color:#fff
			}
		}
	}
}
</style>