<template>
    <section>
        <!--工具条-->
        <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
            <el-form :inline="true" :model="filters">
                <el-form-item>
                    <el-button type="success" @click="applyAdd()">新  增</el-button>
                </el-form-item>
            </el-form>
        </el-col>
        <!--列表-->
        <el-table :data="tableData" highlight-current-row  style="width: 100%;"
                  row-key="ruleId">
            <el-table-column width="80" prop="hostid" label="服务器ID"  >
            </el-table-column>
            <el-table-column width="240" prop="localdir" label="本地发送目录"  >
            </el-table-column>
            <el-table-column width="120" prop="destvr" label="目的地虚拟机" >
            </el-table-column>
            <el-table-column width="120" prop="routerkey" label="路由" >
            </el-table-column>
            <el-table-column width="120" prop="queue" label="队列">
            </el-table-column>
            <el-table-column width="120" prop="destchange" label="目的地交换">
            </el-table-column>
            <el-table-column width="120" prop="broadtype" label="广播类型" >
            </el-table-column>
            <el-table-column width="240" label="操作" fixed="right">
                <template slot-scope="scope">
                    <el-button type="success"  @click="firing(scope.row)">启动</el-button>
                    <el-button type="warning"  @click="suspend(scope.$index,scope.row)">暂停</el-button>
                    <el-button type="danger"  @click="batchRemove(scope.$index,scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!--		分页-->
        <div class="block">
            <el-pagination
                    :current-page="filters.pageNum"
                    :page-sizes="[10, 50, 100, 500]"
                    :page-size="filters.pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
            />
        </div>
        <el-row>
            <el-dialog :title="dialogMap[dialogApply]" :visible.sync="apply_dialog" width="50%">
                <el-form  :model="addForm"  :rules="rules" ref="addForm" style="margin-top: 20px">
                    <el-row>
                        <el-col :span="11">
                            <el-form-item label="服务器ID" :label-width="formLabelWidth"  prop="hostid">
<!--                                <el-input v-model="addForm.hostid" autocomplete="off" size="small" style="width: 260px">-->
<!--                                </el-input>-->
                                <el-select v-model="addForm.hostid" clearable placeholder="请选择"
                                           style="width: 260px">
                                    <el-option
                                            v-for="item in hostid"
                                            :key="item.id"
                                            :label="item.hostid"
                                            :value="item.hostid">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="本地发送目录" :label-width="formLabelWidth"  prop="localdir">
                                <el-input v-model="addForm.localdir" autocomplete="off" size="small" style="width: 260px">
                                </el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="11">
                            <el-form-item label="目的地虚拟机" :label-width="formLabelWidth"  prop="destvr">
                                <el-input v-model="addForm.destvr" autocomplete="off" size="small" style="width: 260px">
                                </el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="路由" :label-width="formLabelWidth"  prop="routerkey">
                                <el-input  v-model="addForm.routerkey" autocomplete="off" size="small" style="width: 260px">
                                </el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="11">
                            <el-form-item label="队列" :label-width="formLabelWidth"  prop="queue">
                                <el-input v-model="addForm.queue" autocomplete="off" size="small" style="width: 260px">
                                </el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="11">
                            <el-form-item label="目的地交换" :label-width="formLabelWidth"  prop="destchange">
                                <el-input v-model="addForm.destchange" autocomplete="off" size="small" style="width: 260px">
                                </el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="11">
                            <el-form-item label="广播类型" :label-width="formLabelWidth"  prop="broadtype">
                                <el-input v-model="addForm.broadtype" autocomplete="off" size="small" style="width: 260px">
                                </el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="apply_dialog = false" size="small">取 消</el-button>
                    <el-button type="primary" @click="dialogApply==='create'?add():edit()" size="small">提 交</el-button>
                </div>
            </el-dialog>
        </el-row>
        <el-dialog :visible.sync="tableData1_dialog" >
            <!--列表-->
            <el-table disabled :data="tableData1" highlight-current-row  style="width: 100%;"
                      row-key="ruleId">
                <el-table-column width="120" prop="hostid" label="服务器IP"  >
                </el-table-column>
                <el-table-column width="120" prop="port" label="端口"  >
                </el-table-column>
                <el-table-column width="120" prop="user" label="账号" >
                </el-table-column>
                <el-table-column width="120" prop="pass" label="密码" >
                </el-table-column>
            </el-table>
        </el-dialog>
    </section>
</template>
<script>
    import {
        listSendConfigs,
        insertSendConfig,
        deleteSendConfig,
        addsendtask,
        removesendTask,
        listRabbitConfigs
    } from '../../api/configuration';
    export default {
        data() {
            return {
                filters: {
                    pageNum: 1,
                    pageSize: 10
                },
                total: 0,
                tableData: [],
                hostid:[],
                tableData1: [],
                tableData1_dialog:false,
                dialogMap: {
                    update: '编辑',
                    create: '新增'
                },
                dis: undefined,
                dialogApply: 'create',
                apply_dialog: false,
                addForm: {
                    hostid:'',
                    localdir: '',
                    destvr: '',
                    routerkey: '',
                    queue: '',
                    destchange:'',
                    broadtype:'',
                    id:'',
                    del: '',
                    durability: '',
                    internal: 'false',
                    status:'',
                },
                formLabelWidth: '200px',
                rules: {
                },

            }
        },
        mounted() {
            this.getList();
        },
        methods: {
            //分页
            handleSizeChange(val) {
                this.filters.pageSize = val
                this.getList()
            },
            handleCurrentChange(val) {
                this.filters.pageNum = val
                this.getList()
            },
            //获取列表
            getList() {
                const _this = this
                listSendConfigs().then((response) => {
                    const res = response.data
                    if (res.code !== '200') {
                        return _this.$message.error('获取消息收发记录，失败！')
                    }
                    // 获取列表数据
                    _this.tableData = res.data
                    // 获取列表的总记录数
                    _this.total = res.data.total
                    _this.$message.success('获取消息收发记录，成功！')
                }).catch(error => {
                    // 关闭加载
                    _this.$message.error(error.toString())
                })
            },
            // 添加对话框，打开事件
            applyAdd() {
                this.hostid=[];
                const _this = this
                listRabbitConfigs().then((response) => {
                    const res = response.data
                    if (res.code !== '200') {
                        return _this.$message.error('获取消息收发记录，失败！')
                    }
                    // 获取列表数据
                    _this.tableData1 = res.data
                    _this.hostid=_this.tableData1;
                    _this.$message.success('获取消息收发记录，成功！')
                }).catch(error => {
                    // 关闭加载
                    _this.$message.error(error.toString())
                })
                this.addForm = {
                    hostid:'',
                    localdir: '',
                    destvr: '',
                    routerkey: '',
                    queue: '',
                    destchange:'',
                    broadtype:'',
                    id:'',
                    del: '',
                    durability: '',
                    internal: 'false',
                    status:'',
                };
                this.dialogApply= 'create';
                this.dis= 'create';
                this.apply_dialog = true;
            },
            // 添加功能
            add() {
                this.$refs.addForm.validate(valid => {
                    // 未通过，表单预校验
                    if (!valid) return;
                    insertSendConfig(this.addForm).then((response) => {
                        let res = response.data;
                        // 添加失败
                        if (res.code !== '200') {
                            return this.$message.error(res.msg);
                        }
                        // 添加，成功
                        this.$message.success(res.msg);
                        // 隐藏对话框
                        this.apply_dialog = false;
                        // 刷新列表
                        this.getList();
                    }).catch(error => {
                        this.$message.error(error.toString());
                    });
                })
            },
            // 启动功能
            firing() {
                // 弹框询问是否删除？
                this.$confirm(' 是否继续?', '警告', {
                        confirmButtonText: '确定启动',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }
                ).then(() => {
                    addsendtask({row:this.row}).then((response) => {
                        const res = response.data
                        this.$message.success(res.msg)
                        this.getList()
                    }).catch(error => {
                        this.$message.error(error)
                    })
                }).catch(() => {
                })

            },
            //暂停
            suspend(index,row) {
                // 弹框询问是否删除？
                this.$confirm(' 是否继续?', '警告', {
                        confirmButtonText: '确定暂停',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }
                ).then(() => {
                    removesendTask({id:row.id}).then((response) => {
                        const res = response.data
                        this.$message.success(res.msg)
                        this.getList()
                    }).catch(error => {
                        this.$message.error(error)
                    })
                }).catch(() => {
                })
            },
            //删除
            batchRemove(index,row) {
                // 弹框询问是否删除？
                this.$confirm('此操作永久删除该消息, 是否继续?', '警告', {
                        confirmButtonText: '确定删除',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }
                ).then(() => {
                    deleteSendConfig({id:row.id}).then((response) => {
                        const res = response.data
                        this.$message.success(res.msg)
                        this.getList()
                    }).catch(error => {
                        this.$message.error(error)
                    })
                }).catch(() => {
                })
            },
        },


    }
</script>