<template>
    <section>
        <div class="message-history-page">
            <div class="search-input-container">
                <input id="searchInput"
                       ref="input"
                       autocomplete="off"
                       v-model="query"
                       @keydown.esc="cancel"
                       type="text" :placeholder="$t('common.search')"/>
                <i class="icon-ion-ios-search"></i>
            </div>
            <div v-if="!query" class="portal">
                <p>^~^</p>
            </div>
            <div v-else-if="conversationSearchResults.length > 0" class="search-result-container">
                <div class="conversation-list">
                    <ul>
                        <li v-for="(cresult) in conversationSearchResults"
                            @click="setCurrentConversationSearchResult(cresult)"
                            :key="cresult.conversation.type + cresult.conversation.target + cresult.conversation.line">
                            <div class="conversation-item"
                                 v-bind:class="{active:isConversationItemActive(cresult)}">
                                <div class="header">
                                    <img class="avatar" draggable="false"
                                         :src="cresult._conversationInfo.conversation._target.portrait" alt=""/>
                                </div>
                                <div class="content-container">
                                    <p class="title single-line">
                                        {{ cresult._conversationInfo.conversation._target._displayName }} </p>
                                    <p class="desc single-line">
                                        {{
                                            cresult.matchMessage ? cresult.matchMessage.messageContent.digest(cresult.matchMessage) : `${cresult.matchCount}条相关聊天记录`
                                        }}
                                    </p>
                                </div>

                            </div>
                        </li>
                    </ul>
                </div>
                <div class="conversation-message-list" v-if="currentConversationSearchResult">
                    <div class="desc-action-container" v-if="!currentMessage">
                        <p class="single-line desc">
                            {{ `${currentConversationSearchResult.matchCount}条与${this.query}相关的搜索结果` }}</p>
                        <div class="action" @click="openConversation">
                            <i class="icon-ion-android-chat"></i>
                            <p>进入聊天</p>
                        </div>
                    </div>
                    <div v-else class="desc-action-container">
                        <i class="icon-ion-ios-arrow-back" @click="currentMessage = null">&nbsp;返回</i>
                    </div>
                    <div class="message-list-container" infinite-wrapper>
                        <infinite-loading v-if="currentMessage" identifier="oldMessageLoader"
                                          force-use-infinite-wrapper
                                          direction="top"
                                          @infinite="infiniteHandlerTop">
                            <!--            <template slot="spinner">加载中...</template>-->
                            <template #no-more>{{ $t('conversation.no_more_message') }}</template>
                            <template #no-results>{{ $t('conversation.no_more_message') }}</template>
                        </infinite-loading>
                        <ul>
                            <li v-for="(message, index) in messages"
                                :key="message.uid">
                                <div class="message-container">
                                    <div class="portrait-container">
                                        <img
                                            alt="" :src="message._from.portrait">
                                    </div>
                                    <div class="name-time-content-container">
                                        <div class="name-time-container">
                                            <p class="name"> {{ message._from._displayName }}</p>
                                            <p class="time"> {{ message._timeStr }}</p>
                                            <!--                            <p class="time"> 1223</p>-->
                                        </div>
                                        <div class="content">
                                            <MessageContentContainerView :message="message"
                                                                         @contextmenu.prevent.native="openMessageContextMenu($event, message)"/>
                                            <a v-if="!currentMessage" class="single-line action"
                                               @click="showContextMessages(message)">查看上下文</a>
                                        </div>
                                    </div>

                                </div>
                            </li>
                        </ul>
                        <infinite-loading v-if="currentMessage" identifier="newMessageLoader"
                                          force-use-infinite-wrapper
                                          direction="bottom"
                                          @infinite="infiniteHandlerBottom">
                            <!--            <template slot="spinner">加载中...</template>-->
                            <template #no-more>{{ $t('fav.no_more') }}</template>
                            <template #no-results>{{ $t('fav.all_fav_load') }}</template>
                        </infinite-loading>
                    </div>
                </div>
            </div>
            <div v-else class="empty">
                <p>没有搜索结果</p>
            </div>
        </div>
    </section>

</template>

<script>
import MessageContentContainerView from "./conversation/message/MessageContentContainerView";
import store from "../../store";
import InfiniteLoading from "@imndx/vue-infinite-loading";
import IpcSub from "../../ipc/ipcSub";

export default {
    name: "MessageHistoryPage",
    data() {
        return {
            query: '',
            conversationSearchResults: [],
            currentConversationSearchResult: null,
            currentConversationMessages: [],
            currentMessage: null,
            contextMessages: [],
        }
    },
    mounted() {
        document.title = '查找聊天记录'
    },
    methods: {

        openMessageContextMenu(event, msg) {
            // TODO
        },
        setCurrentConversationSearchResult(result) {
            this.currentConversationSearchResult = result;
            this.currentMessage = null;
        },

        isConversationItemActive(result) {
            return this.currentConversationSearchResult && (this.currentConversationSearchResult.conversation.equal(result.conversation))
        },

        openConversation() {
            let conversation = this.currentConversationSearchResult.conversation;
            IpcSub.openConversation(conversation);
        },

        showContextMessages(message) {
            this.currentMessage = message;
            this.contextMessages = [message];
        },

        infiniteHandlerTop($state) {
            let firstMsg = this.contextMessages[0];
            let conversation = this.currentConversationSearchResult.conversation;
            store.getMessages(conversation, firstMsg.messageId, true, '', msgs => {
                if (msgs.length > 0) {
                    this.contextMessages = msgs.concat(this.contextMessages);
                    $state.loaded();
                } else {
                    $state.complete();
                }
            });
        },

        infiniteHandlerBottom($state) {
            let lastMsg = this.contextMessages[this.contextMessages.length - 1];
            let conversation = this.currentConversationSearchResult.conversation;
            store.getMessages(conversation, lastMsg.messageId, false, '', msgs => {
                if (msgs.length > 0) {
                    this.contextMessages = this.contextMessages.concat(msgs);
                    $state.loaded();
                } else {
                    $state.complete();
                }
            });
        },
    },
    watch: {
        query() {
            if (this.query) {
                this.conversationSearchResults = store.searchConversation(this.query)
                this.currentConversationMessages = null;
                this.currentConversationSearchResult = null;
            } else {
                this.conversationSearchResults = [];
            }
        },
        currentConversationSearchResult() {
            if (this.currentConversationSearchResult) {
                this.currentConversationMessages = store.searchMessage(this.currentConversationSearchResult.conversation, this.query);
            } else {
                this.currentConversationMessages = null;
            }
        },
    },
    computed: {
        messages() {
            return this.currentMessage ? this.contextMessages : this.currentConversationMessages;
        }
    },
    components: {
        MessageContentContainerView,
        InfiniteLoading,
    }
}
</script>

<style scoped>
.message-history-page {
    width: 100vw;
    height: 100vh;
    background: #f3f3f3;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.search-input-container {
    height: 100px;
    padding: 40px 60px 30px 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    border-bottom: 1px solid #e4e4e4;
}

.search-input-container input {
    height: 25px;
    padding: 0 10px 0 20px;
    text-align: left;
    flex: 1;
    border: 1px solid #e5e5e5;
    border-radius: 3px;
    outline: none;
    background-color: #eeeeee;
}

.search-input-container input:active {
    border: 1px solid #4168e0;
}

.search-input-container input:focus {
    border: 1px solid #4168e0;
}

.search-input-container i {
    position: absolute;
    left: 65px;
}

.portal {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

.empty {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

.search-result-container {
    flex: 1;
    display: flex;
    overflow: hidden;
}

.conversation-list {
    width: 240px;
    height: 100%;
    overflow: scroll;
    border-right: 1px solid #e4e4e4;
}

.conversation-item {
    width: 100%;
    height: 70px;
    display: flex;
    /*border-bottom: 1px solid #eeeeee;*/
    align-items: center;
    justify-content: center;
}

.conversation-item.active {
    background: #dedede;
}

.header {
    height: 100%;
    padding: 10px;
    position: relative;
}

.header .avatar {
    position: relative;
    width: 45px;
    height: 45px;
    min-width: 45px;
    min-height: 45px;
    background: #d6d6d6;
    top: 50%;
    transform: translateY(-50%);
    border-radius: 3px;
}

.content-container {
    width: 100%;
    height: 50px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    padding-right: 12px;
}

.content-container .title {
    display: inline-block;
    font-size: 14px;
    color: #262626;
    font-style: normal;
    font-weight: normal;
    padding-right: 10px;
    flex: 1;
}

.content-container .desc {
    color: #b8b8b8;
    font-size: 13px;
}

.conversation-message-list {
    height: 100%;
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 0 40px 20px 40px;
}

.conversation-message-list .desc-action-container {
    width: 100%;
    padding: 20px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.desc-action-container .desc {
    color: #b8b8b8;
    font-size: 13px;
}

.desc-action-container .action {
    display: flex;
    align-items: center;
    color: #262626;
    margin-left: auto;
    font-size: 14px;
}

.desc-action-container .action i {
    padding-right: 5px;
}

.message-list-container {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding-bottom: 20px;
    margin-left: -10px;
    overflow: scroll;
}

.message-list-container ul {
    width: 100%;
    flex: 1;
    list-style-position: inside;
}

.message-list-container ul li {
    position: relative;
    padding: 10px 0;
}

.message-list-container ul li:not(:last-child)::after {
    content: "";
    width: calc(100% - 55px);
    position: absolute;
    margin-left: 55px;
    padding: 5px 0;
    border-bottom: 1px solid #f1f1f1;
}

.message-container {
    width: 100%;
    display: flex;
}

.name-time-content-container {
    width: 100%;
}

.name-time-container {
    width: 100%;
    padding: 5px 0;
    display: flex;
    justify-content: space-between;
}

.name-time-container p {
    font-size: 12px;
    color: #c2c2c2;
}

.name-time-content-container .content {
    display: inline-block;
    margin-left: -10px;
    margin-right: 65px;
}

.name-time-content-container .content .action {
    display: none;
    position: absolute;
    right: 0;
    top: 40px;
    font-size: 14px;
    color: #637599;
}

.message-container:hover .action {
    display: inline-block;
}


.portrait-container {
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
    overflow: hidden;
    margin: 10px;
}

.portrait-container img {
    width: 100%;
    height: 100%;
    border-radius: 3px;
}

>>> .text-message-container.out {
    background-color: #f3f3f3;
    padding-top: 0 !important;
    padding-left: 0 !important;
}

>>> .text-message-container {
    background-color: #f3f3f3;
    padding-top: 0 !important;
    padding-left: 0 !important;
}

>>> .rightarrow::before {
    display: none;
}

>>> .leftarrow::before {
    display: none;
}

</style>
