<template>
  <div class="chatui" ref="chatScroll">
    <chat-list :canLoadHistory="canLoadHistory"  type='session' :msglist="msglist" v-touch:swipedown="loadMore" ref="chatList" ></chat-list>
    <chat-editor :model="model" :to="to" :type="chatType" :scene="scene" :session-type="sessionType" :extra="extra" @on-click-mfn="onClickMfn" @on-click-back="onClickBack" @on-click-topsmile="onClickTopsmile" @on-click-topsays="onClickTopsays" ></chat-editor>
  </div>
</template>
<script>
import ChatList from './chatList.vue'
import ChatEditor from './chatEditor.vue'
import ChatEmoji from './chatEmoji.vue'
import util from '../../../src/utils'

import defaultLogo from '../assets/default.png'

export default {
  name: "Chat",
  data() {
    return {
      chatType: 'session'
    }
  },
  props: {
    // 聊天目标对象
    target: {
      type: Object,
      required: true,
      validator: (obj) => {
        if (!obj.sessionId) {
          throw new Error('目标对象的 sessionId 不能为空')
        }
        if (!obj.headImg) {
          // console.log('目标对象的头像图片为空，给默认头像')
          obj.headImg = defaultLogo
        }
        if (!obj.name) {
          throw new Error('目标对象的名称不能为空')
        }
        return true
      }
    },
    imUserInfo: {
      type: Object,
      required: true,
      validator: (obj) => {
        // if (!obj.uid) {
        //   throw new Error('uid 不能为空')
        // }
        // if (!obj.sdktoken) {
        //   throw new Error('sdktoken 不能为空')
        // }
        if (!obj.headImg) {
          // console.log('头像为空，给默认头像')
          obj.headImg = defaultLogo
        }
        if (!obj.sessionType) {
          throw new Error('sessionType 不能为空')
        }
        return true
      }
    },
    extra:{
      type: Object,
      default: ()=>{
        return {}
      }
    },
    model:{
      type: String,
      default: ()=>{
        return 'normalPlus'
      }
    }
  },
  components: {
    ChatList,
    ChatEditor
  },
  mounted() {
    this.$store.dispatch('initTargetInfo', this.target)
    
    this.$store.dispatch('setCurrSession', this.sessionId)

    let fromUserInfo = Object.assign(this.$store.state.IMStore.imUserInfo,this.imUserInfo) 

    this.$store.dispatch('initIMUserInfo', fromUserInfo)
    // this.$store.dispatch('initEnvironment', this.environment)
    // this.$store.dispatch('connect', {
    //   uid: this.imUserInfo.uid,
    //   sdktoken: this.imUserInfo.sdktoken
    // })
    this.$store.dispatch('resetNoMoreHistoryMsgs')
  },
  computed: {
    sessionId() {
      return "p2p-" + this.target.sessionId.toLowerCase()
    },
    scene() {
      return util.parseSession(this.sessionId).scene
    },
    to() {
      return util.parseSession(this.sessionId).to
    },
    sessionType(){
      return this.imUserInfo.sessionType
    },
    msglist() {
      let msgs = this.$store.state.IMStore.currSessionMsgs
      // console.log("MMMMMMM:::::",msgs)
      return msgs
    },
    canLoadHistory() {
      return !this.$store.state.IMStore.noMoreHistoryMsgs
    }
  }, // 离开该页面，此时重置当前会话
  destroyed() {
    // document.body.style.transform = 'translate3d(0,0,0)'
    this.$store.dispatch('resetCurrSession')
    this.$destroy()
  },
  watch: {
    msglist(newValue) {
      this.$nextTick(() => {
        // this.$refs.chatScroll.scrollTop = this.$refs.chatScroll.scrollHeight
        // document.getElementsByClassName('chatui')[0].scrollTop = this.$refs.chatScroll.scrollHeight
        // console.log("nextTick:::scrollTop:::::",this.$refs.chatScroll.scrollTop)
        // console.log("nextTick:::scrollHeight:::::",this.$refs.chatScroll.scrollHeight)
        // this.$refs.chatScroll.scrollTop = '560'
        
        // setTimeout(()=>{
        //   this.$refs.chatScroll.scrollTop = this.$refs.chatScroll.scrollHeight
        // },100)
      })
    }
  },
  methods: {
    loadMore() {
      if (this.canLoadHistory) {
        this.getHistoryMsgs()
      }
    },
    getHistoryMsgs() {
      this.$store.dispatch('getHistoryMsgs', {
        scene: this.scene,
        to: this.to
      })
    },
    onClickMfn() {
      this.$refs.chatList.goTop()   
       this.$refs.chatScroll.scrollTop = this.$refs.chatScroll.scrollHeight 
    },
    onClickBack() {
      this.$refs.chatList.goBack()
       // this.$refs.chatScroll.scrollTop = this.$refs.chatScroll.scrollHeight
    },
    onClickTopsmile() {
      this.$refs.chatList.topSmile()
       this.$refs.chatScroll.scrollTop = this.$refs.chatScroll.scrollHeight
    },
    onClickTopsays() {
      this.$refs.chatList.topSays()
       this.$refs.chatScroll.scrollTop = this.$refs.chatScroll.scrollHeight
    }
  }
}
</script>
