<template>
  <view class="nine-content-001">
    <view class="chat-body">
      <view class="chat-body-main">
        <view v-if="chatObject.haveHistory==0" class="chat-body-history">
          没有更多消息了
        </view>
        <view v-else class="chat-body-history chat-body-history-have" @click="handleHistoryMessage(false)">
          查看更多消息
        </view>
        <view class="chat-body-message">
          <view v-for="(item, index) in messageList" :key="index">
            <view class="chat-conversation" :class="item.fromId == userInfo.userId?'chat-conversation-mine':''">
              <view class="chat-conversation-image">
                <image class="chat-conversation-image-image" v-if="item.fromId != userInfo.userId" :src="getUserAvatar(item.fromId, item.avatar)"></image>
                <image class="chat-conversation-image-image" v-else :src="userInfo.avatar || defaultAvatar"></image>
              </view>
              <view class="chat-conversation-text">
                <view class="chat-conversation-text-time" v-if="item.sendType == 1 && item.fromId != userInfo.userId">{{getUserName(item.fromId, item.fromName)}}</view>
                <view class="chat-conversation-text-time">{{formatTime(item.sendTime)}}</view>
                <view class="chat-conversation-text-text nine-user-select">{{item.content}}</view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="chat-footer">
      <view class="chat-footer-send">
        <view @click="handleVoice" class="chat-footer-send-voice">
          <image class="chat-footer-send-image" :src="iconVoice"></image>
        </view>
        <view v-if="isVoice" @longpress="handleSay" class="chat-footer-send-say">
          <span>按住 说话</span>
        </view>
        <view v-else class="chat-footer-send-input">
          <input @confirm="handleSend" class="input" v-model="inputText" />
        </view>
        <view @click="handleEmoji" class="chat-footer-send-emoji">
          <image class="chat-footer-send-image" :src="iconEmoji"></image>
        </view>
        <view v-if="inputText" @click="handleSend" class="chat-footer-send-button">
          <span class="chat-footer-send-button-span">发送</span>
        </view>
        <view v-else @click="handleMore" class="chat-footer-send-more">
          <image class="chat-footer-send-image" :src="iconMore"></image>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  import { mapState } from 'vuex'
  import store from '@/uni_modules/vrapile-im/store'
  import { getChatKey } from '@/uni_modules/vrapile-im/utils/tiosocket';
  // 外部需提供store用于获取用户信息，提供根据消息key查询用户历史消息接口
  import storeOut from '@/store'
  import { getMessageByChatKey } from '@/api/chat'
  export default {
    data() {
      return {
        userInfo: {},
        
        chatObject: {},
        messageList: [],
        noHistory: true,
        isVoice: false,
        inputText: "",
        
        // 消息唯一key
        key: null,
        
        // 用户默认图标
        defaultAvatar: '/uni_modules/vrapile-im/static/image/yy.png',
        // 消息铃铛图标
        iconMessage: "/uni_modules/vrapile-im/static/image/message.png",
        // 语音切换图标
        iconVoice: "/uni_modules/vrapile-im/static/image/voice.png",
        // 表情图标
        iconEmoji: "/uni_modules/vrapile-im/static/image/emoji.png",
        // 更多图标
        iconMore: "/uni_modules/vrapile-im/static/image/more.png",
      }
    },
    computed: {
      ...mapState({
        websocketData: state => store.state.socket.websocketData
      }),
      getChatList() {
        return store.state.chat.chatList;
      },
      getUserAvatar() {
        return (userId, defaultAvatar) => {
          return store.getters.getUserAvatar(userId, defaultAvatar);
        }
      },
      getUserName() {
        return (userId, defaultName) => {
          return store.getters.getUserName(userId, defaultName);
        }
      }
    },
    onLoad(options){
      this.userInfo = storeOut.state.user.userInfo;
      if(!this.userInfo.userId){
        this.navigateToLogin();
      }
      try{
        this.key = options.data;
      }catch(e){
        this.switchTab("/uni_modules/vrapile-im/pages/home/chatHome");
      }
    },
    // 下拉处理
    onPullDownRefresh() {
      if(this.chatObject.haveHistory==1){
        this.handleHistoryMessage(true);
      }
      setTimeout(() => {
        uni.stopPullDownRefresh();
      }, 500);
    },
    onShow(){
      for(let i=0; i < this.getChatList.length; i++){
        if(this.getChatList[i]["key"] == this.key){
          this.chatObject = this.getChatList[i];
          uni.setNavigationBarTitle({
            title: this.chatObject.name || "好友"
          })
          this.messageList = this.getChatList[i].messageList;
          this.scrollToBottom();
          if(this.messageList.length == 0 && this.chatObject.haveHistory==1){
            this.handleHistoryMessage(true);
          }else{
            this.handleRead();
          }
          break;
        }   
      }
    },
    // 监听消息
    watch: {
      websocketData: {
        handler(newVal, oldval) {
          if(newVal && newVal.length > 0 
            && (newVal[newVal.length-1]["toId"] == this.userInfo.userId 
              || newVal[newVal.length-1]["fromId"] == this.userInfo.userId)){
            this.scrollToBottom();
            this.handleRead();
          }
        },
        immediate: true,
        deep: true
      }
    },
    methods: {
      // 滚动到最新消息位置
      scrollToBottom() {
        setTimeout(() => {
          uni.pageScrollTo({
            scrollTop: 2000000,
            duration : 10
          })
        }, 500);
      },
      // 语音点击事件
      handleVoice() {
        this.isVoice = !this.isVoice;
      },
      // 语音消息处理， 暂时先发送个提示
      handleSay() {
        let sendInfo = {
          code: 2,
          message: {
            //消息文件类型 0-文本|1-图片|2-附件|3-语言|4-撤回
            messageType: 0,
            //聊天室id
            toId: this.chatObject.id,
            //消息发送人
            fromId: this.userInfo.userId,
            //消息发送人账号
            fromName: this.userInfo.userName,
            //消息内容
            content: "您发送了一条语音消息",
            //消息类型：0-私聊|1-群聊
            sendType: this.chatObject.type,
            //扩展消息
            extend: null
          },
        };
        uni.sendSocketMessage({
          data: JSON.stringify(sendInfo)
        })
      },
      // 表情消息处理， 暂时先发送个提示
      handleEmoji() {
        let sendInfo = {
          code: 2,
          message: {
            //消息文件类型 0-文本|1-图片|2-附件|3-语言|4-撤回
            messageType: 0,
            //聊天室id
            toId: this.chatObject.id,
            //消息发送人
            fromId: this.userInfo.userId,
            //消息发送人账号
            fromName: this.userInfo.userName,
            //消息内容
            content: "您发送了一个表情消息",
            //消息类型：0-私聊|1-群聊
            sendType: this.chatObject.type,
            //扩展消息
            extend: null
          },
        };
        uni.sendSocketMessage({
          data: JSON.stringify(sendInfo)
        })
      },
      // 更多消息处理， 暂时先发送个提示
      handleMore() {
        let sendInfo = {
          code: 2,
          message: {
            //消息文件类型 0-文本|1-图片|2-附件|3-语言|4-撤回
            messageType: 0,
            //聊天室id
            toId: this.chatObject.id,
            //消息发送人
            fromId: this.userInfo.userId,
            //消息发送人账号
            fromName: this.userInfo.userName,
            //消息内容
            content: "您发送了一个更多的消息",
            //消息类型：0-私聊|1-群聊
            sendType: this.chatObject.type,
            //扩展消息
            extend: null
          },
        };
        uni.sendSocketMessage({
          data: JSON.stringify(sendInfo)
        })
      },
      // 反馈已读
      handleRead() {
        let sendInfo = {
          code: 3,
          message: {
            //聊天室id
            toId: this.chatObject.id,
            //消息发送人
            userId: this.userInfo.userId,
            //消息类型：0-私聊|1-群聊
            sendType: this.chatObject.type,
          },
        };
        uni.sendSocketMessage({
          data: JSON.stringify(sendInfo)
        })
        store.commit('READ_MESSAGE', this.key);
        store.commit('COUNT_MESSAGE');
      },
      // 发送消息
      handleSend() {
        if(!this.inputText){
          return;
        }
        let sendInfo = {
          code: 2,
          message: {
            //消息文件类型 0-文本|1-图片|2-附件|3-语言|4-撤回
            messageType: 0,
            //聊天室id
            toId: this.chatObject.id,
            //消息发送人
            fromId: this.userInfo.userId,
            //消息发送人账号
            fromName: this.userInfo.userName,
            //消息内容
            content: this.inputText,
            //消息类型：0-私聊|1-群聊
            sendType: this.chatObject.type,
            //扩展内容
            extend: null
          },
        };
        uni.sendSocketMessage({
          data: JSON.stringify(sendInfo)
        })
        this.inputText = "";
      },
      // 获取历史消息
      handleHistoryMessage(scrollFlag=false){
        let limit = this.chatObject["messageList"].length + 10;
        getMessageByChatKey({
          type: this.chatObject.type,
          key: this.chatObject["key"],
          groupId: this.chatObject.id,
          limit: limit
        }).then(res => {
          if(res.data.length > 0){
            this.messageList = res.data;
            this.chatObject["messageList"] = this.messageList;
            let lastMessage = res.data[res.data.length-1];
            this.chatObject["messageLast"] = lastMessage;
            if(lastMessage["sendType"] == 0){
              this.chatObject["messageShow"] = lastMessage["content"];
            }else{
              this.chatObject["messageShow"] = store.getters.getUserName(lastMessage["fromId"], lastMessage["fromName"]) + ": " + lastMessage["content"] 
            }
            this.chatObject["messageTime"] = this.formatDate(lastMessage["sendTime"]);
          }
          if(res.data.length < limit){
            this.chatObject["haveHistory"] = 0;
          }
          
          for(let i=0; i < this.getChatList.length; i++){
            if(this.getChatList[i]["key"] == this.key){
              this.$set(this.getChatList, i, this.chatObject)
              break;
            }   
          }
          if(scrollFlag){
            this.scrollToBottom();
          }
        });
      }
    }
  }
</script>
<style scoped>
  /* 重写外部nine-chat-friend-001.scss可实现样式改变 */
  @import '/uni_modules/vrapile-im/static/style/nine-chat-friend-001.scss';
  @import '/static/style/nine-chat-friend-001.scss';
</style>
