<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 class="newInfo_button"><i class="el-icon-s-order"></i>新建消息模块</el-button>
        </div>
        <div class="right-pane">
            <el-tag>新建消息模块</el-tag>
            <el-form :model="form" label-position="left" label-width="80px">
                <el-form-item style="width: 350px;" :model="form.template_name" label="模块名称：">
                    <el-input v-model="input"></el-input>
                </el-form-item>
                <el-form-item style="width: 350px;" :model="form.template_superior" label="模块上级：">
                    <el-select>
                        <el-option label="普通消息"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item style="width: 350px;" :model="form.channelconfig" label="通道配置：">
                    <el-checkbox label="短信" v-model="checked"></el-checkbox>
                    <el-checkbox label="邮件"></el-checkbox>
                    <el-checkbox label="钉钉"></el-checkbox>
                    <el-checkbox label="站内通知"></el-checkbox>
                </el-form-item>
                <el-form-item style="width: 350px;" :model="form.personconfig" label="人员配置：">
                    <el-checkbox label="全体" v-model="checked2"></el-checkbox>
                    <el-checkbox label="运管管理员"></el-checkbox>
                    <div style="display: flex; margin-left: 30px;">
                        <el-checkbox style="margin-right: 10px;"></el-checkbox><span>
                            <el-cascader style="width: 300px;" :options="options" placeholder="选择角色/部门/单位" filterable>
                            </el-cascader>
                        </span>
                    </div>
                </el-form-item>
                <el-form-item style="width: 350px;" :model="form.sendtiming" label="发送时间：">
                    <el-radio v-model="radio" label="1" style="margin-top:13px">定时</el-radio>
                    <span>
                        <el-date-picker v-model="value1" type="datetime" placeholder="选择日期时间">
                        </el-date-picker>
                    </span>
                </el-form-item>
                <el-form-item style="width: 350px;">
                    <el-radio v-model="radio" label="2">立刻</el-radio>
                </el-form-item>
            </el-form>
            <div class="bottom">
                <el-button>下一个</el-button>
                <el-button>重置</el-button>
                <el-button>确认</el-button>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            checked: true,
            checked2: true,
            radio: '1',
            value1: '',
            filterText: '',
            data: [{
                label: '普通消息',
                children: [{
                    label: '年度报告通知',
                }, {
                    label: '报表导出通知'
                }, {
                    label: '系统更新通知'
                }]
            },
            {
                label: '提醒消息',
                children: [{
                    label: '资产年限提醒',
                }, {
                    label: '人员画像提醒',
                }, {
                    label: '备餐提醒',
                }]
            }],
             options:[
                {
                    value:'角色',
                    label:'角色',
                    children:[{
                        children:[
                            {

                            }
                        ]
                    }]
                },
                {
                    value:'公司',
                    label:'公司',
                    children:[{
                        value:'中讯设计院',
                        label:'中讯设计院',
                        children:[{
                            value:'北京电信规划设计院',
                            label:'北京电信规划设计院',
                        }]
                    }
                    ]
                }
            ],
            defaultProps: {
                children: 'children',
                label: 'label'
            },
            form: {

            },
            input: ''
        }
    },
    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>
.container {
    position: fixed;
    left: 218px;
    top: 140px;
    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: 15px;

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

        .newInfo_button {
            position: absolute;
            left: -5px;
            bottom: 50px;
            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;

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

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

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

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

.el-tag {
    position: absolute;
    background-color: transparent;
    border-color: transparent;
    font-size: 25px;
    color: #000;
    top: 20px;
    left: 20px;

}

.el-button--text {
    position: absolute;
    top: 70px;
    right: 20px;
}

.el-button {
    height: 30px;
    width: 100px;
    margin-top: 20px;
    margin-inline: 40px;
    padding: 5px;
}
.bottom{
    position: absolute;
    left:450px;
    top:700px;
}
</style>