<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 value-format="yyyy-MM-dd HH:mm:ss" v-model="form.dateRange" type="daterange"
                                range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
                                :default-time="['00:00:00', '23:59:59']">
                            </el-date-picker>
                        </el-form-item>
                        <el-form-item>
                            <el-input v-model="form.keyWord" placeholder="请输入关键词" suffix-icon="el-icon-search"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <div class="searchButton" @click="searchChatList">搜索</div>
                        </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.day" placeholder="请选择日期" clearable>
                                <el-option v-for="item in options" :key="item" :label="item" :value="item">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item>
                            <el-select v-model="formInfo.fromUser" placeholder="请选择公告来源" clearable>
                                <el-option v-for="item in optionsFrom" :key="item" :label="item" :value="item">
                                </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;
                            </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="everyDayNewCardContent">
                                            <div class="left-everyDayNew"
                                                :style="{ width: item1.attachment ? '50%' : '100%' }">
                                                <div class="everyDayNewCardInfo">
                                                    <span v-text="item1.time"></span>&emsp;
                                                    来源：<span class="newsSource" v-text="item1.from"></span>
                                                </div>
                                                <div class="everyDayNewCardText" v-text="item1.content"></div>
                                            </div>
                                            <div class="right-everyDayNew" v-if="item1.attachment">
                                                <template v-if="item1.type == 'PICTURE'">
                                                    <el-image :src="item1.url" :preview-src-list="[item1.url]">
                                                    </el-image>
                                                </template>
                                                <template v-else-if="item1.type == 'VIDEO'">
                                                    <video :src="item1.url" controls loop>
                                                    </video>
                                                </template>
                                                <template v-else-if="item1.type == 'EXCEL'">
                                                    <el-image :src="excelImg" @click="showLiterature(item1.attachment)">
                                                    </el-image>
                                                </template>
                                                <template v-else-if="item1.type == 'TEXT'">
                                                    <el-image :src="textImg" @click="showLiterature(item1.attachment)">
                                                    </el-image>
                                                </template>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </transition>
        <NoticeDialog  ref="myNotice"  :stompClient="stompClient"
            :currentChatRoomInfo="currentChatRoomInfo" :analogData="analogData" @showInfo="showInfo"></NoticeDialog>
        <ChatRoomDialog  ref="myChatRoom" :analogData="analogData" :currentChatRoomInfo="currentChatRoomInfo" :stompClient="stompClient">
        </ChatRoomDialog>
        <ChatRoomPeople ref="myChatRoomPeople" :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 "@/view/ddkz/components/chatRoomPeople.vue";
import { getChatRoomList, getChatRoomInfo } from "../../api/chat/chatRoom";
import { getRecordsByPaging, getFileUrl } from '../../api/chat/chatRecords';
import textImg from '@/assets/img/ddkz/tool1.png';
import excelImg from '@/assets/img/ddkz/tool5.png';
import '../../util/stomp.min.js'
import { getTime_extent, download } from '@/util/http_util.js';

export default {
    data() {
        return {
            form: {
                keyWord: null,
                dateRange: []
            },
            formInfo: {
                day: null,
                fromUser: null
            },
            analogData: [],
            isInfo: false,
            options: [],
            optionsFrom: [],
            goBack: goBack,
            newsList: [],
            arrow: arrow,
            personList: [],
            publicNoticeList: [],
            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,
            excelImg: excelImg,
            textImg: textImg
        }
    },
    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;
                });
                this.getRecordsByPagingFn(item);
            }
        },
        //分页查询群聊天记录
        getRecordsByPagingFn(item) {
            getRecordsByPaging(item.id, 1, 100, this.form.dateRange.length > 0 ? this.form.dateRange[0] : '2020-01-01 00:00:00', this.form.dateRange.length > 0 ? this.form.dateRange[1] : getTime_extent(0).pre_rq_end).then(res1 => {
                this.publicNoticeList = res1.records;
                this.dataOrderByParams(null, null);
                let newsArr = [], dayArr = [];
                this.optionsFrom = [];
                this.publicNoticeList.forEach(item => {
                    let obj = { time: '', news: [] };
                    if (this.optionsFrom.indexOf(item.fromUserId) == -1) {
                        this.optionsFrom.push(item.fromUserId);
                    }
                    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);
                        dayArr.push(item.createTime.slice(0, 10));
                        this.options = dayArr;
                        obj.news.push({ time: item.createTime, title: item.title, content: item.content, from: item.fromUserId, teamInfo: item.teamInfo });
                        newsArr.push(obj);
                    }
                });
            });
        },
        dataOrderByParams(day, user) {
            let newsArr = [];
            let tmpArr = this.publicNoticeList;
            if (day == null && user != null) {
                tmpArr = this.publicNoticeList.filter(item => { return item.fromUserId == user });
            } else if (day != null && user == null) {
                tmpArr = this.publicNoticeList.filter(item => { return item.createTime.slice(0, 10) == day });
            } else if (day != null && user != null) {
                tmpArr = this.publicNoticeList.filter(item => { return item.fromUserId == user && item.createTime.slice(0, 10) == day });
            }
            tmpArr.forEach(item => {
                let obj = { time: '', news: [] };
                let fileUrl = null;
                fileUrl = item.attachment ? 'api/rest/file/viewPicture/CHAT?objectName=' + item.attachment : null;
                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, url: fileUrl, type: item.messageForm, attachment: item.attachment });
                        }
                    })
                } 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, url: fileUrl, type: item.messageForm, attachment: item.attachment });
                    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;
            this.$nextTick(() => {
                this.$refs.myNotice.showDialog();
            })
            // if (this.$refs.myNotice) {
            //     this.$refs.myNotice.showDialog();
            // }
        },
        // closeDialogChatRoom() {
        //     this.chatRoomVisible = false;
        // },
        showChatRoom() {
            // this.chatRoomVisible = true;
            this.$nextTick(() => {
                this.$refs.myChatRoom.showDialog();
            })
            // if (this.$refs.myChatRoom) {
            //     this.$refs.myChatRoom.showDialog();
            // }
        },
        // closeDialogChatRoomPeople() {
        //     this.chatRoomPeopleVisible = false;
        // },
        showPeopleList() {
            this.$nextTick(() => {
                this.$refs.myChatRoomPeople.showDialog();
            })
        },
        queryChatRoomListFn(params) {
            getChatRoomList(params).then(res => {
                this.analogData = res;
            });
        },
        sendEmail() {
            alert('敬请期待');
        },
        connect() {
            return new Promise((resolve, reject) => {
                this.ws = new WebSocket(`ws://${window.location.host}/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)
                });

            })
        },
        searchChatList() {
            this.queryChatRoomListFn({ startTime: this.form.dateRange.length > 0 ? this.form.dateRange[0] : null, endTime: this.form.dateRange.length > 0 ? this.form.dateRange[1] : null, userId: this.userInfo.account, keyword: this.form.keyWord == '' ? null : this.form.keyWord });
        },
        showLiterature(url) {
            window.open("api/rest/file/download/CHAT/" + url);
        }
    },
    computed: {
        userInfo() {
            if (this.$store.getters.userInfo) {
                return this.$store.getters.userInfo;
            } else {
                return { account: "" };
            }
        }
    },
    watch: {
        'formInfo.day'(newVal, oldVal) {
            if (newVal == '') {
                this.formInfo.day = null;
                this.dataOrderByParams(null, this.formInfo.fromUser);
            } else {
                this.dataOrderByParams(newVal, this.formInfo.fromUser);
            }
        },
        'formInfo.fromUser'(newVal, oldVal) {
            if (newVal == '') {
                this.formInfo.fromUser = null;
                this.dataOrderByParams(this.formInfo.day, null);
            } else {
                this.dataOrderByParams(this.formInfo.day, newVal);
            }
        }
    },
    mounted() {
        this.queryChatRoomListFn({ userId: this.userInfo.account });
        this.connect();
    },
    destroyed() {
        this.ws.onclose();
    }
}
</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: 20px;

                .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;
            }

            .searchButton {
                width: 80px;
                height: 30px;
                line-height: 30px;
                margin-top: 4px;
                margin-right: 30px;
                font-size: 14px;
                text-align: center;
                // background-image: url(../../../assets/img/fzjc/7.png);
                background-size: 100% 100%;
                background-repeat: no-repeat;
                border: 1px solid #3a5f94c9 !important;
                border-radius: 5px;
                cursor: pointer;

                &:hover {
                    background-color: #171a1cf7;
                }
            }
        }

        .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: 98%;
                            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;
                            }

                            .everyDayNewCardContent {
                                width: 100%;
                                height: 110px;
                                margin-top: 10px;
                                display: flex;

                                .left-everyDayNew {
                                    width: 50%;
                                    height: 100%;

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

                                        .newsSource {
                                            color: red;
                                        }
                                    }

                                    .everyDayNewCardText {
                                        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;
                                        word-break: break-all
                                    }
                                }

                                .right-everyDayNew {
                                    width: 50%;
                                    height: 100%;
                                    text-align: center;

                                    img {
                                        width: 100%;
                                        height: 100%;
                                    }

                                    video {
                                        width: 100%;
                                        height: 100%;
                                    }
                                }
                            }




                        }

                        .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%;
                        }
                    }
                }

            }
        }
    }

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

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



}

.myTools {
    text-align: center;

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