<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="userProps"
                                    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 } 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;
                    }
                }
            }
        },
        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;
                this.rcvr = 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.username);
                } else {
                    this.params.rcvrs.splice(this.params.rcvrs.contains(data.username), 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(() => {

                    });
                }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;
                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([]);
            }
        },
        mounted() {
            this.getAllType();
            this.getUserInfo();
        }

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