<template>
    <div>
        <el-dialog v-dialog-drag class="dialog" title="添加设备" :visible.sync="dialogVisible" width="25%" center>
            <el-divider></el-divider>
            <div class="container">
                <div class="leftpane">
                    <el-tree ref="tree" :data="data" :props="defaultProps" node-key="id" default-expand-all
                        @node-click="handleNodeClick">
                    </el-tree>
                </div>
                <div class="rightpane">
                    <el-input class="search" v-model="filter" placeholder="请输入" suffix-icon="el-icon-search"></el-input>
                    <el-table ref="multipleTable" border :data="tableData" tooltip-effect="dark"
                        :header-cell-style="{ textAlign: 'center' }" :cell-style="{ textAlign: 'center' }"
                        style="width: 100%" @selection-change="handleSelectionChange">
                        <el-table-column type="selection" width="50">
                        </el-table-column>
                        <el-table-column prop="deviceID" label="设备ID">
                        </el-table-column>
                        <el-table-column prop="devicePosition" label="设备位置">
                        </el-table-column>
                    </el-table>
                </div>
            </div>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取消</el-button>
                <el-button type="primary">确认</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
export default {
    data() {
        return {
            dialogVisible: false,
            filter: '',
            data: [{
                label: '设备种类',
                children: [
                    {
                        label: '摄像头'
                    },
                    {
                        label: '门禁设备'
                    },
                    {
                        label: '水浸设备'
                    },
                    {
                        label: '电表设备'
                    },
                    {
                        label: '其他设备'
                    }
                ]
            }],
            defaultProps: {
                children: 'children',
                label: 'label'
            },
            tableData: [{
                deviceID: '111',
                devicePosition: '1F-101'
            }, {
                deviceID: '112',
                devicePosition: '1F-101'
            }, {
                deviceID: '113',
                devicePosition: '1F-101'
            }]
        }
    },
    methods: {
        handleNodeClick() {

        },
        handleSelectionChange() {

        }
    }

}
</script>
<style lang="less" scoped>
.container {
    height: 450px;
    width: 95%;
    margin-left: 2.5%;
    border: 0.5px solid rgb(247, 245, 243);
    margin-top: 20px;
    display: flex;

    .leftpane {
        width: 150px;

        .el-tree {
            height: 450px;
            background-color: rgb(247, 245, 243);
        }
    }

    .rightpane {
        .search {
            width: 250px;
            margin-left: 60px;

            /deep/.el-input__inner {
                height: 35px;
            }
        }

        .el-table {
            margin-top: 20px;
            width: 95% !important;
            margin-left: 5%;
        }
    }
}

/deep/.el-dialog {
    height: 600px !important;
}

.el-select {
    width: 280px;
}



/deep/.el-dialog {
    height: 30vh;
}

/deep/.el-dialog__title {
    margin-right: 330px;
}

/deep/.el-dialog__headerbtn {
    font-size: 25px;
}

/deep/.el-dialog__body {
    padding: 0;
}

/deep/.el-divider--horizontal {
    display: block;
    height: 1px;
    width: 95%;
    margin: 0;
    margin-left: 2.5%;
}

/deep/.el-dialog__footer {
    margin-top: -20px;
}

.el-button {
    width: 100px;
    height: 30px;
    text-align: center;
    margin: 30px;
    padding: 5px;
}
</style>