<template>
    <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 @click="newDeviceType()"><i class="el-icon-s-order"></i>新建设备类别</el-button>
        </div>
        <div class="right-pane">
            <div style="margin:20px 1100px 20px 0 ;">
                <div style="display: flex;">
                    <el-button @click="addDevice()">添加设备</el-button>
                    <el-button style="margin-left:20px" @click="dataImport()">批量导入</el-button>
                </div>
                <el-input class="search" v-model="filter" placeholder="请输入" suffix-icon="el-icon-search"></el-input>
            </div>
            <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 type="index" width="50" label="序号">
                </el-table-column>
                <el-table-column prop="deviceName" label="设备名称">
                </el-table-column>
                <el-table-column prop="deviceID" label="设备ID">
                </el-table-column>
                <el-table-column prop="deviceUse" label="设备用途">
                </el-table-column>
                <el-table-column prop="devicePosition" label="设备位置">
                </el-table-column>
                <el-table-column prop="deviceLife" label="设备使用年限">
                </el-table-column>
                <el-table-column prop="company" label="设备单位">
                </el-table-column>
                <el-table-column prop="deviceRespon" label="设备责任人">
                </el-table-column>
                <el-table-column prop="operation" label="操作">
                    <template slot-scope="scope">
                        <el-button v-show="scope.row.deviceID == null ? false : true" size="mini" type="text"
                            @click="deviceEdit()">编辑</el-button>
                        <el-button v-show="scope.row.deviceID == null ? false : true" size="mini" type="text">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="bottom">
            <div>
                <checkbox class="checkbox"></checkbox>
                <el-button class="check-cancel" size="mini" type="text" @click="cancelChecked">取消</el-button>
            </div>
            <div class="bottom_button" v-show="show">
                <el-button class="delete" type="text">批量删除</el-button>
            </div>
            <page></page>
        </div>
        <!--弹窗-->
        <NewDeviceType ref="newDevice"></NewDeviceType>
        <addDevice ref="addDevice"></addDevice>
        <dataImport ref="dataImport"></dataImport>
        <deviceEdit ref="deviceEdit"></deviceEdit>
    </div>
</template>

<script>
import checkbox from '@/components/Checkbox/index'
import page from '@/components/pagination/index'
import NewDeviceType from './messageDailog/newDeviceType'
import dataImport from './messageDailog/dataImport'
import addDevice from './messageDailog/addDevice'
import deviceEdit from './messageDailog/deviceEdit'
export default {
    components: { checkbox, page, NewDeviceType, dataImport, addDevice, deviceEdit },
    data() {
        return {
            filterText: '',
            filter: '',
            form: {
                typeName: ''
            },
            data: [{
                label: '楼层',
                children: [
                    {
                        label: 'A设备'
                    }, {
                        label: 'B设备'
                    }
                ]
            },
            ],
            defaultProps: {
                children: 'children',
                label: 'label'
            },
            tableData: [{
                deviceName: '摄像头',
                deviceID: 'SXT-001',
                deviceUse: '监控摄像头',
                devicePosition: '1层101',
                deviceLife: '3年6个月',
                company: '北京电信规划院',
                deviceRespon: '张三',
            }, {

            }, {

            }],
            multipleSelection: [],
            show: true
        }
    },
    watch: {
        filterText(val) {
            this.$refs.tree.filter(val);
        }
    },
    methods: {
        filterNode(value, data) {
            if (!value) return true;
            return data.label.indexOf(value) !== -1;
        },
        newDeviceType() {
            this.$refs.newDevice.dialogVisible = true;
        },
        dataImport() {
            this.$refs.dataImport.dialogVisible = true;
        },
        addDevice() {
            this.$refs.addDevice.dialogVisible = true;
        },
        deviceEdit() {
            this.$refs.deviceEdit.dialogVisible = true;
        },
        handleSelectionChange() {
            //
        },
        handleNodeClick() {
            //
        },
        cancelChecked() {
            //
        }
    }
}
</script>
<style lang="less" scoped>
.container {
    position: absolute;
    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;
    }


    .bottom {
        position: absolute;
        left: 330px;
        right: 16px;
        bottom: 20px;
        height: 50px;
        line-height: 20px;
        background-color: rgba(255, 255, 255, 1);
        text-align: center;

        .checkbox {
            position: absolute;
            left: 29px;
            top: 15px;
            font-size: 14px;
        }

        .check-cancel {
            position: absolute;
            // line-height: 20px;
            font-size: 14px;
            text-align: center;
            left: 140px;
            top: 10px;
        }

        .bottom_button {
            position: absolute;
            left: 200px;
            margin-top: 15px;

            .delete {
                font-size: 14px;
                text-align: center;
                padding: 1px;
            }
        }
    }

    .el-form {
        margin: 30px 0 0 0;

        .el-form-item {
            margin-inline: 20px;
            margin-bottom: 0;
        }

        /deep/.el-form-item__label {
            padding: 0;
        }

        /deep/.el-form-item__content {
            display: flex;
        }

        /deep/.el-input__inner {
            width: 300px;
        }
    }

    /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;
    }

}

.search {
    position: absolute;
    width: 300px;
    top: 20px;
    right: 20px;
}
</style>