<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">
                <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-item>
                            <div class="searchButton"
                                :style="{ background: stompClient.connected ? 'Green' : 'gray', color: 'white' }">
                                <span :class="[!stompClient.connected ? 'el-icon-loading' : '']"></span>
                                {{ stompClient.connected ? '已连接' : '重连中' }}
                            </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(item)">
                        <div class="card-title" :title="item.nickname">{{ item.nickname
                        }}<span
                                :style="{ fontSize: '14px', color: item.status.name == '待开始' ? '#85ce61' : (item.status.name == '进行中' ? '#409eff' : (item.status.name == '已结束' ? '#f78989' : '')) }">{{
                                    '（' + item.status.name + '）' }}</span></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>
        </transition>
    </div>
</template>


<script>
import "animate.css";
import { getChatRoomList } from "../../api/chat/chatRoom";
import '@/util/stomp.min.js'
import { getTime_extent } from '@/util/http_util.js';

export default {
    data() {
        return {
            form: {
                keyWord: null,
                dateRange: []
            },
            analogData: [],
            stompClient: {},
            ws: null
        }
    },
    methods: {
        showInfo(item) {
            if (item.status.name !== '待开始') {
                this.$router.push({ name: '聊天室详情' + this.$route.meta.type_name, params: { data: item, client: this.stompClient } });
            } else {
                this.$message.warning('此演习暂未开启，不能进入！');
            }

        },
        queryChatRoomListFn(params) {
            getChatRoomList(params).then(res => {
                this.analogData = res;
            });
        },
        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 = 20000; //客户端从服务端接收心跳包
                this.stompClient.debug = null;
                this.stompClient.connect({ name: this.userInfo.account, token: sessionStorage.getItem("token") }, frame => {
                    console.log("connected!");
                }, err => {
                    console.log(new Date().toLocaleTimeString() + (typeof err == "string" ? err : err.headers.message))
                    reject(typeof err == "string" ? err : err.headers.message)
                });
            });
        },
        reconnect() {
            if (this._lockReconnect) return;
            this._lockReconnect = true;
            let self = this;
            setTimeout(() => {
                this.connect().catch(err => {
                    self.reconnect();
                });
                self._lockReconnect = false;
            }, 5000);
        },
        searchChatList() {
            this.queryChatRoomListFn({ startTime: this.form.dateRange && this.form.dateRange.length > 0 ? this.form.dateRange[0] : '2023-01-01 00:00:00', endTime: this.form.dateRange && this.form.dateRange.length > 0 ? this.form.dateRange[1] : getTime_extent(0).pre_rq_end, userId: this.userInfo.account, keyword: this.form.keyWord == '' ? null : this.form.keyWord });
        },
    },
    computed: {
        userInfo() {
            if (this.$store.getters.userInfo) {
                return this.$store.getters.userInfo;
            } else {
                return { account: "" };
            }
        }
    },
    mounted() {
        this.queryChatRoomListFn({ userId: this.userInfo.account });
        this.connect().catch(err => {
            this.reconnect();
        });
    },
    destroyed() {
        //手动断开
        this.stompClient.disconnect();
        this.ws.close();
    }
}
</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>