<template>
    <div class="sub-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>
        </div>
        <div class="right-pane">
            <div>
                <p class="info">指标列表</p>
                <el-button class="new_button">新建</el-button>
            </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 prop="indexName" label="指标名称">
                </el-table-column>
                <el-table-column prop="indexUnit" label="指标单位">
                </el-table-column>
                <el-table-column prop="defaultValue" label="默认值">
                </el-table-column>
                <el-table-column prop="calculateRules" label="计算规则">
                </el-table-column>
                <el-table-column prop="operation" label="操作">
                    <el-select>
                        <el-option></el-option>
                    </el-select>
                    <el-button size="mini" type="text">删除</el-button>
                </el-table-column>
            </el-table>
            <div class="bottom">
                <div>
                    <checkbox class="checkbox" :total="total"></checkbox>
                    <el-button class="check-cancel" size="mini" type="text" @click="cancleChecked">取消</el-button>
                </div>
                <div class="bottom_button" v-show="show">
                    <el-button class="delete" type="text">批量删除</el-button>
                </div>
                <page class="page"></page>
            </div>
        </div>
    </div>
</div></template>

<script>
import checkbox from '@/components/Checkbox/index'
import page from '@/components/pagination/index'
export default {
    components: { checkbox, page },
    data() {
        return {
            total: 0,
            filterText: '',
            data:[
            {
                label: '人员画像',
                children: [{
                    label: '人员态势',
                }, {
                    label: '餐厅消费态势'
                }, {
                    label: '商超消费态势'
                }]
            },
            {
                label: '能源画像',
                children: [{
                    label: '用电态势',
                }, {
                    label: '用水态势'
                }, {
                    label: '用热态势'
                }]
            }
            ],
            tableData: [
            {
                indexName: '进入大楼人数',
                indexUnit: '人数/时间',
                defaultValue: '1000',
                calculateRules: '测试中。。。',
                operation: '',
            },
            {
                indexName: '进入大楼人数',
                indexUnit: '人数/时间',
                defaultValue: '实时',
                calculateRules: '测试中。。。',
                operation: '',
            },
            {
                indexName: '进入大楼人数',
                indexUnit: '人数/时间',
                defaultValue: '1000',
                calculateRules: '测试中。。。',
                operation: '',
            }
            ],
            defaultProps: {
                children: 'children',
                label: 'label'
            }
        }
    },
    watch: {
        filterText(val) {
            this.$refs.tree.filter(val);
        }
    },
    methods: {
        filterNode(value, data) {
            if (!value) return true;
            return data.label.indexOf(value) !== -1;
        }
    }
}
</script>

<style lang="less" scoped>
.sub-container {
    position: fixed;
    left: 218px;
    top: 220px;
    right: 16px;
    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: 0 15px 0 15px;

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

    .right-pane {
        width: 1340px;
        position: absolute;
        margin-left: 330px;
        top: 0;
        margin-right: 20px;

        .info {
            text-align: left;
            padding: 10px;
            font-size: 25px;
        }

        .new_button {
            padding: 5px;
            width: 80px;
            position: relative;
            left: 600px;
        }

        .el-table {
            margin-top: 10px;
        }
        .el-select{
            width: 80px;
            margin-right: 20px;
        }

        .bottom {
            position: absolute;
            top:650px;
            height: 50px;
            width: 1340px;
            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;
                top: 7px;

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

                .disabled {
                    width: 95px;
                    height: 30px;
                    font-size: 14px;
                    text-align: center;
                    padding: 1px;
                }

                .el-dropdown {
                    margin-left: 15px;

                    /deep/.el-button--primary {
                        height: 30px;
                        //background-color: rgba(255, 255, 255, 1);
                    }
                }
            }

            .page {
                position: absolute;
                top: -10px;
                right: 30px;
            }
        }
    }
}
</style>