<template>
    <el-container>
        <el-main>
            <el-card style="background-color: #F5F7FA">
                <div>
                    <el-row style="margin-left: 30px;">
                        <el-col :span="7">
                            <el-input v-model="messageNote_queryInfo.alias_sendContent" placeholder="发送内容"
                                      size="medium" clearable >
                                <template  slot="prepend" ><i class="el-icon-document-checked"></i>发送内容</template>
                            </el-input>
                        </el-col>
                        <el-col :span="8">
                            <el-button type="warning" style="width:150px" size="medium" icon="el-icon-search" @click="searchSubmit">
                                查询
                            </el-button>
                        </el-col>
                    </el-row>
                </div>
                <div class="ft" :index="item.msgid+''" v-for="item in messageNote_page.messageNoteList" :key="item.msgid" style="margin-left: 30px;margin-top: 30px">
                    <el-row style="min-height: 200px">
                        <el-row>
                            <el-col :span="7">
                                <span>消息id：</span>
                                <el-tag>{{item.admin.msgid}}</el-tag>
                            </el-col>
                            <el-col :span="8">
                                <span>发送时间：</span>
                                <el-tag>{{item.msg.header.ddtm}}</el-tag>
                            </el-col>

                        </el-row>
                        <el-row>
                            <el-col :span="7">
                                <span>发送人：</span>
                                <el-tag>{{item.msg.header.sndr}}</el-tag>
                            </el-col>
                            <el-col :span="3">
                                <span>消息大类：</span>
                                <el-tag type="success">{{item.msg.header.type}}</el-tag>
                            </el-col>
                            <el-col :span="3">
                                <span>消息子类：</span>
                                <el-tag type="success">{{item.msg.header.stype}}</el-tag>
                            </el-col>
                            <el-col :span="4">
                                <div>
                                    <span>路由接收者：</span>
                                </div>
                                <template  v-for="reciver  in item.admin.rcvrs">
                                    <el-tag  type="danger">{{reciver.user}}</el-tag>
                                </template>
                            </el-col>
                            <el-col :span="4">
                                <div>
                                    <span >消息接收者：</span>
                                </div>
                                <template  v-for="logitem  in item.admin.rcvlog">
                                    <el-tag  type="warning">{{logitem.user}} [{{logitem.rvtm}}]</el-tag>
                                </template>
                            </el-col>
                        </el-row>
                    </el-row>
                    <div class="sun">
                        <el-row>
                            <el-col :span="2">
                                <el-button type="primary" @click="messageNote_toViewContentDialogDialog(item)" size="small">查看内容
                                </el-button>
                            </el-col>
                            <el-col style="width: 45%;margin-left: -10px" :span="14">
                                <el-input v-model="item.msg.body" readonly type="textarea" :rows="3"></el-input>
                            </el-col>
                        </el-row>
                        <el-row>

                        </el-row>
                    </div>


                    <el-divider></el-divider>
                </div>

                <!--分页区域-->
                <div style="margin-top: 10px;margin-left: 20px;">
                    <el-row :gutter="24">
                        <el-col :span="10" style="margin-top: 5px">
                            <el-pagination
                                    @size-change="messageNote_handleSizeChange"
                                    @current-change="messageNote_handleCurrentChange"
                                    :current-page="messageNote_queryInfo.pageNum"
                                    :page-sizes="[10,50,200,500]"
                                    :page-size="messageNote_queryInfo.pageSize"
                                    layout="total, sizes, prev, pager, next, jumper"
                                    :total="messageNote_page.total">
                            </el-pagination>
                        </el-col>
                    </el-row>
                </div>
            </el-card>
            <!-- 查看发送内容，对话框区域 -->
            <div>
                <el-dialog title="查看消息内容"
                           :visible.sync="messageNote_dialog.viewContentDialog"
                           style="margin-top: -80px" text-align="center" width="70%"
                           @close="messageNote_viewContentDialogClosed">
                    <el-form :inline="true" label-width="120px" status-icon style="margin-top: -10px" align="center"
                             :model="messageNote_viewContentForm" ref="messageNote_viewContentFormRef">
                        <el-form-item label="消息内容：" prop="alias_sendContent">
                            <el-input v-model="messageNote_viewContentForm.msg.body" v-if="isViewContent === false"
                                      style="width:1000px" type="textarea" :rows="8">
                            </el-input>
                            <el-input v-model="xml_content" v-if="isViewContent === true"
                                      style="width:1000px" type="textarea" autosize>
                            </el-input>
                        </el-form-item>
                    </el-form>
                    <div slot="footer" class="dialog-footer" style="text-align: center;margin-top: -20px">

                        <el-button type="success" @click="xml_format(messageNote_viewContentForm.msg.body)" size="medium"
                                   style="width: 100px">xml格式化
                        </el-button>

                        <el-button type="info" @click="messageNote_dialog.viewContentDialog = false" size="medium"
                                   style="width: 100px">取消
                        </el-button>
                        <el-button type="primary" @click="messageNote_dialog.viewContentDialog = false" size="medium"
                                   style="width: 100px">关闭
                        </el-button>
                    </div>
                </el-dialog>
            </div>
        </el-main>
    </el-container>
</template>

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

    export default {
        name: "MessageNoteSearch",
        data() {
            return {
                // 抽屉
                drawer: false,
                messageNote_queryInfo: {
                    // 消息内容，别名
                    alias_sendContent: '',
                    // 当前页数
                    pageNum: 1,
                    // 每页条数
                    pageSize: 10
                },
                /**
                 * messageNote，分页
                 */
                messageNote_page: {
                    // 路由键列表
                    messageNoteList: [],
                    // 总条数
                    total: 0,
                },
                /**
                 * messageNote，加载
                 */
                messageNote_loading: {
                    // 列表加载
                    listLoading: false,
                },
                /**
                 * 发送内容,是否格式化
                 */
                isViewContent: false,
                /**
                 * 发送内容,格式化之后
                 */
                xml_content: '',
                /**
                 *  messageNote,对话框管理
                 */
                messageNote_dialog: {
                    // 查看发送内容对话框
                    viewContentDialog: false,
                },
                /**
                 * 发送内容，表单
                 */
                messageNote_viewContentForm: {
                    msg:{
                        body:""
                    },
                    admin:{}
                },
            }
        },
        methods: {
            /**
             * 分页查询，监听 pageSize 改变的事件
             */
            messageNote_handleSizeChange(newSize) {
                this.messageNote_queryInfo.pageSize = newSize;
                //刷新列表
                this.messageNote_getList();
            },
            /**
             * 分页查询，监听 pageNum 改变的事件
             */
            messageNote_handleCurrentChange(newPage) {
                this.messageNote_queryInfo.pageNum = newPage;
                //刷新列表
                this.messageNote_getList();
            },
            searchSubmit:function () {
                this.messageNote_queryInfo.pageNum = 1;
                this.messageNote_queryInfo.pageSize = 10;
                this.messageNote_getList();

            } ,
            /**
             * messageNote,分页查询
             */
            messageNote_getList() {
                let _this = this;
                // 开启加载
                this.messageNote_loading.listLoading = true;
                selectMessageNoteList(this.messageNote_queryInfo).then((response) => {
                    let res = response.data;
                    if (res.code !== '200') {
                        // 关闭加载
                        _this.messageNote_loading.listLoading = false;
                        return _this.$message.error('获取消息收发记录，失败！');
                    }
                    // 获取列表数据
                    _this.messageNote_page.messageNoteList = res.data.content;
                    // 获取列表的总记录数
                    _this.messageNote_page.total = res.data.totalElements;
                    // 关闭加载
                    _this.messageNote_loading.listLoading = false;
                    _this.$message.success('获取消息收发记录，成功！');
                }).catch(error => {
                    // 关闭加载
                    _this.messageNote_loading.listLoading = false;
                    _this.$message.error(error.toString());
                });
            },
            /**
             * 将消息内容，格式化xml
             * @param content
             */
            xml_format(content) {
                this.isViewContent = true;
                this.xml_content = vkbeautify.xml(content);
            },
            /**
             * messageNote，查看发送内容，打开事件
             */
            messageNote_toViewContentDialogDialog(item) {
                this.messageNote_viewContentForm = Object.assign({}, item);
                this.messageNote_dialog.viewContentDialog = true;
            },
            /**
             * messageNote，查看发送内容对话框，关闭事件
             */
            messageNote_viewContentDialogClosed() {
                this.isViewContent = false;
                // 重置对话框
                this.$refs.messageNote_viewContentFormRef.resetFields();
            },
        }
    }

</script>

<style scoped>
    .ft{
        position: relative;
    }
    .sun{
        position: absolute;
        top:100px;
        width: 100%;
    }
</style>