<template>
    <div class="chat-totallayout">
        <div class="chat-leftlayout">
            <div class="chat-leftline1">
                <p>信息</p>
                <p>{{ new_msg_nums }}条新信息</p>
            </div>
            <div class="chat-leftline2">
                <img id="chatSearchImg" src="@/assets/pictures/chat/search.png">
                <input id="chatSearchInput" type="search" v-model="searchName">
            </div>
            <div class="chat-leftline3">
                <ChatList :shownum="Number(7)" :items="showSearchList" :one_height="Number(58)" v-slot="a">
                <div class="chat-friends" v-for="(item,index) of a.show_list" :key="index" @click="clickFriendList(item)">
                    <img id="chatIconImg" :src="item.icon" />
                    <div class="chat-friend-text">
                        <p id="chatFriendName">{{ item.name }}</p>
                        <p id="chatFriendMsg">{{ getLatestNew(item) }}</p>
                    </div>
                    <p id="chatTime" v-if="item.chatHistory.length != 0">{{ item.chatHistory[item.chatHistory.length - 1].time.split(' ')[1] }}</p>
                    <p id="chatTime" v-else>00:00</p>
                    <label v-if="item.unreading_num != 0" style="position: relative;bottom:25%;background-color: red;color: white;border-radius: 50%;font-weight: 400;font-size: 8px;text-align: center;height: 15px;width: 15px;line-height: 180%;">{{ item.unreading_num }}</label>
                </div>
                </ChatList>

            </div>
        </div>
        <div class="chat-middlelayout">
            <ChatList ref="chatHandle" v-if="chatWith == '' ? false : true" :shownum="Number(5)" :items="getFriendObject.chatHistory" :one_height="Number(100)" :status="true" v-slot="a">
                <div  v-for="(item,index) of a.show_list" :key="index">
                    <ChatCard :your_icon="getFriendObject.icon" :my_icon="userInfo.icon" :name="item.name" :yours="chatWith" :content="historyContentHandle(item.content)"></ChatCard>               
                </div>
            </ChatList>
            <div class="send-msg">
                <img :src="userInfo.icon" alt="" style="width: 40px;height: 40px; border-radius: 50%;">
                <input id="send-msg-input" type="search" v-model="sendingMsg">
                <button class="search-btn" @click="sendMsg"></button>
            </div>
        </div>
        <div class="chat-rightlayout" v-if="chatWith != ''">
            <img :src="getFriendObject.icon" alt="" style="width: 90px;height: 90px; border-radius: 50%;border: 1px solid #f85096;">
            <p style="font-weight: 600; font-size: large;">{{ getFriendObject.name }}</p>
            <div class="friend-information">
                <img src="../../assets/pictures/chat/Location.png" alt="" style="height: 20px;">
                <p>{{ getFriendObject.position }}</p>
                <img src="../../assets/pictures/chat/Calendar.png" alt="" style="height: 20px;">
                <p>{{ getFriendObject.birth }}</p>
            </div>
            <div class="chat-special-btn" style="position: relative;top: -3%;">
                <div class="chat-home-tree-btn">
                    <button class="chat-home-page-btn" style=""></button>
                    <p style="color: #f85096;">他的主页</p>
                </div>
                <div class="chat-home-tree-btn">
                    <button class="chat-tree-btn" @click="cliTreeBtn"></button>
                    <p style="color: #a75efb;">族谱树</p>
                </div>
            </div>
            <div style="position: relative;top: -3%; width: 60%; height: 2px; background: linear-gradient(to right, transparent, gray, transparent);opacity: 0.7;">
            </div>
            <div style="position: relative;top: -1%;font-size: small;">你和他已经聊了{{ getFriendObject.beeing_friends_time }}天</div>
            <div class="chat-connection" style="position: relative;top: 1%;">
                <img src="../../assets/pictures/chat/GuanZhu.png" style="height: 23px;">
                <p style="position: relative;top: -27%;">关注他</p>
                <HonneyBtn style="position: relative;top: 6%;" cnt="1" :Status="getFriendObject.concern_status " :ReviseStatus2Father="concernStatusRevise"></HonneyBtn>
            </div>
            <div class="chat-connection" style="position: relative;top: -2%;">
                <img src="../../assets/pictures/chat/HeiMinDan.png" style="height: 25px;">
                <p style="position: relative;top: -25%;">拉黑他</p>
                <HonneyBtn style="position: relative;top: 10%;" cnt="2" :Status="getFriendObject.black_status" :ReviseStatus2Father="blackStatusRevise"></HonneyBtn>
            </div>
            <div style="position:relative;top: -4%;width: 60%; height: 2px; background: linear-gradient(to right, transparent, gray, transparent);opacity: 0.7;"></div>
            <p style="position: relative;top: -5%;">可能感兴趣的人</p>
            <div class="chat-recomend" style="position: relative;top: -5%;">
                <div v-for="(item,index) of recomendList" :key="index" style="display: flex;flex-direction: column;align-items: center;">
                    <img :src="item.icon" alt="" style="width: 50px;height: 50px;border: 2px solid #f85096;border-radius: 50%;">
                    <p>{{ item.name }}</p>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
// import RecycleScroller from 'vue-virtual-scroller';
// import * as SockJS from 'sockjs-client';
// import { Stomp } from "stompjs/lib/stomp.js";
import HonneyBtn from './HonneyBtn.vue';
import ChatCard from './ChatCard.vue';
import ChatList from './ChatList.vue';
import {getToken,getUserId} from '@/token/auth'
import axios from 'axios';
export default {
    name: 'chatIndex', // 添加组件名称
    data(){
        return{
            searchName: '',
            new_msg_nums: 0,
            chatWith:'',
            userInfo:{
                id: Number(),
                name:'我',
                icon:'/icon/abc.jpg'
            },
            sendingMsg: '',
            // ！！！！注意！！！！
            // 头像显示的是第一列好友列表，使用循环渲染。这时如果在assets文件夹里面会被服务器临时编译到public文件夹里面。
            // 由于编译后文件夹名称会发生改变，所以把icon图片单独放到服务器的文件夹下面以此来跳过编译（public文件夹）
            // 这里文件路径命名是相对于public的绝对路径
            friendsInfoList: [
                // {name:'潇潇',icon:'/icon/icon.png',position:'london',birth:'2004-1-1',concern_status:false,black_status:true,beeing_friends_time: 302,
                // chatHistory:[
                //     {name:'我',content:'早重中之重做做做做做做做做做做做做做做做做做做做战争之子战争之子做做做做',time:'2024-11-24 1:24'},
                //     {name:'潇潇',content:'中',time:'2024-11-24 2:11'},
                //     {name:'我',content:'晚',time:'2024-11-24 3:24'},
                // ]},
                // {name:'小刚',icon:'/icon/UserIcon.png',position:'china',birth:'2003-3-4',concern_status:false,black_status:false,beeing_friends_time: 2,
                // chatHistory:[
                //     {name:'我',content:'you are',time:'2024-11-24 22:24'},
                //     {name:'小刚',content:'hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh',time:'2024-11-25 22:11'},
                // ]},
                // {name:'吴伟',icon:'/icon/icon.png',position:'endland',birth:'2004-5-2',concern_status:false,black_status:false,beeing_friends_time: 32,
                // chatHistory:[
                //     {name:'我',content:'早上好',time:'2024-11-24 22:25'},
                //     {name:'吴伟',content:'iii',time:'2024-11-24 23:11'},
                // ]},
                // {name:'小闽',icon:'/icon/UserIcon.png',position:'china',birth:'2003-3-4',concern_status:false,black_status:false,beeing_friends_time: 1,
                // chatHistory:[
                //     {name:'我',content:'you are',time:'2024-11-24 22:24'},
                //     {name:'小闽',content:'h',time:'2024-11-25 22:11'},
                // ]},
                // {name:'小',icon:'/icon/UserIcon.png',position:'china',birth:'2003-3-4',concern_status:false,black_status:false,beeing_friends_time: 1,
                // chatHistory:[
                //     {name:'我',content:'you are',time:'2024-11-24 22:24'},
                //     {name:'小',content:'h',time:'2024-11-25 22:11'},
                // ]},
                // {name:'闽',icon:'/icon/UserIcon.png',position:'china',birth:'2003-3-4',concern_status:false,black_status:false,beeing_friends_time: 1,
                // chatHistory:[
                //     {name:'我',content:'you are',time:'2024-11-24 22:24'},
                //     {name:'闽',content:'h',time:'2024-11-25 22:11'},
                // ]},
                // {name:'哈哈',icon:'/icon/UserIcon.png',position:'china',birth:'2003-3-4',concern_status:false,black_status:false,beeing_friends_time: 1,
                // chatHistory:[
                //     {name:'我',content:'you are',time:'2024-11-24 22:24'},
                //     {name:'哈哈',content:'h',time:'2024-11-25 22:11'},
                // ]},
                // {name:'kk',icon:'/icon/UserIcon.png',position:'china',birth:'2003-3-4',concern_status:false,black_status:false,beeing_friends_time: 1,
                // chatHistory:[
                //     {name:'我',content:'you are',time:'2024-11-24 22:24'},
                //     {name:'kk',content:'h',time:'2024-11-25 22:11'},
                // ]},
                // {name:'44',icon:'/icon/UserIcon.png',position:'china',birth:'2003-3-4',concern_status:false,black_status:false,beeing_friends_time: 1,
                // chatHistory:[
                //     {name:'我',content:'you are',time:'2024-11-24 22:24'},
                //     {name:'44',content:'h',time:'2024-11-25 22:11'},
                // ]},
                // {name:'77',icon:'/icon/UserIcon.png',position:'china',birth:'2003-3-4',concern_status:false,black_status:false,beeing_friends_time: 1,
                // chatHistory:[
                //     {name:'我',content:'you are',time:'2024-11-24 22:24'},
                //     {name:'77',content:'h',time:'2024-11-25 22:11'},
                // ]},
                // {name:'88',icon:'/icon/UserIcon.png',position:'china',birth:'2003-3-4',concern_status:false,black_status:false,beeing_friends_time: 1,
                // chatHistory:[
                //     {name:'我',content:'you are',time:'2024-11-24 22:24'},
                //     {name:'88',content:'h',time:'2024-11-25 22:11'},
                // ]},
            ],
            showSearchList: [],
            recomendList: [
                {name:'Amon',icon:'/icon/bird.jpg'},
                {name:'果果',icon:'/icon/icon.png'},
                {name:'xixi',icon:'/icon/UserIcon.png'},
            ]
        }
    },
    mounted(){
        if(this.searchName == '')
            this.showSearchList = this.friendsInfoList

            this.get_friendsInfoList()
            this.long_poll_serve()
            // this.websocket_serve()
    },
    components:{
        HonneyBtn,
        // RecycleScroller,
        ChatCard,
        ChatList
    },
    methods:{
        // async websocket_serve(){
        //     const socket = new SockJS('https://911fb0525ms3.vicp.fun//loveforest/ws');
        //     const stompClient = Stomp.over(socket);
        //     const userId = getUserId()

        //     stompClient.connect({}, function (frame) {
        //         console.log('Connected: ' + frame);

        //         // 假设 receiverId 是当前用户的 ID
        //         const receiverId = userId; // 替换为当前用户的 ID

        //         // 订阅用户特定的未读消息队列
        //         stompClient.subscribe('/user/' + receiverId + '/queue/unread-messages', function (message) {
        //             const unreadMessage = JSON.parse(message.body);
        //             console.log('New unread message: ', unreadMessage);
        //             // 这里可以更新用户界面来显示未读消息
        //         });
        //     });
        // },
        async long_poll_serve(){
            try{
                const UserId = getUserId()
                const token = 'Bearer '+getToken()
                const response = await axios.get(`messages/poll/${UserId}`,{
                    headers:{Authorization : token}
                })
                if(response.data == '')
                {
                    this.long_poll_serve()
                }else{
                    const senderId = response.data[response.data.length-1].senderId
                    console.log(senderId)
                    for(let i = 0;i<this.friendsInfoList.length;i++){
                        if(this.friendsInfoList[i].id == senderId){
                            let response2 = await axios.get(`/messages/chat/${UserId}/${senderId}`,{
                                headers:{Authorization : token}
                            })
                            if(this.friendsInfoList[i].chatHistory.slice(-1)[0].time == response2.data[response2.data.length-1].timestamp.replace('T',' ')){
                                break
                            }
                            console.log(this.friendsInfoList[i].chatHistory.slice(-1),response2.data[response2.data.length-1].timestamp.replace('T',' '))
                            if(this.chatWith != this.friendsInfoList[i].name){
                                this.friendsInfoList[i].unreading_num += 1
                                this.new_msg_nums += 1
                            }
                            let tempt_chat = {name:'',content:'',time:''}
                            tempt_chat.name = this.friendsInfoList[i].name
                            tempt_chat.content = response2.data[response2.data.length-1].content
                            tempt_chat.time = response2.data[response2.data.length-1].timestamp.replace('T',' ')
                            this.friendsInfoList[i].chatHistory.push(tempt_chat)
                            break
                        }
                    }
                    this.long_poll_serve()
                }
            }catch(error){
                alert('长轮询失败',error)
            }
        },
        async revise_honneyBtn_status(userId1,userId2,status){
            //向后端发送是出于好友状态还是黑名单状态
            try{
                const response = await axios.post('/relationships',{
                    userId1: userId1,
                    userId2: userId2,
                    status: status
                },{
                    headers:{Authorization : 'Bearer '+getToken()}
                })
                console.log(response.data)
            }catch(error){
                alert('好友状态修改失败',error)
            }
        },
        async revise_reading(senderId,receiverId){ 
            //向后端传输信息标记是否已读（一个axios
            try{
                const response = await axios.post(`/messages/mark-as-read/${senderId}/${receiverId}`,{},{
                    headers:{Authorization : 'Bearer '+getToken()}
                })
                console.log(response.data)
            }catch(error){
                alert('消息已读失败',error)
            }
        },
        async save_chat_message(senderId,receiverId,content){
            //向后端发送消息（一个axios
            try{
                const response = await axios.post('/messages/send',{
                senderId: senderId,
                receiverId: receiverId,
                content: content
                },{
                    headers:{Authorization : 'Bearer '+getToken()}
                })
                console.log(response.data)
            }catch(error){
                alert('消息保存失败',error)
            }
        },
        async get_friendsInfoList(){
            //向后端获取好友列表和聊天记录（两个axios
            try{
                // const tempt_chat = {name:'',content:'',time:''}
                const UserId = getUserId()
                const token = 'Bearer '+getToken()
                console.log(UserId,token)
                const response1 =await axios.get(`/relationships/${UserId}`,{
                    headers:{Authorization : token}
                })
                const data = response1.data
                console.log(data)

                for(let i = 0;i< data.length;i++)
                {
                    let tempt_data = {id:Number(),name:'',icon:'/icon/UserIcon.png',position:'DEFAULT',birth:'',concern_status:false,black_status:false,beeing_friends_time: 0,unreading_num: 0,
                    chatHistory:[]}

                    // {name:'我',content:'you are',time:'2024-11-24 22:24'},
                    let response2
                    if(data[i].userId1 == UserId){
                        tempt_data.id = data[i].userId2
                        response2 = await axios.get(`/messages/chat/${UserId}/${data[i].userId2}`,{
                            headers:{Authorization : token}
                        })
                    }else if(data[i].userId2 == UserId){
                        tempt_data.id = data[i].userId1
                        response2 = await axios.get(`/messages/chat/${UserId}/${data[i].userId1}`,{
                            headers:{Authorization : token}
                        })
                    }

                    let chat_history = response2.data
                    console.log(chat_history)

                    if(chat_history.length != 0){
                        for(let j = 0;j < chat_history.length ; j++){
                            let tempt_chat = {name:'',content:'',time:''}

                            if(chat_history[j].senderId == UserId){
                                tempt_chat.name = data[i].myNickname
                            }else{
                                tempt_chat.name = data[i].otherUserNickname
                            }

                            tempt_chat.content = chat_history[j].content
                            tempt_chat.time = chat_history[j].timestamp.replace('T',' ')
                            // console.log(tempt_chat)
                            tempt_data.chatHistory.push(tempt_chat)

                            if(chat_history[j].read == false && chat_history[j].receiverId == UserId){
                                tempt_data.unreading_num += 1
                            }
                        }
                    }

                    tempt_data.name = data[i].otherUserNickname
                    tempt_data.birth = data[i].otherUserBirthday
                    tempt_data.position = data[i].otherUserAddress
                    tempt_data.beeing_friends_time = data[i].daysSinceCreated
                    if(data[i].status == 'friend'){
                        tempt_data.concern_status = true
                        tempt_data.black_status = false
                    }else if(data[i].status == 'black'){
                        tempt_data.concern_status = false
                        tempt_data.black_status = true
                    }else if(data[i].status == 'normal'){
                        tempt_data.concern_status = false
                        tempt_data.black_status = false
                    }
                    this.friendsInfoList.push(tempt_data) 
                    this.new_msg_nums += tempt_data.unreading_num
                    this.userInfo.name = data[i].myNickname
                }
                
                this.userInfo.id = UserId
                console.log(this.friendsInfoList,this.userInfo)
            }catch(error){
                alert('获取好友信息失败',error)
            }
        },
        clickFriendList(item){
            //更新chatWith
            let who = item.name
            if(this.chatWith != who){
                this.sendingMsg = ''
            }
            this.chatWith = item.name
            // console.log(this.chatWith)
            //更新是否已读
            this.revise_reading(this.userInfo.id,item.id)
            this.new_msg_nums -= item.unreading_num
            item.unreading_num = 0
            //将列表下拉到最下面
            this.$nextTick(() =>{
                console.log(this.$refs.chatHandle)
                this.$refs.chatHandle.chatWithHandle()
            })
        },
        cliTreeBtn(){
            this.$router.push('/main/familyTree')
        },
        sendMsg(){
            if(this.chatWith != ''){
                const dayjs = require('dayjs')
                const formattedTime = dayjs().format('YYYY-MM-DD HH:mm');
                console.log(formattedTime) 
                let i = 0
                for(i=0;i<this.friendsInfoList.length;i++){
                    if(this.friendsInfoList[i].name == this.chatWith && this.sendingMsg != ''){
                        this.friendsInfoList[i].chatHistory.push({name:this.userInfo.name,content:this.sendingMsg,time:formattedTime})
                        // console.log(this.friendsInfoList[i].chatHistory)
                        break
                    }
                }
                this.save_chat_message(this.userInfo.id,this.friendsInfoList[i].id,this.sendingMsg)
                this.sendingMsg = ''
                this.$nextTick(() =>{
                    console.log(this.$refs.chatHandle)
                    this.$refs.chatHandle.chatWithHandle()
                })
            }
        },
        concernStatusRevise(data){
            this.getFriendObject.concern_status = data
            // console.log(this.userInfo.id,this.getFriendObject.id)
            if(data == true){
                this.revise_honneyBtn_status(this.userInfo.id,this.getFriendObject.id,'friend')
                this.getFriendObject.black_status = false
            }else if(this.getFriendObject.black_status == false && this.getFriendObject.concern_status == false){
                this.revise_honneyBtn_status(this.userInfo.id,this.getFriendObject.id,'normal')
            }

        },
        blackStatusRevise(data){
            this.getFriendObject.black_status = data
            if(data == true){
                this.revise_honneyBtn_status(this.userInfo.id,this.getFriendObject.id,'black')
                this.getFriendObject.concern_status = false
            }else if(this.getFriendObject.black_status == false && this.getFriendObject.concern_status == false){
                this.revise_honneyBtn_status(this.userInfo.id,this.getFriendObject.id,'normal')
            }

        },
        historyContentHandle(content){
            let char_sizeof = 0
            let new_content = content
            for(let i = 0;i<content.length;i++){
                let charCode = new_content.charCodeAt(i)
                if(charCode <= 128 && charCode >= 0 && content[i] != '\n'){
                    char_sizeof += 1
                }else{
                    char_sizeof += 2
                }
                if (char_sizeof % 40 == 0){
                    new_content = new_content.slice(0,i) + '\n' + new_content.slice(i)
                }
            }
            return new_content
        },
        getLatestNew(object){
            let latest_new = ''
            if(object.chatHistory.length != 0){
                latest_new = object.chatHistory[object.chatHistory.length - 1].content
                if(latest_new.length > 14){
                    latest_new= latest_new.slice(0,13) + '...'
                }
            }
            return latest_new
        },
    },
    watch:{
        searchName(newvalue){
            this.showSearchList = []
            if(newvalue == ''){
                this.showSearchList = this.friendsInfoList
            }
            else{
                this.friendsInfoList.map((x) =>{
                    if(x.name.includes(newvalue)){
                        this.showSearchList.push(x)
                    }
                })
            }
        },
    },
    computed:{
        getFriendObject(){
            let FriendObject = {}
            if(this.chatWith != ''){
                this.friendsInfoList.map((x) =>{
                    if(x.name == this.chatWith){
                        FriendObject = x
                    }
                })
            }
            console.log(FriendObject)
            return FriendObject
        },
    }
}
</script>

<style scoped>
  @import url('../../assets/css/chat/chat.css');
</style>