<template>
    <div class="ddkz">
        <transition name="animate__animated animate__bounce" enter-active-class="animate__bounceInLeft"
            leave-active-class="animate__bounceOutLeft" mode="out-in">
            <div class="ddkz-all" v-if="!isInfo">
                <div class="ddkz-selection">
                    <el-form ref="form" :inline="true" :model="form" label-width="80px" class="demo-form-inline">
                        <el-form-item>
                            <el-date-picker v-model="form.date" type="daterange" range-separator="至"
                                start-placeholder="开始日期" end-placeholder="结束日期">
                            </el-date-picker>
                        </el-form-item>
                        <el-form-item>
                            <el-input v-model="form.name" placeholder="请输入关键词" suffix-icon="el-icon-search"></el-input>
                        </el-form-item>
                    </el-form>
                </div>
                <div class="ddkz-content">
                    <div v-for="item in analogData" class="content-card bk-ddkz-animation animate__animated animate__ZoomIn"
                        @click="showInfo(true, item)">
                        <div class="card-title" v-text="item.nickname" :title="item.nickname"></div>
                        <div class="card-date" v-text="item.createTime"></div>
                        <div class="card-text" v-text="item.conRemark" :title="item.conRemark"></div>
                        <div class="card-tags">
                            <div v-show="item.isRed">
                                <div class="isRed circle"></div>
                            </div>
                            <div v-show="item.isBlue">
                                <div class="isBlue circle"></div>
                            </div>
                            <div v-show="item.isYellow">
                                <div class="isYellow circle"></div>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
            <div class="ddkz-info" v-else-if="isInfo">
                <div class="ddkz-info-selection">
                    <el-form ref="form" :inline="true" :model="formInfo" class="demo-form-inline">
                        <el-form-item>
                            <el-select v-model="formInfo.topic" placeholder="请选择">
                                <el-option v-for="item in options" :key="item.value" :label="item.label"
                                    :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item>
                            <el-select v-model="formInfo.step" placeholder="请选择">
                                <el-option v-for="item in options" :key="item.value" :label="item.label"
                                    :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item>
                            <img class="goBack" :src="goBack" alt="" @click="showInfo(false, null)">
                        </el-form-item>
                    </el-form>
                </div>
                <div class="ddkz-info-content">
                    <div class="info-content-left">
                        <div class="everyDayNews" v-for="item in newsList">
                            <div class="everyDayTitle">
                                <div class="circle-light"></div>&emsp;
                                <span v-text="item.time"></span>&emsp;
                                <!-- <span v-text="item.week"></span> -->
                            </div>
                            <div class="everyDayNew">
                                <div class="everyTemplate">
                                    <div v-for="item1 in item.news"
                                        :class="['everyDayNewCard', 'cardType' + item1.teamInfo.teamType]">
                                        <div class="everyDayNewCardTitle" v-text="item1.title"></div>
                                        <div class="everyDayNewCardInfo">
                                            <span v-text="item1.time"></span>&emsp;
                                            <!-- <span v-text="item1.location"></span>&emsp; -->
                                            来源：<span class="newsSource" v-text="item1.from"></span>
                                        </div>
                                        <div class="everyDayNewCardContent" v-text="item1.content"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="info-content-right">
                        <div class="info-personInfo">
                            <div class="title">
                                <img :src="arrow" alt="">
                                <span>人员情况</span>
                            </div>
                            <div class="personInfo-content">
                                <div v-for="item in personList" class="everyPersonList">
                                    <span v-for="item1 in item" @click="selectPerson(item1);">
                                        <span v-text="item1.name"></span>
                                        <span
                                            :style="{ backgroundColor: item1.isLine ? '#30d64d' : '#686a6b' }"></span>&nbsp;
                                    </span>
                                </div>
                            </div>
                        </div>
                        <div class="info-messageInfo">
                            <div class="title">
                                <img :src="arrow" alt="">
                                <span>内部通讯</span>
                            </div>
                            <div class="messageInfo-content">
                                <div class="chatPerson">
                                    <span :style="{ backgroundColor: chatPerson.isLine ? '#30d64d' : '#686a6b' }"
                                        v-show="chatPerson.isLine != undefined"></span>&nbsp;
                                    <span v-text="chatPerson.name"></span>
                                </div>
                                <div id="chatContent" class="chatContent">
                                    <div v-for="item in chatMessageList" class="everyMessage">
                                        <div v-for="item1 in item.list"
                                            :style="{ justifyContent: item.isMe ? 'flex-end' : 'flex-start' }">
                                            <template v-if="!item.isMe">
                                                <img :src="avatar" alt="">
                                                <div v-text="item1" style="background-color:white"></div>
                                            </template>
                                            <template v-else-if="item.isMe">
                                                <div v-text="item1" style="background-color: #85ce61;"></div>
                                                <img :src="avatar" alt="">
                                            </template>
                                        </div>

                                    </div>
                                </div>
                                <div class="chatSendMessage">
                                    <div class="messageContent">
                                        <el-input type="textarea" autosize placeholder="请输入内容" v-model="sendMessage">
                                        </el-input>
                                    </div>
                                    <div class="sendMessageButtonList">
                                        <!-- <el-button size="mini" type="info" @click="sendNotice">发送公告</el-button>
                                        <el-button size="mini" type="info" @click="test">邮箱</el-button> -->
                                        <el-button size="mini" type="success" @click="sendMessageFn">发送</el-button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </transition>
        <NoticeDialog v-if="visible" :visible="visible" @handleCancel="closeDialog" :stompClient="stompClient"
            :currentChatRoomInfo="currentChatRoomInfo" :analogData="analogData" @showInfo="showInfo"></NoticeDialog>
        <ChatRoomDialog v-if="chatRoomVisible" :visible="chatRoomVisible" @handleCancel="closeDialogChatRoom"
            :analogData="analogData" :currentChatRoomInfo="currentChatRoomInfo" :stompClient="stompClient">
        </ChatRoomDialog>
        <ChatRoomPeople v-if="chatRoomPeopleVisible" :visible="chatRoomPeopleVisible"
            @handleCancel="closeDialogChatRoomPeople" :peopleList="peopleList"></ChatRoomPeople>
        <el-tooltip placement="left" class="myButtonList" v-if="isInfo">
            <div class="myTools" slot="content">
                <div>
                    <el-button size="mini" type="info" @click="showPeopleList">人员列表</el-button>
                </div>
                <div>
                    <el-button size="mini" type="info" @click="showChatRoom">聊天室</el-button>
                </div>
                <div>
                    <el-button size="mini" type="info" @click="sendNotice">发送公告</el-button>
                    <el-button size="mini" type="info" @click="sendEmail">邮箱</el-button>
                </div>
            </div>
            <el-button size="mini">公告及邮箱</el-button>
        </el-tooltip>
    </div>
</template>


<script>
import "animate.css";
import goBack from '../../assets/img/xjs/4.png';
import arrow from '../../assets/img/ddkz/8.png';
import avatar from '../../assets/img/ddkz/headPhoto.jpg';
import NoticeDialog from '../../view/ddkz/components/noticeDialog.vue';
import ChatRoomDialog from "./components/chatRoomDialog.vue";
import ChatRoomPeople from "./components/chatRoomPeople.vue";
import { getChatRoomList, getChatRoomInfo } from "../../api/chat/chatRoom";
import { getRecordsByPaging } from '../../api/chat/chatRecords';
import '../../util/stomp.min.js'
export default {
    data() {
        return {
            form: {
                keyWord: '',
                date: ''
            },
            formInfo: {
                topic: '',
                step: ''
            },
            analogData: [
                // {
                //     title: '马克龙:G20宣言不是俄方“外交胜利”',
                //     date: '2023-09-12 08:54:00',
                //     text: '据路透社报道，法国总统马克龙10日称，二十国集团（G20）领导人新德里峰会宣言不是俄罗斯的“外交胜利”。报道称，马克龙表示，为解决国际经济问题而成立的G20不是可以期待实现俄乌冲突外交进展的场合。另据法新社报道，俄罗斯外长拉夫罗夫10日表示，G20领导人新德里峰会是一个“成功”。报道称，拉夫罗夫说：“我们努力阻止西方将峰会议程‘乌克兰化’的企图。”他还表示，峰会宣言“根本没有提到俄罗斯”。',
                //     isRed: true,
                //     isBlue: false,
                //     isYellow: true
                // },
                // {
                //     title: '马克龙:G20宣言不是俄方“外交胜利”',
                //     date: '2023-09-12 08:54:00',
                //     text: '据路透社报道，法国总统马克龙10日称，二十国集团（G20）领导人新德里峰会宣言不是俄罗斯的“外交胜利”。报道称，马克龙表示，为解决国际经济问题而成立的G20不是可以期待实现俄乌冲突外交进展的场合。另据法新社报道，俄罗斯外长拉夫罗夫10日表示，G20领导人新德里峰会是一个“成功”。报道称，拉夫罗夫说：“我们努力阻止西方将峰会议程‘乌克兰化’的企图。”他还表示，峰会宣言“根本没有提到俄罗斯”。',
                //     isRed: true,
                //     isBlue: true,
                //     isYellow: true
                // },
                // {
                //     title: '马克龙:G20宣言不是俄方“外交胜利”',
                //     date: '2023-09-12 08:54:00',
                //     text: '据路透社报道，法国总统马克龙10日称，二十国集团（G20）领导人新德里峰会宣言不是俄罗斯的“外交胜利”。报道称，马克龙表示，为解决国际经济问题而成立的G20不是可以期待实现俄乌冲突外交进展的场合。另据法新社报道，俄罗斯外长拉夫罗夫10日表示，G20领导人新德里峰会是一个“成功”。报道称，拉夫罗夫说：“我们努力阻止西方将峰会议程‘乌克兰化’的企图。”他还表示，峰会宣言“根本没有提到俄罗斯”。',
                //     isRed: true,
                //     isBlue: true,
                //     isYellow: true
                // },
                // {
                //     title: '马克龙:G20宣言不是俄方“外交胜利”',
                //     date: '2023-09-12 08:54:00',
                //     text: '据路透社报道，法国总统马克龙10日称，二十国集团（G20）领导人新德里峰会宣言不是俄罗斯的“外交胜利”。报道称，马克龙表示，为解决国际经济问题而成立的G20不是可以期待实现俄乌冲突外交进展的场合。另据法新社报道，俄罗斯外长拉夫罗夫10日表示，G20领导人新德里峰会是一个“成功”。报道称，拉夫罗夫说：“我们努力阻止西方将峰会议程‘乌克兰化’的企图。”他还表示，峰会宣言“根本没有提到俄罗斯”。',
                //     isRed: false,
                //     isBlue: true,
                //     isYellow: true
                // },
                // {
                //     title: '马克龙:G20宣言不是俄方“外交胜利”',
                //     date: '2023-09-12 08:54:00',
                //     text: '据路透社报道，法国总统马克龙10日称，二十国集团（G20）领导人新德里峰会宣言不是俄罗斯的“外交胜利”。报道称，马克龙表示，为解决国际经济问题而成立的G20不是可以期待实现俄乌冲突外交进展的场合。另据法新社报道，俄罗斯外长拉夫罗夫10日表示，G20领导人新德里峰会是一个“成功”。报道称，拉夫罗夫说：“我们努力阻止西方将峰会议程‘乌克兰化’的企图。”他还表示，峰会宣言“根本没有提到俄罗斯”。',
                //     isRed: true,
                //     isBlue: false,
                //     isYellow: true
                // },
                // {
                //     title: '马克龙:G20宣言不是俄方“外交胜利”',
                //     date: '2023-09-12 08:54:00',
                //     text: '据路透社报道，法国总统马克龙10日称，二十国集团（G20）领导人新德里峰会宣言不是俄罗斯的“外交胜利”。报道称，马克龙表示，为解决国际经济问题而成立的G20不是可以期待实现俄乌冲突外交进展的场合。另据法新社报道，俄罗斯外长拉夫罗夫10日表示，G20领导人新德里峰会是一个“成功”。报道称，拉夫罗夫说：“我们努力阻止西方将峰会议程‘乌克兰化’的企图。”他还表示，峰会宣言“根本没有提到俄罗斯”。',
                //     isRed: false,
                //     isBlue: false,
                //     isYellow: true
                // },
                // {
                //     title: '马克龙:G20宣言不是俄方“外交胜利”',
                //     date: '2023-09-12 08:54:00',
                //     text: '据路透社报道，法国总统马克龙10日称，二十国集团（G20）领导人新德里峰会宣言不是俄罗斯的“外交胜利”。报道称，马克龙表示，为解决国际经济问题而成立的G20不是可以期待实现俄乌冲突外交进展的场合。另据法新社报道，俄罗斯外长拉夫罗夫10日表示，G20领导人新德里峰会是一个“成功”。报道称，拉夫罗夫说：“我们努力阻止西方将峰会议程‘乌克兰化’的企图。”他还表示，峰会宣言“根本没有提到俄罗斯”。',
                //     isRed: true,
                //     isBlue: true,
                //     isYellow: true
                // },
                // {
                //     title: '马克龙:G20宣言不是俄方“外交胜利”',
                //     date: '2023-09-12 08:54:00',
                //     text: '据路透社报道，法国总统马克龙10日称，二十国集团（G20）领导人新德里峰会宣言不是俄罗斯的“外交胜利”。报道称，马克龙表示，为解决国际经济问题而成立的G20不是可以期待实现俄乌冲突外交进展的场合。另据法新社报道，俄罗斯外长拉夫罗夫10日表示，G20领导人新德里峰会是一个“成功”。报道称，拉夫罗夫说：“我们努力阻止西方将峰会议程‘乌克兰化’的企图。”他还表示，峰会宣言“根本没有提到俄罗斯”。',
                //     isRed: false,
                //     isBlue: true,
                //     isYellow: true
                // },
                // {
                //     title: '马克龙:G20宣言不是俄方“外交胜利”',
                //     date: '2023-09-12 08:54:00',
                //     text: '据路透社报道，法国总统马克龙10日称，二十国集团（G20）领导人新德里峰会宣言不是俄罗斯的“外交胜利”。报道称，马克龙表示，为解决国际经济问题而成立的G20不是可以期待实现俄乌冲突外交进展的场合。另据法新社报道，俄罗斯外长拉夫罗夫10日表示，G20领导人新德里峰会是一个“成功”。报道称，拉夫罗夫说：“我们努力阻止西方将峰会议程‘乌克兰化’的企图。”他还表示，峰会宣言“根本没有提到俄罗斯”。',
                //     isRed: false,
                //     isBlue: false,
                //     isYellow: true
                // },
                // {
                //     title: '马克龙:G20宣言不是俄方“外交胜利”',
                //     date: '2023-09-12 08:54:00',
                //     text: '据路透社报道，法国总统马克龙10日称，二十国集团（G20）领导人新德里峰会宣言不是俄罗斯的“外交胜利”。报道称，马克龙表示，为解决国际经济问题而成立的G20不是可以期待实现俄乌冲突外交进展的场合。另据法新社报道，俄罗斯外长拉夫罗夫10日表示，G20领导人新德里峰会是一个“成功”。报道称，拉夫罗夫说：“我们努力阻止西方将峰会议程‘乌克兰化’的企图。”他还表示，峰会宣言“根本没有提到俄罗斯”。',
                //     isRed: false,
                //     isBlue: false,
                //     isYellow: true
                // },
                // {
                //     title: '马克龙:G20宣言不是俄方“外交胜利”',
                //     date: '2023-09-12 08:54:00',
                //     text: '据路透社报道，法国总统马克龙10日称，二十国集团（G20）领导人新德里峰会宣言不是俄罗斯的“外交胜利”。报道称，马克龙表示，为解决国际经济问题而成立的G20不是可以期待实现俄乌冲突外交进展的场合。另据法新社报道，俄罗斯外长拉夫罗夫10日表示，G20领导人新德里峰会是一个“成功”。报道称，拉夫罗夫说：“我们努力阻止西方将峰会议程‘乌克兰化’的企图。”他还表示，峰会宣言“根本没有提到俄罗斯”。',
                //     isRed: false,
                //     isBlue: false,
                //     isYellow: true
                // },
                // {
                //     title: '马克龙:G20宣言不是俄方“外交胜利”',
                //     date: '2023-09-12 08:54:00',
                //     text: '据路透社报道，法国总统马克龙10日称，二十国集团（G20）领导人新德里峰会宣言不是俄罗斯的“外交胜利”。报道称，马克龙表示，为解决国际经济问题而成立的G20不是可以期待实现俄乌冲突外交进展的场合。另据法新社报道，俄罗斯外长拉夫罗夫10日表示，G20领导人新德里峰会是一个“成功”。报道称，拉夫罗夫说：“我们努力阻止西方将峰会议程‘乌克兰化’的企图。”他还表示，峰会宣言“根本没有提到俄罗斯”。',
                //     isRed: false,
                //     isBlue: false,
                //     isYellow: true
                // },
                // {
                //     title: '马克龙:G20宣言不是俄方“外交胜利”',
                //     date: '2023-09-12 08:54:00',
                //     text: '据路透社报道，法国总统马克龙10日称，二十国集团（G20）领导人新德里峰会宣言不是俄罗斯的“外交胜利”。报道称，马克龙表示，为解决国际经济问题而成立的G20不是可以期待实现俄乌冲突外交进展的场合。另据法新社报道，俄罗斯外长拉夫罗夫10日表示，G20领导人新德里峰会是一个“成功”。报道称，拉夫罗夫说：“我们努力阻止西方将峰会议程‘乌克兰化’的企图。”他还表示，峰会宣言“根本没有提到俄罗斯”。',
                //     isRed: false,
                //     isBlue: false,
                //     isYellow: true
                // },
                // {
                //     title: '马克龙:G20宣言不是俄方“外交胜利”',
                //     date: '2023-09-12 08:54:00',
                //     text: '据路透社报道，法国总统马克龙10日称，二十国集团（G20）领导人新德里峰会宣言不是俄罗斯的“外交胜利”。报道称，马克龙表示，为解决国际经济问题而成立的G20不是可以期待实现俄乌冲突外交进展的场合。另据法新社报道，俄罗斯外长拉夫罗夫10日表示，G20领导人新德里峰会是一个“成功”。报道称，拉夫罗夫说：“我们努力阻止西方将峰会议程‘乌克兰化’的企图。”他还表示，峰会宣言“根本没有提到俄罗斯”。',
                //     isRed: false,
                //     isBlue: false,
                //     isYellow: true
                // },
                // {
                //     title: '马克龙:G20宣言不是俄方“外交胜利”',
                //     date: '2023-09-12 08:54:00',
                //     text: '据路透社报道，法国总统马克龙10日称，二十国集团（G20）领导人新德里峰会宣言不是俄罗斯的“外交胜利”。报道称，马克龙表示，为解决国际经济问题而成立的G20不是可以期待实现俄乌冲突外交进展的场合。另据法新社报道，俄罗斯外长拉夫罗夫10日表示，G20领导人新德里峰会是一个“成功”。报道称，拉夫罗夫说：“我们努力阻止西方将峰会议程‘乌克兰化’的企图。”他还表示，峰会宣言“根本没有提到俄罗斯”。',
                //     isRed: false,
                //     isBlue: false,
                //     isYellow: true
                // },
                // {
                //     title: '马克龙:G20宣言不是俄方“外交胜利”',
                //     date: '2023-09-12 08:54:00',
                //     text: '据路透社报道，法国总统马克龙10日称，二十国集团（G20）领导人新德里峰会宣言不是俄罗斯的“外交胜利”。报道称，马克龙表示，为解决国际经济问题而成立的G20不是可以期待实现俄乌冲突外交进展的场合。另据法新社报道，俄罗斯外长拉夫罗夫10日表示，G20领导人新德里峰会是一个“成功”。报道称，拉夫罗夫说：“我们努力阻止西方将峰会议程‘乌克兰化’的企图。”他还表示，峰会宣言“根本没有提到俄罗斯”。',
                //     isRed: false,
                //     isBlue: false,
                //     isYellow: true
                // },
            ],
            isInfo: false,
            options: [{
                value: '2023081501',
                label: '2023年08月15日******课题'
            }, {
                value: '2023081502',
                label: '2023年08月15日******课题'
            }, {
                value: '2023081503',
                label: '2023年08月15日******课题'
            }, {
                value: '2023081504',
                label: '2023年08月15日******课题'
            }, {
                value: '2023081505',
                label: '2023年08月15日******课题'
            }],
            goBack: goBack,
            newsList: [],
            arrow: arrow,
            personList: [[
                {
                    name: '部长 李叔',
                    isLine: true
                },
                {
                    name: '副部长 李文',
                    isLine: false
                },
                {
                    name: '助理 李叔文',
                    isLine: true
                }
            ], [
                {
                    name: '部长 李叔',
                    isLine: false
                },
                {
                    name: '副部长 李文',
                    isLine: true
                },
                {
                    name: '助理 李叔文',
                    isLine: true
                }
            ], [
                {
                    name: '部长 李叔',
                    isLine: true
                },
                {
                    name: '副部长 李文',
                    isLine: false
                },
                {
                    name: '助理 李叔文',
                    isLine: false
                }
            ]],
            chatPerson: {
                name: '',
                isLine: undefined
            },
            chatMessageList: [
                { id: 1, name: 'xxx', isMe: false, list: ['会议主题是xxx', '主要强调两个方面'] },
                { id: 2, name: 'summer', isMe: true, list: ['确定主题', '同意'] },
                { id: 1, name: 'xxx', isMe: false, list: ['会议主题是xxx', '主要强调两个方面'] },
                { id: 2, name: 'summer', isMe: true, list: ['确定主题', '同意'] },
                { id: 1, name: 'xxx', isMe: false, list: ['会议主题是xxx', '主要强调两个方面'] },
                { id: 2, name: 'summer', isMe: true, list: ['确定主题', '同意'] }
            ],
            avatar: avatar,
            sendMessage: '',
            visible: false,
            chatRoomVisible: false,
            chatRoomPeopleVisible: false,
            peopleList: [],
            // chatMessageList: [],
            currentChatRoomInfo: {},
            stompClient: '',
            ws: null
        }
    },
    components: {
        NoticeDialog: NoticeDialog,
        ChatRoomDialog: ChatRoomDialog,
        ChatRoomPeople: ChatRoomPeople
    },
    methods: {
        onSearch() {

        },
        showInfo(value, item) {
            this.currentChatRoomInfo = item;
            this.isInfo = value;
            if (value) {
                //查询聊天组的人员
                getChatRoomInfo(item.id, this.userInfo.account).then(res => {
                    this.peopleList = res.chatRoomMemberRelationBOList;
                });
                //分页查询群聊天记录
                getRecordsByPaging(item.id, 1, 100, '2020-01-01 00:00:00', '2023-10-01 00:00:00').then(res1 => {
                    let newsArr = [];
                    res1.records.forEach(item => {
                        let obj = { time: '', news: [] };
                        if (newsArr.some(newsArrChild => { return newsArrChild.time == item.createTime.slice(0, 10) })) {
                            newsArr.forEach(item1 => {
                                if (item1.time == item.createTime.slice(0, 10)) {
                                    item1.news.push({ time: item.createTime, title: item.title, content: item.content, from: item.fromUserId, teamInfo: item.teamInfo });
                                }
                            })
                        } else {
                            obj.time = item.createTime.slice(0, 10);
                            obj.news.push({ time: item.createTime, title: item.title, content: item.content, from: item.fromUserId, teamInfo: item.teamInfo });
                            newsArr.push(obj);
                        }
                    });
                    this.newsList = newsArr;
                });

            }
        },
        selectPerson(item) {
            this.chatPerson = item;
        },
        sendMessageFn() {
            if (this.sendMessage.trim().length > 0) {
                this.chatMessageList.push({ id: 1, name: 'xxx', isMe: true, list: [this.sendMessage] });
                setTimeout(() => {
                    this.keepBottom();
                    this.sendMessage = '';
                }, 100);
            } else {
                this.$message.warning('不能发送空白信息');
            }
        },
        keepBottom() {
            const divscll = document.getElementById('chatContent');
            divscll.scrollTop = divscll.scrollHeight;
        },
        closeDialog() {
            this.visible = false;
        },
        sendNotice() {
            this.visible = true;
        },
        closeDialogChatRoom() {
            this.chatRoomVisible = false;
        },
        showChatRoom() {
            this.chatRoomVisible = true;
        },
        closeDialogChatRoomPeople() {
            this.chatRoomPeopleVisible = false;
        },
        showPeopleList() {
            this.chatRoomPeopleVisible = true;
        },
        queryChatRoomListFn() {
            getChatRoomList(this.userInfo.account).then(res => {
                this.analogData = res;
            });
        },
        sendEmail() {
            alert('敬请期待');
        },
        connect() {
            return new Promise((resolve, reject) => {
                this.ws = new WebSocket(`ws://192.168.168.106:8081/websocket/my-websocket`);
                this.stompClient && this.stompClient.connected && this.stompClient.disconnect();
                this.stompClient = Stomp.over(this.ws);
                this.stompClient.heartbeat.outgoing = 20000; //若使用STOMP 1.1 版本，默认开启了心跳检测机制（默认值都是10000ms）
                this.stompClient.heartbeat.incoming = 0; //客户端不从服务端接收心跳包

                this.stompClient.connect({ name: this.userInfo.account }, frame => {
                    resolve("连接成功")
                }, err => {
                    console.log(typeof err == "string" ? err : err.headers.message)
                    reject(typeof err == "string" ? err : err.headers.message)
                });

            })
        }
    },
    computed: {
        userInfo() {
            if (this.$store.getters.userInfo) {
                return this.$store.getters.userInfo;
            } else {
                return { account: "" };
            }
        }
    },
    mounted() {
        this.queryChatRoomListFn();
        this.connect();
    }
}
</script>

<style lang="scss">
.ddkz {
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    overflow-y: hidden;

    .ddkz-all {
        width: 100%;
        height: 100%;

        .ddkz-selection {
            // display: none;
            width: 100%;
            height: 40px;
            text-align: right;

            .el-input {
                float: left;
                width: 200px;
                margin-right: 30px;

                .el-input__inner {
                    background: none;
                    color: #ffff;
                    border: 1px solid #3a5f94c9 !important;
                }
            }

            .el-date-editor {
                background: none;

                span {
                    color: white;
                }

                .el-range-input {
                    color: white;
                    background: none;
                }
            }

            .el-input__inner {
                border: 1px solid #3a5f94c9 !important;
            }
        }

        .ddkz-content {
            width: 100%;
            height: calc(93% - 60px);
            overflow-y: auto;

            .content-card {
                width: calc(20% - 30px);
                height: 185px;
                padding: 0px 20px;
                box-sizing: border-box;
                float: left;
                margin-top: 30px;
                margin-left: 15px;
                margin-right: 15px;
                background-image: url(../../assets/img/ddkz/new5.png);
                background-size: 100% 100%;

                &:hover {
                    cursor: pointer;
                    background-image: url(../../assets/img/ddkz/new4.png);
                    background-size: 100% 100%;
                }

                .card-title {
                    width: 90%;
                    height: 55px;
                    line-height: 70px;
                    font-weight: 600;
                    word-break: break-all; //在恰当的断字点进行换行 
                    overflow: hidden; //文字超出的进行隐藏
                    text-overflow: ellipsis; //超出的文字用省略号表示
                    display: -webkit-box; //将元素设为盒子伸缩模型显示
                    text-overflow: ellipsis; //利用盒子模型 
                    -webkit-box-orient: vertical; //伸缩方向设为垂直方向
                    -webkit-line-clamp: 1; //设定一共3行，超出的部分隐藏，并用省略号来表示
                }

                .card-date {
                    width: 100%;
                    height: 30px;
                    line-height: 30px;
                    font-size: 12px;
                    color: #838081;
                    border-top: 1px solid #838081;
                }

                .card-text {
                    width: 100%;
                    font-size: 13px;
                    color: #ddd;
                    word-break: break-all; //在恰当的断字点进行换行 
                    overflow: hidden; //文字超出的进行隐藏
                    text-overflow: ellipsis; //超出的文字用省略号表示
                    display: -webkit-box; //将元素设为盒子伸缩模型显示
                    text-overflow: ellipsis; //利用盒子模型 
                    -webkit-box-orient: vertical; //伸缩方向设为垂直方向
                    -webkit-line-clamp: 3; //设定一共3行，超出的部分隐藏，并用省略号来表示
                }

                .card-tags {
                    width: 100%;
                    height: 50px;
                    display: flex;
                    justify-content: center;
                    align-items: center;

                    &>div {
                        width: 22px;
                        height: 22px;
                        border-radius: 50%;
                        padding: 4px;
                        margin: 0px 5px;
                        box-sizing: border-box;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        animation: scaleDraw1 ease-in-out infinite 1s alternate;
                        opacity: 1;

                        .circle {
                            width: 16px;
                            height: 16px;
                            border-radius: 50%;
                        }

                        .isRed {
                            background-color: #9a3c3c;
                        }

                        .isBlue {
                            background-color: #61a9ed;
                        }

                        .isYellow {
                            background-color: #f4c659;
                        }
                    }

                    @keyframes scaleDraw1 {
                        from {
                            transform: scale(1.2);
                            opacity: 1;
                        }

                        to {
                            transform: scale(1);
                            opacity: 0.5;
                        }
                    }

                    &>div:first-child {
                        background-color: #9a3c3c87;
                    }

                    &>div:nth-child(2) {
                        background-color: #61a9ed7d;
                    }

                    &>div:last-child {
                        background-color: #f4c65978;
                    }


                }
            }
        }
    }

    .ddkz-info {
        width: 100%;
        height: 100%;

        .ddkz-info-selection {
            // display: none;
            width: 100%;
            height: 40px;
            text-align: right;

            .el-input {
                float: left;
                width: 200px;
                margin-right: 30px;

                .el-input__inner {
                    background: none;
                    color: #ffff;
                    border: 1px solid #3a5f94c9 !important;
                }
            }

            .goBack {
                width: 40px;
                height: 40px;
                margin-right: 35px;
                cursor: pointer;
            }
        }

        .ddkz-info-content {
            width: 100%;
            height: calc(93% - 60px);
            margin-top: 20px;

            .info-content-left {
                width: calc(100% - 20px);
                height: 100%;
                float: left;
                padding-left: 35px;
                box-sizing: border-box;
                background-image: url(../../assets/img/ddkz/bg3.png);
                background-size: cover;
                overflow-y: auto;

                .everyDayNews {
                    width: 100%;
                    height: 230px;
                    margin-bottom: 50px;
                    padding: 6px 0px;
                    box-sizing: border-box;


                    .everyDayTitle {
                        width: 100%;
                        height: 30px;
                        color: white;
                        font-size: 20px;
                        font-weight: 600;
                        cursor: pointer;

                        .circle-light {
                            width: 15px;
                            height: 15px;
                            float: left;
                            margin-top: 7.5px;
                            border-radius: 50%;
                            background: white;
                            box-shadow: 0px 0px 20px 6px white;
                        }
                    }

                    .everyDayNew {
                        width: 100%;
                        height: 220px;
                        padding: 0px 10px;
                        box-sizing: border-box;
                        overflow-x: auto;
                        overflow-y: hidden;

                        .everyTemplate {
                            width: 100%;
                            height: 100%;
                            padding-bottom: 10px;
                            box-sizing: border-box;
                            overflow-x: scroll;
                            overflow-y: hidden;
                            display: -webkit-box;
                        }

                        .everyDayNewCard {
                            width: calc(33% - 28px);
                            height: calc(100% - 20px);
                            float: left;
                            margin-top: 20px;
                            margin-left: 25px;
                            padding: 15px 30px;
                            box-sizing: border-box;
                            background-image: url(../../assets/img/ddkz/new3.png);
                            background-size: 100% 100%;

                            .everyDayNewCardTitle {
                                width: 100%;
                                height: 30px;
                                font-size: 18px;
                                font-weight: 600;
                                border-bottom: 1px solid #7b7b7bdd;
                            }

                            .everyDayNewCardInfo {
                                width: 100%;
                                height: 20px;
                                margin-top: 10px;
                                font-size: 12px;
                                font-weight: 600;
                                color: white;

                                .newsSource {
                                    color: red;
                                }
                            }

                            .everyDayNewCardContent {
                                width: 100%;
                                // height: calc(100% - 58px);
                                margin-top: 5px;
                                font-size: 12px;
                                font-weight: 600;
                                color: white;
                                display: -webkit-box;
                                -webkit-box-orient: vertical;
                                -webkit-line-clamp: 5;
                                /* 控制显示的行数 */
                                overflow: hidden;
                            }
                        }

                        .cardTypeDIRECTOR {
                            background-image: url(../../assets/img/ddkz/new3.png);
                            background-size: 100% 100%;
                        }

                        .cardTypeBLUE {
                            background-image: url(../../assets/img/ddkz/new1.png);
                            background-size: 100% 100%;
                        }

                        .cardTypeRED {
                            background-image: url(../../assets/img/ddkz/new2.png);
                            background-size: 100% 100%;
                        }
                    }
                }

            }

            .info-content-right {
                width: 400px;
                height: 100%;
                float: left;
                margin-left: 20px;
                border: 1px solid #445771;
                border-left: 4px solid #445771;
                padding: 10px 20px;
                box-sizing: border-box;
                display: none;

                .info-personInfo {
                    width: 100%;
                    height: 30%;

                    .title {
                        width: 100%;
                        height: 30px;
                        line-height: 30px;

                        img {
                            width: 20px;
                            height: 20px;
                        }

                        span {
                            font-size: 16px;
                            font-weight: 500;
                            color: white;
                            vertical-align: text-bottom;
                        }
                    }

                    .personInfo-content {
                        width: 100%;
                        height: calc(100% - 30px);

                        .everyPersonList {
                            width: 100%;
                            height: 35px;
                            line-height: 35px;
                            margin-top: 10px;
                            padding: 0px 10px;
                            font-size: 13px;
                            color: #f1f1f7;
                            box-sizing: border-box;

                            &:nth-child(3n) {
                                background-image: url(../../assets/img/ddkz/12.png);
                                background-size: 100% 100%;
                            }

                            &:nth-child(3n+1) {
                                background-image: url(../../assets/img/ddkz/13.png);
                                background-size: 100% 100%;
                            }

                            &:nth-child(3n+2) {
                                background-image: url(../../assets/img/ddkz/14.png);
                                background-size: 100% 100%;
                            }

                            &>span {
                                float: left;
                                margin-left: 10px;

                                &:hover {
                                    color: green;
                                    cursor: pointer;
                                }

                                &>span:first-child {
                                    float: left;
                                }

                                &>span:last-child {
                                    width: 10px;
                                    height: 10px;
                                    border-radius: 50%;
                                    display: block;
                                    float: left;
                                    margin-top: 12.5px;
                                    margin-left: 5px;
                                }

                            }
                        }


                    }
                }

                .info-messageInfo {
                    width: 100%;
                    height: 70%;

                    .title {
                        width: 100%;
                        height: 30px;
                        line-height: 30px;

                        img {
                            width: 20px;
                            height: 20px;
                        }

                        span {
                            font-size: 16px;
                            font-weight: 500;
                            color: white;
                            vertical-align: text-bottom;
                        }
                    }

                    .messageInfo-content {
                        width: 100%;
                        height: calc(100% - 40px);
                        margin-top: 10px;
                        padding: 0px 10px;
                        border: 1px solid #254751;
                        box-sizing: border-box;

                        .chatPerson {
                            width: 100%;
                            height: 40px;
                            line-height: 40px;
                            display: flex;
                            justify-content: center;
                            font-size: 13px;
                            border-bottom: 1px solid #37383f;

                            &>span:first-child {
                                width: 10px;
                                height: 10px;
                                border-radius: 50%;
                                display: block;
                                float: left;
                                margin-top: 15px;
                                margin-left: 5px;
                            }

                            &>span:last-child {
                                float: left;
                                margin-left: 10px;
                            }

                        }

                        .chatContent {
                            width: 100%;
                            height: 60%;
                            border-bottom: 1px solid #37383f;
                            padding: 10px 0px;
                            box-sizing: border-box;
                            overflow-y: auto;

                            .everyMessage {
                                width: 100%;
                                margin-top: 10px;

                                &>div {
                                    width: 100%;
                                    display: flex;
                                    align-items: center;
                                    margin-top: 10px;
                                    font-size: 13px;

                                    img {
                                        width: 20px;
                                        height: 20px;
                                        margin: 0px 10px;
                                    }

                                    &>div {
                                        padding: 5px 10px;
                                        border-radius: 5px;
                                        color: black;
                                    }
                                }
                            }
                        }

                        .chatSendMessage {
                            width: 100%;
                            height: calc(40% - 42px);
                            position: relative;

                            .messageContent {
                                width: 100%;
                                height: 100%;
                                padding: 5px;
                                box-sizing: border-box;

                                .el-textarea__inner {
                                    height: 100% !important;
                                    color: white !important;
                                    background-color: transparent !important;
                                    border: 1px solid #37383f !important;
                                }
                            }

                            .sendMessageButtonList {
                                position: absolute;
                                right: 10px;
                                bottom: 10px;
                            }
                        }
                    }
                }
            }
        }
    }

    .myButtonList {
        position: absolute;
        right: -10px;
        bottom: 30px;

        // &:hover {
        //     right: 10px;
        // }
    }



}

.myTools {
    text-align: center;

    &>div {
        margin-bottom: 10px !important;
    }
}
</style>