<template>
    <div class="ddkz-info">
        <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="goBackFn">
                </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>
        <el-tooltip placement="left" class="myButtonList">
            <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>

        <NoticeDialog ref="myNotice" :stompClient="stompClient" :currentChatRoomInfo="currentChatRoomInfo"></NoticeDialog>
        <ChatRoomDialog ref="myChatRoom" :currentChatRoomInfo="currentChatRoomInfo" :stompClient="stompClient">
        </ChatRoomDialog>
        <ChatRoomPeople ref="myChatRoomPeople" :peopleList="peopleList"></ChatRoomPeople>
    </div>
</template>

<script>
import goBack from '@/assets/img/xjs/4.png';
import { getRecordsByPaging } from '@/api/chat/chatRecords';
import { getChatRoomInfo } from "@/api/chat/chatRoom";
import { getTime_extent } from '@/util/http_util.js';
import NoticeDialog from '@/view/ddkz/components/noticeDialog.vue';
import ChatRoomDialog from "@/view/ddkz/components/chatRoomDialog.vue";
import ChatRoomPeople from "@/view/ddkz/components/chatRoomPeople.vue";
import textImg from '@/assets/img/ddkz/tool1.png';
import excelImg from '@/assets/img/ddkz/tool5.png';
export default {
    data() {
        return {
            goBack: goBack,
            excelImg: excelImg,
            textImg: textImg,
            formInfo: {
                day: null,
                fromUser: null
            },
            options: [],
            optionsFrom: [],
            currentChatRoomInfo: {},
            newsList: [],
            publicNoticeList: [],
            stompClient: null,
            peopleList: []
        }
    },
    components: {
        NoticeDialog: NoticeDialog,
        ChatRoomDialog: ChatRoomDialog,
        ChatRoomPeople: ChatRoomPeople
    },
    methods: {
        goBackFn() {
            this.$router.push({ name: '导调控制模块' });
        },
        listChatroom(item) {
            //取消群聊的订阅
            for (const sub in this.stompClient.subscriptions) {
                if (sub.startsWith("multicastMeeting")) {
                    this.stompClient.unsubscribe(sub);
                }
            }
            //订阅聊天室主题，订阅功能中设置ID：
            this.stompClient.subscribe(item.address, res => {
                this.getRecordsByPagingFn(item);
                this.$nextTick(() => {
                    this.$refs.myNotice.handleClose();
                })
            }, { id: "multicastMeeting" + item.id + new Date().getTime() });
        },
        //分页查询群聊天记录
        getRecordsByPagingFn(item) {
            getRecordsByPaging(item.id, 1, 100, '2023-01-01 00:00:00', 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;
        },
        sendNotice() {
            this.$nextTick(() => {
                this.$refs.myNotice.showDialog();
            })
        },
        showChatRoom() {
            this.$nextTick(() => {
                this.$refs.myChatRoom.showDialog();
            })
        },
        showPeopleList() {
            this.$nextTick(() => {
                this.$refs.myChatRoomPeople.showDialog();
            })
        },
        sendEmail() {
            alert('敬请期待');
        },
        getCurrentTeamPeople(item) {
            //查询聊天组的人员
            getChatRoomInfo(item.id, this.userInfo.account).then(res => {
                this.peopleList = res.chatRoomMemberRelationBOList;
            });
        },
        showLiterature(url) {
            window.open("api/rest/file/download/CHAT/" + url);
        }
    },
    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);
            }
        }
    },
    computed: {
        userInfo() {
            if (this.$store.getters.userInfo) {
                return this.$store.getters.userInfo;
            } else {
                return { account: "" };
            }
        }
    },
    activated() {
        this.currentChatRoomInfo = this.$route.params.data;
        this.stompClient = this.$route.params.client;
        this.listChatroom(this.currentChatRoomInfo);
        //获取当前组成员
        this.getCurrentTeamPeople(this.currentChatRoomInfo);
        //获取当前公告列表
        this.getRecordsByPagingFn(this.currentChatRoomInfo);
    }
}
</script>

<style lang="scss">
.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: auto;
                        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;
    }
}
</style>