<template>
    <el-container>
        <el-main>
            <el-card style="background-color: #F5F7FA">
<!--                 搜素区域 -->
                <div>
                    <el-row>
<!--                        <el-col :span="4">-->
<!--                            <el-input v-model="queueView_queryInfo.serverName" prefix-icon="el-icon-search" size="medium"-->
<!--                                      placeholder="服务器名称" clearable></el-input>-->
<!--                        </el-col>-->
<!--                        <el-col :span="4">-->
<!--                            <el-input v-model="queueView_queryInfo.virtualHostName" prefix-icon="el-icon-search" size="medium"-->
<!--                                      placeholder="虚拟主机名称" clearable></el-input>-->
<!--                        </el-col>-->
                        <el-col :span="8">
                            <el-button type="success" style="width:150px" size="medium" @click="timerStatus==='start'?timerEnd():timerStart()">
                                {{timergMap[timerStatus]}}
                            </el-button>
                        </el-col>
                    </el-row>
                </div>
<!--                 列表区域 -->
                <div style="margin-top: 20px;">
                    <el-table :data="queueView_page.queueViewList" border size="small"
                              :default-sort = "{prop: 'lag', order: 'descending'}"
                              v-loading="queueView_loading.listLoading" element-loading-text="获取队列监控信息，拼命加载中">
                        <el-table-column type="index" align="center"></el-table-column>
                        <el-table-column label="消费组" prop="groupName" align="center" width="150"></el-table-column>
                        <el-table-column label="TOPIC" prop="topic" align="center" width="150"></el-table-column>
                        <el-table-column label="partition" prop="partition" align="center" width="230">
                        </el-table-column>
                        <el-table-column label="积压消息" prop="lag" align="center" width="120" sortable>
<!--                            <template slot-scope="scope">-->
<!--                                <span v-if="scope.row.queueInfo.messages_ready !== null" style="color: #eb2f06">-->
<!--                                    {{scope.row.queueInfo.messages_ready}}-->
<!--                                </span>-->
<!--                            </template>-->
                        </el-table-column>
                        <el-table-column label="消息总数" prop="endoffset" align="center" width="120"></el-table-column>
<!--                        <el-table-column label="持久化" prop="queueInfo.durable" align="center" width="120">-->
<!--                            <template slot-scope="scope">-->
<!--                                <span v-if="scope.row.queueInfo.durable ===false">否</span>-->
<!--                                <span v-if="scope.row.queueInfo.durable ===true">是</span>-->
<!--                            </template>-->
<!--                        </el-table-column>-->
<!--                        <el-table-column label="自动删除" prop="queueInfo.auto_delete" align="center" width="120">-->
<!--                            <template slot-scope="scope">-->
<!--                                <span v-if="scope.row.queueInfo.auto_delete ===false">否</span>-->
<!--                                <span v-if="scope.row.queueInfo.auto_delete ===true">是</span>-->
<!--                            </template>-->
<!--                        </el-table-column>-->
                    </el-table>
                </div>
            </el-card>
        </el-main>
    </el-container>
</template>

<script>
    import {selectQueueViewList} from "../../../api/message_bus";

    export default {
        name: "QueueView",
        data() {
            return {
                timergMap: {
                    start: '监控中',
                    end: '已停止',
                },
                timerStatus: "start",
                timer:{},
                queueView_queryInfo: {
                    GroupName: '',
                    topic: '',
                    partition: 1,
                    Lag: 10
                },
                queueView_page: {
                    queueViewList: [],
                    total: 0,
                },
                queueView_loading: {
                    listLoading: false,
                },
                /**
                 * Boolean属性，选择列表
                 */
                booleanList: [
                    {
                        value: true,
                        label: '是'
                    },
                    {
                        value: false,
                        label: '否'
                    },
                ],
            }
        },
        methods: {
            /**
             * 分页查询，监听 pageSize 改变的事件
             */
            queueView_handleSizeChange(newSize) {
                this.queueView_queryInfo.pageSize = newSize;
                this.getQueueViewList();
            },
            timerStart(){
                this.timerStatus= "start";
                this.getQueueViewList();
                this.timer = setInterval(this.getQueueViewList, 10000);
            },
            timerEnd(){
                this.timerStatus= "end";
                clearInterval(this.timer);
            },
            /**
             * 分页查询，监听 pageNum 改变的事件
             */
            queueView_handleCurrentChange(newPage) {
                this.queueView_queryInfo.pageNum = newPage;
                this.getQueueViewList();
            },

            getQueueViewList() {
                this.queueView_loading.listLoading = true;
                selectQueueViewList(this.queueView_queryInfo).then((response) => {
                    let res = response.data;
                    if (res.code !== '200') {
                        this.queueView_loading.listLoading = false;
                        return this.$message.error(res.msg);
                    }
                    this.queueView_page.queueViewList = res.data;
                    // this.queueView_page.total = res.total;
                    this.queueView_loading.listLoading = false;
                }).catch(error => {
                    this.queueView_loading.listLoading = false;
                    this.$message.error(error.toString());
                });
            }
        },
        created() {
        },
        mounted() {
            this.timerStart();
        },
        beforeDestroy() {
            clearInterval(this.timer);
        },
        computed: {},
    }
</script>

<style scoped>
    .demo-table-expand {
        font-size: 0;
    }

    .demo-table-expand label {
        width: 90px;
        color: #99a9bf;
    }

    .demo-table-expand .el-form-item {
        margin-right: 0;
        margin-bottom: 0;
        width: 50%;
    }
</style>