<template>
    <el-container>
        <el-main>
            <el-card style="background-color: #F5F7FA">
                <!-- 搜素区域 -->
                <el-row>
                    <el-col :span="24" align="left">
                        <el-button type="warning" size="medium" icon="el-icon-search" @click="loadRouter"
                                   :loading="loadingStatus">
                            加载已配置消息
                        </el-button>
                        <el-button type="primary" size="medium" icon="el-icon-plus" @click="batchAddRouter"
                                   :loading="loadingStatus">
                            生成路由
                        </el-button>
                    </el-col>
                </el-row>
                <el-divider></el-divider>
                <el-row>
                    <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="username"
                                            :props="userProps"
                                            ref="sndrTree"
                                            @check-change="treeSndrCheckChange"

                                    >
                                    </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="name"
                                            default-expand-all
                                            check-strictly
                                            :props="defaultProps"
                                            highlight-current
                                            ref="typeTree"
                                            @check-change="treeTypeCheckChange"
                                    >
                                    </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="queueProps"
                                            ref="rcvrTree"
                                            @check-change="treeRcvrCheckChange"
                                    >
                                    </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="params" class="demo-form-inline" align="center"
                                             style="border:3px solid #6F8294;height: 800px;padding-top: 15px">
                                        <el-form-item label="路由状态：">
                                            <el-select v-model="params.status" placeholder="请选择" style="width: 150px"
                                                       size="mini">
                                                <el-option
                                                        v-for="item in status_options"
                                                        :key="item.value"
                                                        :label="item.label"
                                                        :value="item.value">
                                                    <span style="float: left">{{ item.label }}</span>
                                                    <span style="float: right; color: #8492a6; font-size: 13px">{{ item.value }}</span>
                                                </el-option>
                                            </el-select>
                                        </el-form-item>
                                        <el-form-item label="路由用途：">
                                            <el-select v-model="params.usage" placeholder="请选择" style="width: 150px"
                                                       size="mini">
                                                <el-option
                                                        v-for="item in usage_options"
                                                        :key="item.value"
                                                        :label="item.label"
                                                        :value="item.value">
                                                    <span style="float: left">{{ item.label }}</span>
                                                    <span style="float: right; color: #8492a6; font-size: 13px">{{ item.value }}</span>
                                                </el-option>
                                            </el-select>
                                        </el-form-item>
                                        <el-form-item label="路由描述：">
                                            <el-input type="textarea" v-model="params.des" style="width: 150px"
                                                      size="mini"></el-input>
                                        </el-form-item>
                                    </el-form>
                                </el-row>
                            </el-col>
                        </el-row>

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

<script>
    import {getAlltype, api_batchAddRouter, loadRouterBySndr, selectBusQueueList} from "../../api/message_bus";

    export default {
        name: "Configure",

        data() {
            return {
                loadingStatus: false,
                sndr: [],
                rcvr: [],
                api_back: [],
                params: {
                    sndr: '',
                    sndrs: [],
                    types: [],
                    rcvrs: [],
                    status: 1,
                    usage: 2,
                    des: "",
                    ver: "1.0"
                },
                status_options: [
                    {
                        label: "启用",
                        value: 1
                    },
                    {
                        label: "关闭",
                        value: 0
                    }
                ],
                usage_options: [
                    {
                        label: "生产用",
                        value: 1
                    },
                    {
                        label: "测试用",
                        value: 2
                    }
                ],
                message_type: [],
                defaultProps: {
                    children: 'children',
                    label: function (data, node) {
                        return '[' + data.name + ']' + data.des;
                    },
                    disabled: 'disabled'
                },
                userProps: {
                    children: 'children',
                    label: function (data, node) {
                        return '(' + data.username + ')' + data.des;
                    }
                },
                queueProps:{
                    children: 'children',
                    label: function (data, node) {
                        return '(' + data.queueName + ')' + data.description;
                    }
                }
            }
        },
        methods: {
            typeFilterNode(treeList) {
                let _this = this;
                if (Array.isArray(treeList)) {
                    treeList.forEach(function (item, index) {
                        if (item.type == 1 || item.type == 2) {
                            item.disabled = true;
                        }
                        if (item.children !== undefined) {
                            _this.typeFilterNode(item.children);
                        }
                    })
                }

            },
            getAllType() {
                let _this = this;
                _this.loadingStatus = true;
                getAlltype().then((response) => {
                    let res = response.data;
                    if (res.code !== '200') {
                        _this.loadingStatus = false;
                        return _this.$message.error('获取消息类型失败！');
                    }
                    // 获取列表数据
                    _this.message_type = res.data;
                    // _this.typeFilterNode(_this.message_type);
                    // 关闭加载
                    _this.$message.success('获取消息类型成功！');
                    _this.loadingStatus = false;
                }).catch(error => {
                    // 关闭加载
                    _this.$message.error(error.toString());
                    _this.loadingStatus = false;
                });
            },
            /**
             * 访问用户服务,绑定用户列表，按组搜索
             */
            getUserInfo() {
                let userResponse = [{
                    id: 1,
                    username: "zp260",
                    des: "测试用户1"
                }, {
                    id: 2,
                    username: "test04",
                    des: "测试用户2"
                },
                    {
                        id: 3,
                        username: "zp2505",
                        des: "测试用户3"
                    }
                ];
                this.sndr = userResponse;
            },
            treeSndrCheckChange(data, checked, indeterminate) {
                if (checked) {
                    this.params.sndrs.push(data.username);
                } else {
                    this.params.sndrs.splice(this.params.sndrs.contains(data.username), 1);
                }
            },
            treeRcvrCheckChange(data, checked, indeterminate) {
                if (checked) {
                    this.params.rcvrs.push(data.queueName);
                } else {
                    this.params.rcvrs.splice(this.params.rcvrs.contains(data.queueName), 1);
                }
            },
            treeTypeCheckChange(data, checked, indeterminate) {
                let mt = {
                    name: '',
                    type: 0
                };
                mt.name = data.name;
                mt.type = data.type;
                if (checked) {
                    this.params.types.push(mt);
                } else {
                    this.params.types.splice(this.params.types.contains(mt), 1);
                }
                console.log(this.params.types);
            },
            loadRouter() {
                let _this = this;
                this.loadingStatus = true;
                if (this.params.sndrs.length !== 1) {
                    this.$confirm('请选择单个发送者', '错误', {
                        confirmButtonText: '确定',
                        type: 'error',
                        center: true
                    }).then(() => {
                        _this.loadingStatus = false;
                    }).catch(() => {
                        _this.loadingStatus = false;
                    });
                } else {
                    let pam = {
                        sndr: _this.params.sndrs[0]
                    };
                    loadRouterBySndr(pam).then(response => {
                        let res = response.data;
                        if (res.code !== '200') {
                            return _this.$message.error('读取用户路由，失败！');
                        }
                        _this.api_back = res.data;
                        _this.loadRouterHandle();
                        // 关闭加载
                        _this.$message.success('读取用户路由，成功！');
                        _this.loadingStatus = false;
                    }).catch(
                        error => {
                            // 关闭加载
                            _this.$message.error(error.toString());
                            _this.loadingStatus = false;
                        }
                    )
                }
            },
            loadRouterHandle() {
                if (Array.isArray(this.api_back) && this.api_back.length > 0) {
                    let typeList = [];
                    this.api_back.forEach(function (routerItem, index) {
                        typeList.push({name: routerItem.stype});
                    });
                    this.typeTreeSet(typeList);
                }
            },
            typeTreeSet(typeList) {
                this.$refs.typeTree.setCheckedNodes(typeList);
            },
            batchAddRouter() {
                let _this = this;
                _this.loadingStatus = true;
                //todo: 生产者列表，消费者列表，及路由类型判空后再访问接口
                api_batchAddRouter(this.params).then(response => {
                    let res = response.data;
                    console.log(res)
                    if (res.code != '200') {
                        return _this.$message.error(res.msg);
                        _this.loadingStatus = false;
                    }
                    // 关闭加载
                    _this.$message.success('批量添加路由，成功！');
                    _this.loadingStatus = false;
                    _this.resetPage();
                }).catch(
                    error => {
                        // 关闭加载
                        _this.$message.error(error.toString());
                        _this.loadingStatus = false;
                    }
                )
            },
            resetPage() {
                this.$refs.sndrTree.setCheckedKeys([]);
                this.$refs.typeTree.setCheckedKeys([]);
                this.$refs.rcvrTree.setCheckedKeys([]);
            },
            queue_getList() {
                let queue_queryInfo = {
                        // 当前页数
                        pageNum: 1,
                        // 每页条数
                        pageSize: 100000
                    };
                selectBusQueueList(queue_queryInfo).then((response) => {
                    let res = response.data;
                    if (res.code !== '200') {
                        // 关闭加载
                        return this.$message.error(res.msg);
                    }
                    // 获取列表数据
                    this.rcvr = res.data.list;
                    this.$message.success(res.msg);
                }).catch(error => {
                    // 关闭加载
                    this.$message.error(error.toString());
                });
            }
        },
        mounted() {
            this.getAllType();
            this.getUserInfo();
            this.queue_getList();
        }

    }
</script>

<style scoped>
    .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>