<template>
  <div class="chat-list-panel" ref="chatListPanel" :style="styles">
    <p class="historyLine" v-if="canLoadHistory">-- 下拉获取历史记录 --</p>
    <p class="historyLine" v-else>-- 已无更多记录 --</p>
    <ul class="chat-list" ref="mfn">
      <chat-item v-for="msg in msglist" :key="msg.id" :info="msg" @on-click-targetinfo="onClickTargetinfo"></chat-item>
    </ul>

    <!-- 聊天对象信息 -->
    <div class="bg" style="width:100%;height:100%;position:fixed;left:0;top:0;z-index:8888;background:rgba(0,0,0,0.5);" v-if="isbg"></div>
    <popup :reverse="isReverse"  v-model="showtargetInfo" :mask="mask" :history-model="historyModel" id="chat-targetinfo-popup" @on-hide="onPopupHide" @on-show="onPopupShow" v-if="targetInfo != null">
      <div class="add_father">
        <span class="close" @click="closeAdd"><i class="zhidian-font zf-close"></i></span>  
        <div class="tx_targetinfo">
          <img :src='imgURL' alt="">
        </div>
        <div class="info1">
          <span class="infoDetail">联系方式</span><span class="infoDetail1">
            <a :href="'tel:'+targetInfo.phone" v-if="targetInfo.phone">{{targetInfo.phone}}</a>
          </span>
        </div>
        <div class="info1" v-if="targetInfo.villageName !=null && targetInfo.villageName != ''">
          <span class="infoDetail">所在小区</span><span  class="infoDetail1">{{targetInfo.villageName}}</span>
        </div>
        <div class="info1" v-if="targetInfo.centerAddress !=null && targetInfo.centerAddress != ''">
          <span class="infoDetail">所在小区</span><span  class="infoDetail1">{{targetInfo.centerAddress}}</span>
        </div>
        <div class="info1" v-if="targetInfo.teacherNum!='' && targetInfo.teacherNum!=null">
          <span class="infoDetail">他的老师数</span><span  class="infoDetail1">{{targetInfo.teacherNum}}位</span>
        </div>
        <div class="info1" v-if="targetInfo.parentNum!='' && targetInfo.parentNum!=null">
          <span class="infoDetail">他的学生数</span><span  class="infoDetail1">{{targetInfo.parentNum}}位</span>
        </div>
        <div class="info1" v-if="targetInfo.studentsNum!='' && targetInfo.studentsNum!=null">
          <span class="infoDetail">他的学生数</span><span  class="infoDetail1">{{targetInfo.studentsNum}}位</span>
        </div>
        <div class="info1">
          <span class="infoDetail">距离</span>
          <div v-if="targetInfo.userType != 'CENTER'">
            <span class="infoDetail1" v-if="targetInfo.longitude===null && targetInfo.latitude===null">未知</span>
            <span class="infoDetail1" v-else-if="targetInfo.userlatitude==='' && targetInfo.userlongitude==='' ">未知</span>
            <span class="infoDetail1" v-else>{{((targetInfo.disance)/1000).toFixed(1)}}km</span> 
          </div>   
          <div v-else>
            <span class="infoDetail1">未知</span>
          </div> 
        </div>
          
      </div>
    </popup>
  </div>
</template>
<script>
import ChatItem from './chatItem.vue'
export default {
  components: {
    ChatItem
  },
  props: {
    value: Boolean,
    type: String, // 类型，chatroom, session
    msglist: {
      type: Array,
      default () {
        return []
      }
    },
    canLoadHistory: Boolean
  },
  data() {
    return {
      isReverse: false,
      mask: false,
      isbg: false,
      showtargetInfo: false,
      hmInfo: {},
      imgURL:'',
      historyModel:false
    }
  },
  methods:{
    goTop(){
     this.$refs.mfn.style.marginBottom = 4.2 + 'rem'
    },
    goBack() {
     this.$refs.mfn.style.marginBottom = 0.5 + 'rem'
    },
    topSmile() {
     this.$refs.mfn.style.marginBottom = 7 + 'rem'
    },
    topSays() {
     this.$refs.mfn.style.marginBottom = 7 + 'rem'
    },
    //查看targrt信息
    onClickTargetinfo(){
      // console.log('弹出信息框---')
      if(this.$store.state.IMStore.targetInfo != null ){
        this.isbg = true
        this.showtargetInfo = true
        this.imgURL="//www.image.sharingschool.net/"+this.targetInfo.imageKey
      }else{
        this.isbg = false
        this.showtargetInfo = false
      }      
    },
    //关闭
    closeAdd() {
      this.isbg = false
      this.showtargetInfo = false
    },
    onPopupShow() {},
    onPopupHide() {},
  },
  computed:{
    targetInfo(){
      return this.$store.state.IMStore.targetInfo
    },
    styles(){
      let minHeight = document.body.clientHeight - 56
      return {
        height:`${minHeight}px`
      }
      // return {
      //   height:'auto'
      // }
    }
  },
  watch:{
    msglist(){
      this.$nextTick(() => {
        setTimeout(()=>{
          this.$refs.chatListPanel.scrollTop = this.$refs.chatListPanel.scrollHeight
        },100)
      })
    }
  }
}
</script>
