<template>
<div>

    <div class="imui-center qq-lemon-imui">
        <lemon-records  class="lemon-slot"
            :width="windowWidth"
            :height="windowHeight"
            :user="UserData"
            ref="IMUI"
            :sendText="sendText"
            :theme="theme"
            :show-context="showContext"
            :hide-menu="hideMenu"
            :hide-menu-avatar="hideMenuAvatar"
            :hide-message-name="hideMessageName"
            :hide-message-time="hideMessageTime"
            :messageTimeFormat="messageTimeFormat"
            @change-menu="handleChangeMenu"
            @pull-messages="handlePullMessages"
            @pull-up-messages="handleMoreMessages"
            @change-contact="handleChangeContact"
            @change-conversation="handleChangeConversation"
            @message-click="handleMessageClick"
            @context-click="handleContextClick"
            @menu-avatar-click="handleMenuAvatarClick">
            <template #cover>
                    <div class="cover">
                        <!-- <i class="lemon-icon-message"></i>
                        <p>
                            <b>自定义封面 Lemon</b>IMUI
                        </p> -->
                    </div>
            </template>
        </lemon-records>

    </div>

    <el-dialog :visible.sync="dialogImgVisible" append-to-body width="35%">
        <img style="width:100%;height:auto" :src="dialogImageUrl" alt="" />
    </el-dialog>

     <el-dialog :visible.sync="dialogVideoVisible"
                append-to-body
               :close-on-click-modal="false"
               :destroy-on-close="true"
               :width="aplayer.pWidth"
               :height="aplayer.height"
               @close="dialogVideoVisible=false"
               ref="player">
              <videoPlayer  :width="aplayer.width" :height="aplayer.height"  :videoWidth="aplayer.videoWidth"
                :videoHeight="aplayer.videoHeight"   :vid="aplayer.vid"  :autoplay="true"
                :source="dialogVideoUrl" :cover="dialogVideoCover" ref="player">
              </videoPlayer>
       </el-dialog>
</div>

</template>

<script>

  import LemonMessageVoice from "@/components/LemonUI/components/message/voice";
  import { getContactsByUser,getConversations,getMessageList} from '@/api/qw/im';
  import Conversations from "@/components/LemonUI/database/conversations";
  import EmojiData from "@/components/LemonUI/database/emoji";
  import '@/components/LemonUI/index.css';
  import VideoPlayer from '@/components/VideoPlayer/VueAliplayer'
  let pages = {};
  export default {
       name: "SegRecords",
       components: {
          VideoPlayer,
       },
       props: {
          qwUser: {
                type: Object,
                default: () => {
                    return { };
                },
          },
          conversationId: {
                type: String,
                default: "default",
          },
          conversationData: {
                type: Array,
                default: () => {
                    return [];
                },
          },
          msgType: {
                type: Number,
                default: 0,
          },
          isContext: {
                type: Boolean,
                default: false,
          },

      },
       data(){
           return {
                theme: "default",
                IMUI:null,
                hideMenuAvatar: false,
                hideMenu: false,
                hideMessageName: false,
                hideMessageTime: true,
                showContext:false,
                showQW:false,
                messageId:null,
                UserData: {
                    id: "1000",
                    displayName: "June",
                    avatar: "https://p.qqan.com/up/2018-4/15244505348390471.jpg",
                },
                dialogImgVisible:false,
                dialogImageUrl: '',
                dialogVideoVisible:false,
                dialogVideoUrl:'',
                dialogVideoCover:'',
                imageArr:[],
                pickUploadImgData:null,
                aplayer: {
                    vid: "bf9b7e4a36d84aea8cee769765fbc28b",
                    pWidth:"1040px",
                    width:"1000px",
                    height:"900px",
                    videoWidth:"1000px",
                    videoHeight:"900px"

                },
                player: null,
                roomMembers:[],
                roomAdmins:[],
                roomInfo:null,
                windowWidth: document.documentElement.clientWidth*0.95,  //实时屏幕宽度
                windowHeight: document.documentElement.clientHeight*0.7,   //实时屏幕高度
                queryParams: {
                    pageNum: 1,
                    pageSize: 10,
                    conversationId: null,
                },
                isLoaded:false,
                sendText:"",

           }
       },
       created(){

       },
       mounted(){
            //this.deviceId=this.qwUser.deviceId;
            this.UserData.id=this.qwUser.userId;
            this.UserData.displayName=this.qwUser.nickName;
            this.UserData.avatar=this.qwUser.avatar;
            this.queryParams.msgType=this.msgType;
            //this.open();

       },
       methods: {
                /** 搜索按钮操作 */
                handleQuery() {

                },
                handleClose(){

                },
                init(){
                    const IMUI = this.$refs.IMUI;
                    this.getConversation();   //获取会话信息
                    ////IMUI.initEmoji(EmojiData);
                },
                open(converChanged){
                      if(this.isLoaded && !converChanged){
                          return;
                      }
                      pages=[];
                      setTimeout(() => {
                          const IMUI = this.$refs.IMUI;
                          this.init();
                          this.isLoaded=true;
                    }, 0);
                },
                //消息关键字搜索
                openSearch(searchVal){
                      pages=[];
                      this.queryParams.searchVal=searchVal;
                      this.showContext=true;
                      setTimeout(() => {
                          const IMUI = this.$refs.IMUI;
                          this.init();
                    }, 100);
                },
                //查看上下文
                openContextBox(message){
                      pages=[];
                      this.queryParams.messageId=message.id;
                      this.queryParams.pullAct=0;//下拉刷新
                      setTimeout(() => {
                          const IMUI = this.$refs.IMUI;
                          this.init();
                    }, 100);
                },
                getConversation(){
                      const IMUI = this.$refs.IMUI;
                      if(this.conversationData.length==0){
                          getConversations(this.qwUser.userId).then(response => {
                                const conversationData = response.data;
                                IMUI.initConversations(conversationData);
                                IMUI.clearMessages(this.conversationId);
                                IMUI.currentContactId="";
                                IMUI.changeContact(this.conversationId);
                          });
                       }else{
                                IMUI.initConversations(this.conversationData);
                                IMUI.clearMessages(this.conversationId);
                                IMUI.currentContactId="";
                                IMUI.changeContact(this.conversationId);
                        }
                },
                messageTimeFormat(time) {
                   return this.friendlyDate(time);
                },
                changeTheme() {
                  this.theme = this.theme == "default" ? "blue" : "default";
                },
                scrollToTop() {
                  document.body.scrollIntoView();
                },
                handlePullMessages(contact, next,instance) {
                    const { IMUI } = this.$refs;
                    let isEnd = false;
                    if(this.isContext){
                         this.queryParams.pullAct=0;//下拉刷新
                    }
                    console.log("qxj handlePullMessages:"+JSON.stringify(this.queryParams));
                    getMessageList(this.queryParams).then(response => {
                        if(response.code==200){
                            isEnd=response.data.isLastPage;
                            next(response.data.list, isEnd);
                            if(!isEnd){
                                if(this.isContext){
                                    pages[contact.conversationId+this.queryParams.pullAct]++;
                                    this.queryParams.pageNum=pages[contact.conversationId+this.queryParams.pullAct];
                                }else{
                                    pages[contact.conversationId]++;
                                    this.queryParams.pageNum=pages[contact.conversationId];
                                }
                            }
                        }
                    });
                },
                handleMoreMessages(contact, next,instance) {
                    const { IMUI } = this.$refs;
                    let isEnd = false;
                    console.log("qxj handleMoreMessages:"+JSON.stringify(this.queryParams));
                     if(this.isContext){
                         this.queryParams.pullAct=1;//上拉加载更多
                    }
                    getMessageList(this.queryParams).then(response => {
                        if(response.code==200){
                            isEnd=response.data.isLastPage;
                            next(response.data.list, isEnd);
                            if(this.isContext){
                                pages[conversation.conversationId+this.queryParams.pullAct]++;
                            }else{
                                pages[contact.conversationId]++;
                            }
                        }
                    });
                },

                handleChangeConversation(conversation, instance) {
                    console.log("qxj ChangeConversation:"+JSON.stringify(conversation));
                    if(this.isContext){
                        if (!pages[conversation.conversationId+this.queryParams.pullAct]){
                              pages[conversation.conversationId+this.queryParams.pullAct] =1;
                        }
                        this.queryParams.pageNum=pages[conversation.conversationId+this.queryParams.pullAct];
                    }
                    else{
                        if (!pages[conversation.conversationId]){
                              pages[conversation.conversationId] =1;
                        }
                        this.queryParams.pageNum=pages[conversation.conversationId];
                    }
                    this.queryParams.conversationId=conversation.conversationId;
                    if(conversation.unread>0){
                        conversation.unread=0;
                        instance.updateContact(conversation);
                    }
                    instance.closeDrawer();
                },
                handleChangeContact(contact, instance) {

                },

                handleMenuAvatarClick() {
                   console.log("Event:menu-avatar-click");
                },
                tooglePlayVideo(data){
                    this.dialogVideoVisible=true;
                    this.dialogVideoUrl=data.content;
                    this.dialogVideoCover=data.url;
                    const player = this.$refs.player.instance
                    player && player.play()
                },
                handleMessageClick(e, key, message, instance) {
                    console.log("点击了消息", e, key, message);
                    //console.log("qxj message:"+JSON.stringify(message));
                    if(message.type=="image"){
                        var url=!!message.url?message.url:message.content;
                        this.handlePicturePreview(url);
                    }
                    else if(message.type=="video"){
                        this.tooglePlayVideo(message);
                    }
                    else if(message.type=="file"){

                    }
                    if (key == "status") {
                        instance.updateMessage({
                        id: message.id,
                        status: "going",
                        content: "正在重新发送消息...",
                        });
                        setTimeout(() => {
                        instance.updateMessage({
                            id: message.id,
                            status: "succeed",
                            content: "发送成功",
                        });
                        }, 2000);
                    }
                },
                handleContextClick(e, key, message, instance){
                    this.$emit("showContextBox",message);
                },
                changeMenuAvatarVisible() {
                   this.hideMenuAvatar = !this.hideMenuAvatar;
                },
                changeMenuVisible() {
                   this.hideMenu = !this.hideMenu;
                },
                changeMessageNameVisible() {
                   this.hideMessageName = !this.hideMessageName;
                },
                changeMessageTimeVisible() {
                   this.hideMessageTime = !this.hideMessageTime;
                },

                updateContact() {
                    this.$refs.IMUI.updateContact({
                        id: "contact-3",
                        unread: 10,
                        displayName: generateRandWord(),
                        lastSendTime: getTime(),
                        lastContent: "修改昵称为随机字母",
                     });
                },
                handleChangeMenu() {
                     console.log("Event:change-menu");
                },
                handlePicturePreview(url) {
                    this.dialogImageUrl = url;
                    this.dialogImgVisible=true;
                },
       }
  }

</script>



<style lang="scss" scoped>
    .app-container{
       padding-top:0;
    }
    .imui-center{
        margin-bottom:"60px";
        display: flex;
        align-items: center;
        justify-content: center;
        // height: 80vh;
    }
    .lemon-wrapper{
        border:"1px solid #ddd";
        height: "60%" !important;
    }
    .lemon-drawer{
        border:"1px solid #ddd";
        border-left:"0";
    }
    .more {
        font-size: 12px;
        line-height: 24px;
        height: 24px;
        position: absolute;
        top: 14px;
        right: 14px;
        cursor: pointer;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        color: #f1f1f1;
        display: inline-block;
        border-radius: 4px;
        background: #111;
        padding: 0 8px;
    }

    /deep/.el-dialog__headerbtn{
         top:10px;
    }

    /deep/.el-form--inline .el-form-item{
        display: flex;
    }
    /deep/.el-form-item--medium .el-form-item__content{
        flex: 1;
        margin-right: 20px;
    }

    /deep/.el-dialog:not(.is-fullscreen) {
        margin-top: 0 !important;
    }

    // /deep/.el-dialog__header{
    //     padding-bottom: 0;
    // }

</style>


<style lang="stylus">
   .lemon-container__title
     padding-bottom:10px;
   .slot-group
      width:200px;
      .slot-group-title
        padding:0 0 10px 0;
        .slot-group-notice
           padding: 10px 10px;

      .slot-search
           width:calc(100% - 20px) ;
           margin:5px 10px;
           padding:3px 0px;

      .slot-group-member
          display: flex;
          padding: 5px 0;
          flex:1;
          font-size: 14px;
          align-items: center;
          .avatar
              width: 30px;
              height: 30px;
              line-height: 30px;
              margin-right:5px;
              img
                vertical-align: middle;
                border-style: none;
                width: 100%;
                height: 100%;
                line-height: 30px;
                border-radius: 50%;
</style>
