<template>
    <el-container>
		<el-aside width="300px" v-loading="menuloading">
            <el-container>
				<el-header>
					<el-input placeholder="输入关键字进行过滤" v-model="menuFilterText" clearable></el-input>
				</el-header>
                <el-main class="nopadding">
                    <el-tree ref="menu" class="menu" node-key="id" :data="menuList" :props="menuProps" draggable highlight-current :expand-on-click-node="false" check-strictly :filter-node-method="menuFilterNode" @node-click="menuClick" @node-drop="nodeDrop">
						<template #default="{node, data}">
							<span class="custom-tree-node">
								<span class="label">
									{{ node.label }}
								</span>
								<span class="code">{{ data.code }}</span>
								<span class="do">
									<el-button-group>
										<el-button icon="el-icon-edit" size="small" @click.stop="dicEdit(data)"></el-button>
										<el-button icon="el-icon-delete" size="small" @click.stop="dicDel(data)"></el-button>
									</el-button-group>
								</span>
							</span>
						</template>
					</el-tree>
                </el-main>
				<el-footer style="height:51px;">
					<el-button type="primary" size="small" icon="el-icon-plus" @click="addCate()">添加分类</el-button>
				</el-footer>
            </el-container>
        </el-aside>
		<el-container v-if="subState">
			<el-header>
				<div class="left-panel">
					<el-button type="primary" icon="el-icon-plus" @click="addInfo"></el-button>
				</div>
			</el-header>
			<el-main class="nopadding" style="padding:20px;" ref="main">
				<subList ref="save" @success="getMenu" :dataList="subDataList" :parent="checkData"></subList>
			</el-main>
		</el-container>
    </el-container>
    <categoryForm ref="categoryForm" @success="hanldeSuccess()"></categoryForm>
    <subForm ref="subForm" @success="hanldeSuccess()"></subForm>
</template>

<script>
import categoryForm from './components/category'
import subForm from './components/form'
import subList from './sub'
export default {
    components: {
        categoryForm,subList,subForm
    },
    data() {
        return {
            menuloading: false,
            subState:false,
            menuList: [],
            subDataList:[],
            selection:[],
            menuProps: {
                label: (data)=>{
                    return data.name
                }
            },
            menuFilterText: "",
            checkData:null
        }
    },
    mounted() {
        this.getMenu();
    },
    methods: {
        async dicDel(row){
            var reqData = {id: row.id}
            var resp = await this.$API.dic.del.post(reqData);
            if (resp.code == 0) {
                return this.$message.error(resp.msg);
            }
            this.$message.success(resp.msg);
            this.getMenu();
        },
        addInfo(){
            this.$nextTick(() => {
                this.$refs.subForm.open("add").setData({id:this.checkData.id})
            })
        },
        async menuClick(data){
            this.checkData = data;
            this.subState = true
            var res = await this.$API.dic.list.get({dicId:data.id});
            if(res.code == 1)
            {
                this.subDataList = res.data.content;
            }
        },
        dicEdit(data){
            this.$nextTick(() => {
                this.$refs.categoryForm.open("edit").setData(data)
            })
        },
        addCate(){
            this.$nextTick(() => {
                this.$refs.categoryForm.open()
            })
        },
        hanldeSuccess(){
            this.getMenu();
        },
        //加载树数据
        async getMenu(){
            this.menuloading = true
            var res = await this.$API.dic.list.get();
            this.menuloading = false
            if(res.code == 1)
            {
                this.menuList = res.data;
                if (this.checkData) {
                    this.menuClick(this.checkData)
                }
            }
        },
    }
}
</script>

<style scoped>
	.custom-tree-node {display: flex;flex: 1;align-items: center;justify-content: space-between;font-size: 14px;padding-right: 24px;height:100%;}
	.custom-tree-node .code {font-size: 12px;color: #999;}
	.custom-tree-node .do {display: none;}
	.custom-tree-node:hover .code {display: none;}
	.custom-tree-node:hover .do {display: inline-block;}
</style>