<template>
<!-- 指标外层布局矿建 -->
<el-container>
    <!-- 行政组织级 -->
    <el-aside width="220px">
        <el-scrollbar > 
            <el-tree
                :data="GovthreeList2"
                :props="defaultProps1"
                @node-click="handleNodeClick"
            ></el-tree>
        </el-scrollbar>
    </el-aside>
    <el-aside v-show="postList.length > 0"
      width="200px"
    >
        <el-tree
            :data="postList"
            :props="defaultProps1"
            @node-click="NodePostClick"
        ></el-tree>
    </el-aside>
    <el-main>
        <el-scrollbar > 
            <div v-if="postShow">
                <targetPostConfig :gwFromList="gwFromList" :gwId="gwId"></targetPostConfig>
            </div>
            <div v-if="departShow">
                <targetDepartmentConfig :bmId="bmId"></targetDepartmentConfig>
            </div>
        </el-scrollbar>
    </el-main>
</el-container>

</template>
<script>
import { govthree, positionlist } from "@/api/personnel/post";
import targetDepartmentConfig from "@/views/basicCont/targetDepartmentConfig.vue";
import targetPostConfig from "@/views/basicCont/targetPostConfig.vue";
export default {
    components: {
        // project,
        targetDepartmentConfig,
        targetPostConfig
    },
    data() {
        return {
            GovthreeList2: [],      //行政组织
            defaultProps1: {
                children: "child",
                label: "name",
            },
            postList: [],           //岗位
            departShow:true, //部门是否显示
            postShow:false, //岗位是否显示
            bmId:1, //部门ID参数传递
            gwId:1, //岗位参数传递
            gwFromList:{        //岗位参数传递
                gwId:1,
                bmId:1
            },
        }
    },
    created() {
        // 页面渲染时获取初始数据
        this.getGovthree2();
    },
    methods: {
        //   获取行政组织二级树
        async getGovthree2() {
            const res = await govthree();
            // this.GovthreeList2 = res.data[0].child;
            this.GovthreeList2 = res.data
            console.log("this.GovthreeList2===>",res.data);
        },
        // 点击行政组织树
        handleNodeClick(val) {
            // this.searchInfo.organization=val.id
            // this.searchInfo.organization=this.searchInfo.organization.toString()
            this.getPost(val.id);
            console.log('bumen----------->layout')
            this.bmId=val.id
            this.gwFromList.bmId=val.id
            this.postShow=false
            this.departShow=true
            // console.log(val);
        },
        // 获取岗位
        async getPost(val) {
            const from = {
                organization: val.toString(),
                page: 1,
                pagesize: 10,
            };
            const res = await positionlist(from);
            this.postList = res.data.list;
        },
        // 点击岗位列表
        NodePostClick(val) {
            this.gwId=val.id
            this.gwFromList.gwId=val.id
            this.postShow=true
            this.departShow=false
            console.log('岗位')
            console.log(this.gwFromList);
        },
    }
}
</script>
<style>
.el-aside {
    text-align: center;
    height: calc(103% - 2px);
    overflow: hidden;
    overflow-y: auto;
    overflow-x: hidden;
    border-right: 1px solid rgb(220, 223, 230);
    margin: 2px 0 0 0;
    padding-bottom: 10px;
}
.el-main{
    height: 105%;
}
.el-container {
    height:calc(100% - 50px);
    overflow: hidden;
}
.el-scrollbar {
    height: 100%;
}
.el-scrollbar__wrap {
    overflow: hidden;
    overflow-y: auto;
    overflow: scroll;
}
.el-tree-node.is-current>.el-tree-node__content {
    color:#2E89DE!important
}
.el-tree-node_black {
    background-color:red !important;
    color:#2E89DE!important
}
</style>