<template>
    <el-container>
        <el-main>
            <div style="border: 6px solid #6F8294;">
                <el-row style="margin: -2px">
                    <el-col :span="6">
                        <el-row class="bt">
                            <span>选择消息发送端</span>
                        </el-row>
                        <el-row>
                            <el-tree
                                    :data="send"
                                    show-checkbox
                                    node-key="id"
                                    :props="defaultProps">
                            </el-tree>
                        </el-row>
                    </el-col>
                    <el-col :span="6" align="center">
                        <el-row class="bt">
                            <span>选择要发送的消息</span>
                        </el-row>
                        <el-row>
                            <el-tree
                                    :data="ready"
                                    show-checkbox
                                    node-key="id"
                                    :props="defaultProps">
                            </el-tree>
                        </el-row>
                    </el-col>
                    <el-col :span="6">
                        <el-row class="bt">
                            <span>选择消息接收端</span>
                        </el-row>
                        <el-row>
                            <el-tree
                                    :data="send"
                                    show-checkbox
                                    node-key="id"
                                    :props="defaultProps">
                            </el-tree>
                        </el-row>
                    </el-col>
                    <el-col :span="6">
                        <el-row class="bt">
                            <span>消息路由配置其他属性</span>
                        </el-row>
                        <el-row>
                            <el-form :inline="true" :rules="rules" :model="formInline" class="demo-form-inline" align="center" style="border:3px solid #6F8294;height: 800px;padding-top: 15px">
                                <el-form-item label="路由状态：">
                                    <el-select v-model="formInline.state" placeholder="请选择" style="width: 150px" size="mini">
                                        <el-option label="启用" value="01"></el-option>
                                        <el-option label="关闭" value="02"></el-option>
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="路由用途：">
                                    <el-select v-model="formInline.purpose" placeholder="请选择" style="width: 150px" size="mini">
                                        <el-option label="生产用" value="03"></el-option>
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="路由描述：">
                                    <el-input type="textarea" v-model="formInline.describe" style="width: 150px" size="mini"></el-input>
                                </el-form-item>
                            </el-form>
                        </el-row>
                    </el-col>
                </el-row>

            </div>
        </el-main>
    </el-container>
</template>

<script>
    export default {
        name: "Configure",

        data() {
            return {
                formInline: {
                    state: '',
                    purpose:'',
                    describe:''
                },
                send: [{
                    id: 1,
                    label: '代理人系统接收账号（AGTR）',
                }, {
                    id: 2,
                    label: '代理人接收中外运预配（AGTZ）',
                }, {
                    id: 3,
                    label: '【测试】舱单自动化解析系统（AMDB）',
                }],
                ready: [{
                    id: 1,
                    label: '航班动态（1）',
                    children: [{
                        id: 7,
                        label: '',
                        children: [{
                            id: 8,
                            label: ''
                        }, {
                            id: 9,
                            label: ''
                        }]
                    }]
                }, {
                    id: 2,
                    label: '航班历史（2）',
                    children: [{
                        id: 7,
                        label: '',
                        children: [{
                            id: 8,
                            label: ''
                        }, {
                            id: 9,
                            label: ''
                        }]
                    }]
                }, {
                    id: 3,
                    label: '卡口业务交换信息（80）',
                    children: [{
                        id: 4,
                        label: '卡口业务数据（KAKO）',
                        children: [{
                            id: 5,
                            label: 'ALL'
                        }, {
                            id: 6,
                            label: '卡口车单绑定关系数据（CARB）'
                        }]
                    }]
                }],
                defaultProps: {
                    children: 'children',
                    label: 'label'
                }
            }
        },
        methods: {
            onSubmit() {
                console.log('submit!');
            }
        }
    }
</script>

<style>
    .bt {
        font-weight: bold;
        background-color: #6F8294;
        color: #ffffff;
        text-align: center
    }
    .el-col {
        margin-right: 0px;
    }
    .el-tree {
        padding-top: 15px;
        border:3px solid #6F8294;
        height: 800px
    }
    .el-row .el-col .el-row {
        margin-top: 0px;
    }
</style>