<template>
    <div>
        <div class="container">
            <div class="left-pane">
                <el-input placeholder="请输入关键字" suffix-icon="el-icon-search" v-model="filterText"></el-input>
                <el-tree ref="tree" :data="data" :props="defaultProps" node-key="id" default-expand-all
                    :filter-node-method="filterNode" @node-click="handleNodeClick">
                </el-tree>
                <el-button><i class="el-icon-s-order"></i>添加公司</el-button>
            </div>
            <div class="right-pane">
                <DepartmentdetailEdit></DepartmentdetailEdit>
            </div>
        </div>
    </div>
</template>
<script>
import DepartmentdetailEdit from './forms/departmentdetailEdit';
export default {
    components: { DepartmentdetailEdit, },
    data() {
        return {
            filterText: '',
            activeName: 'group',
            data: [{
                label: '中讯邮电咨询设计院',
                children: [{
                    label: '北京电信规划设计院',
                    children: [{
                        label: '天津办事处'
                    }]
                }]
            }],
            defaultProps: {
                children: 'children',
                label: 'label'
            }
        }
    },
    watch: {
        filterText(val) {
            this.$refs.tree.filter(val);
        }
    },
    methods: {
        handleNodeClick() {
            //
        },
        filterNode(value, data) {
            if (!value) return true;
            return data.label.indexOf(value) !== -1;
        },
        handleClick() {

        }
    }
}
</script>

<style lang="less" scoped>
.el-tab {
    position: absolute;
    left: 218px;
    right: 16px;
    top: 77px;
    height: 51px;
    line-height: 20px;
    background-color: rgba(255, 255, 255, 1);
    text-align: center;
    box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.15);

    /deep/.el-tabs__nav {
        left: 25px;
    }

    /deep/.el-tabs__nav-wrap::after {
        height: 0;
    }
}

.container {
    position: fixed;
    left: 218px;
    top: 140px;
    right: 16px;
    height: -webkit-fill-available;
    margin-bottom: 20px;
    line-height: 20px;
    background-color: rgba(255, 255, 255, 1);
    color: rgba(16, 16, 16, 1);
    font-size: 14px;
    text-align: center;
    box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.15);

    .left-pane {
        width: 300px;
        padding: 15px;

        .el-tree {
            height: 700px;
            margin-top: 15px;
            background-color: rgb(247, 245, 243);
        }

        .el-button {
            position: absolute;
            left: 35px;
            bottom: 40px;
            width: 250px;
            background-color: rgb(131, 208, 243);
            text-align: center;
            font-size: 16px;
        }
    }

    .right-pane {
        width: 1340px;
        position: absolute;
        margin-left: 330px;
        top: 0;
        margin-right: 20px;
    }
}
</style>