<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="sndr"
                                    show-checkbox
                                    node-key="id"
                                    :props="userProps">
                            </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="message_type"
                                    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="rcvr"
                                    show-checkbox
                                    node-key="id"
                                    :props="userProps">
                            </el-tree>
                        </el-row>
                    </el-col>
                    <el-col :span="6">
                        <el-row class="bt">
                            <span>消息路由配置其他属性</span>
                        </el-row>
                        <el-row>
                            <el-form :inline="true" :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>
    import {getAlltype} from "../../api/message_bus";
    export default {
        name: "Configure",

        data() {
            return {
                formInline: {
                    state: '',
                    purpose: '',
                    describe: ''
                },
                sndr: [{
                    id: 1,
                    label: '代理人系统接收账号（AGTR）',
                }, {
                    id: 2,
                    label: '代理人接收中外运预配（AGTZ）',
                }, {
                    id: 3,
                    label: '【测试】舱单自动化解析系统（AMDB）',
                }],
                rcvr: [{
                    id: 1,
                    label: '代理人系统接收账号（AGTR）',
                }, {
                    id: 2,
                    label: '代理人接收中外运预配（AGTZ）',
                }, {
                    id: 3,
                    label: '【测试】舱单自动化解析系统（AMDB）',
                }],
                queryInfo:{
                    pageNum:1,
                    pageSize:10,
                    name:"",
                    type:"",
                },
                message_type: [{
                    id: 1,
                    nameAndDes: '航班动态（1）',
                    children: [{
                        id: 7,
                        nameAndDes: '',
                        children: [{
                            id: 8,
                            nameAndDes: ''
                        }, {
                            id: 9,
                            nameAndDes: ''
                        }]
                    }]
                }, {
                    id: 2,
                    nameAndDes: '航班历史（2）',
                    children: [{
                        id: 7,
                        nameAndDes: '',
                        children: [{
                            id: 8,
                            nameAndDes: ''
                        }, {
                            id: 9,
                            nameAndDes: ''
                        }]
                    }]
                }, {
                    id: 3,
                    nameAndDes: '卡口业务交换信息（80）',
                    children: [{
                        id: 4,
                        nameAndDes: '卡口业务数据（KAKO）',
                        children: [{
                            id: 5,
                            nameAndDes: 'ALL'
                        }, {
                            id: 6,
                            nameAndDes: '卡口车单绑定关系数据（CARB）'
                        }]
                    }]
                }],
                defaultProps: {
                    children: 'children',
                    label: 'nameAndDes'
                },
                userProps: {
                    children: 'children',
                    label: 'label'
                }
            }
        },
        methods: {
            onSubmit() {
                console.log('submit!');
            },
            getAllType() {
                let _this  =this;
                getAlltype().then((response) => {
                    let res = response.data;
                    if (res.code !== '200') {
                        return _this.$message.error('获取消息记录，失败！');
                    }
                    // 获取列表数据
                    _this.message_type = res.data;
                    // 关闭加载
                    _this.$message.success('获取消息收发记录，成功！');
                }).catch(error => {
                    // 关闭加载
                    _this.$message.error(error.toString());
                });
            }
        },
        mounted() {
            this.getAllType();
        },

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