<template>
  <el-container>
    <el-aside v-loading="menuloading" width="300px">
      <el-container>
        <el-header>
          <el-input clearable="" placeholder="输入关键字进行过滤" v-model="menuFilterText">
          </el-input>
        </el-header>
        <el-main class="nopadding">
          <el-tree :data="menuList" :expand-on-click-node="false" :filter-node-method="menuFilterNode" :props="menuProps" @node-click="menuClick" @node-drop="nodeDrop" check-strictly="" class="menu" draggable="" highlight-current="" node-key="id" ref="menu" :show-checkbox="false">
            <template #default="{node, data}">
              <span class="custom-tree-node">
                <span class="label">
                  <el-icon style="margin-right: 2px;">
                    <component :is="data.meta.icon || 'el-icon-menu'"> </component>
                  </el-icon>
                  {{ node.label }}
                </span>
                <span class="do" v-if="!data.parentid">
                  <!-- <el-button @click.stop="add(node, data)" icon="el-icon-plus" size="small"> </el-button> -->
                </span>
              </span>
            </template>
          </el-tree>
        </el-main>
       <!--  <el-footer style="height:51px;">
          <el-button @click="add()" icon="el-icon-plus" size="small" type="primary">
          </el-button>
          <el-button @click="delMenu" icon="el-icon-delete" plain="" size="small" type="danger">
          </el-button>
        </el-footer> -->
      </el-container>
    </el-aside>
    <el-container>
      <el-main class="nopadding" ref="main" style="padding:20px;">
        <save :menu="menuList" ref="save">
        </save>
      </el-main>
    </el-container>
  </el-container>
</template>
<script>
  let newMenuIndex = 1;
	import save from './save'

	export default {
		name: "systemmenu",
		components: {
			save
		},
		data(){
			return {
				menuloading: false,
				menuList: [],
				menuProps: {
					label: (data)=>{
						return data.meta.title
					}
				},
				menuFilterText: ""
			}
		},
		watch: {
			menuFilterText(val){
				this.$refs.menu.filter(val);
			}
		},
		mounted() {
			this.getMenu();
		},
		methods: {
			//加载树数据
			async getMenu(){
				this.menuloading = true
				var res = await this.$http.get('menu');
				this.menuloading = false
				this.menuList = res.data;
			},
			//树点击
			menuClick(data, node){
				var pid = node.level==1 ? 0 : node.parent.data.id;
				this.$refs.save.setData(data, pid)
				this.$refs.main.$el.scrollTop = 0
			},
			//树过滤
			menuFilterNode(value, data){
				if (!value) return true;
				var targetText = data.meta.title;
				return targetText.indexOf(value) !== -1;
			},
			getAllIds (treeData) {
			  let idList = [];
			  treeData.forEach(node => {
			    let newNode = {id: node.id};
			    if (node.children) {
			      newNode.children = this.getAllIds(node.children);
			    }
			    idList.push(newNode);
			  });
			  return idList;
			},
			//树拖拽
			async nodeDrop(draggingNode){
				let ids = this.getAllIds(this.menuList);


				// let obj = Object.assign({}, draggingNode.data, {parentid:dropNode.data.id});
				// delete obj.children;

				var res = await this.$http.post('menu/update', {id:draggingNode.data.id,ids:ids});
				if(res.code !== 200){
					this.$message.warning(res.message);
					return false;
				}

				// var pid = this.getParentId(this.menuList, draggingNode.data.id);

				// alert(pid)

				// console.log(pid,this.menuList)

				this.$refs.save.setData({})
				this.$message.success(res.message);
			},
			//增加
			async add(node, data){
				var newMenuName = "未命名" + newMenuIndex++;
				var newMenuData = {
					parentid: data ? data.id : 0,
					name: "",
					path: data ? data.path+'/' : "",
					component: "",
					meta:{
						title: newMenuName,
						type: "menu"
					}
				}
				this.menuloading = true
				var res = await this.$http.post('menu/submit',newMenuData)
				this.menuloading = false

				if(res.code !== 200){
					this.$message.warning(res.message);
					return false;
				}


				newMenuData.id = res.data
				this.$refs.menu.append(newMenuData, node)
				this.$refs.menu.setCurrentKey(newMenuData.id)
				var pid = node ? node.data.id : 0
				this.$refs.save.setData(newMenuData, pid)
			},
			//删除菜单
			async delMenu(){
				var CheckedNodes = this.$refs.menu.getCheckedNodes()
				if(CheckedNodes.length == 0){
					this.$message.warning("请选择需要删除的项")
					return false;
				}

				var confirm = await this.$confirm('确认删除已选择的菜单吗？','提示', {
					type: 'warning',
					confirmButtonText: '删除',
					confirmButtonClass: 'el-button--danger'
				}).catch(() => {})
				if(confirm != 'confirm'){
					return false
				}

				this.menuloading = true
				var reqData = {
					ids: CheckedNodes.map(item => item.id)
				}
				var res = await this.$http.post('menu/delete',reqData)
				this.menuloading = false

				if(res.code == 200){
					CheckedNodes.forEach(item => {
						var node = this.$refs.menu.getNode(item)
						if(node.isCurrent){
							this.$refs.save.setData({})
						}
						this.$refs.menu.remove(item)
					})
				}else{
					this.$message.warning(res.message)
				}
			}
		}
	}
</script>
<style scoped="">
  .menu:deep(.el-tree-node__label) {display: flex;flex: 1;height:100%;}
	.custom-tree-node {display: flex;flex: 1;align-items: center;justify-content: space-between;font-size: 14px;height:100%;padding-right:24px;}
	.custom-tree-node .label {display: flex;align-items: center;;height: 100%;}
	.custom-tree-node .label .el-tag {margin-left: 5px;}
	.custom-tree-node .do {display: none;}
	.custom-tree-node .do i {margin-left:5px;color: #999;}
	.custom-tree-node .do i:hover {color: #333;}

	.custom-tree-node:hover .do {display: inline-block;}
</style>
