<template>
<div>

    <el-dialog   :visible.sync="dialogVisible" width="70%">
        <div class="app-container">  
             <el-form ref="form" :model="form" :inline="true"  label-width="80px">
                <el-row>
                    <el-col :span="22">
                        <el-form-item label="搜索内容" prop="content" style="width:100%" >
                            <el-input @input="serchInput"  style="width:100%"  v-model="form.content"  placeholder="请输入搜索消息内容"  clearable />
                        </el-form-item>
                    </el-col>
                    <el-col :span="2">
                        <el-form-item >
                            <el-button type="primary" @click="handleQuery">搜索</el-button>
                        </el-form-item>
                    </el-col>
                 </el-row>
              </el-form>

             <el-tabs v-model="activeName" @tab-click="handleTabClick">
                <el-tab-pane label="全部" name="first">
                    <SegRecords :qwUser="qwUser" :conversationId="conversationId" :conversationData="conversationData" :msgType=0  ref="sIMUI0" v-show="!showSearch"></SegRecords>
                 
                    <SegRecords :qwUser="qwUser" :conversationId="conversationId" :conversationData="conversationData" :msgType=0  ref="sIMUI"  @showContextBox="showContextBox"  v-show="showSearch"  ></SegRecords>
                </el-tab-pane>

                <el-tab-pane label="图片与视频" name="second">
                     <SegRecords :qwUser="qwUser" :conversationId="conversationId" :conversationData="conversationData" :msgType=1   ref="sIMUI1"></SegRecords>
                </el-tab-pane>

                <el-tab-pane label="语音" name="third">
                    <SegRecords :qwUser="qwUser" :conversationId="conversationId" :conversationData="conversationData"  :msgType=2  ref="sIMUI2"></SegRecords>
                </el-tab-pane>

                <el-tab-pane label="文件" name="fourth">
                    <SegRecords :qwUser="qwUser" :conversationId="conversationId" :conversationData="conversationData" :msgType=3  ref="sIMUI3"></SegRecords>
                </el-tab-pane>
            </el-tabs>
          
        </div>
    </el-dialog>

     <el-dialog :visible.sync="dialogContextVisible" width="70%">
            <SegRecords :qwUser="qwUser" :conversationId="conversationId" :conversationData="conversationData" :isContext=true :msgType=0  ref="sIMUI4"></SegRecords>
      </el-dialog>

</div>

</template>

<script>

  import LemonMessageVoice from "@/components/LemonUI/components/message/voice";
  import { getContactsByUser,getConversations,getMessageList,getConversation,sendTextMsg,sendImageMsg,getRoomInfo} 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'
  import SegRecords from './segrecords.vue'
  let pages = {};
  export default {
       name: "ChatRecords",
       components: {   
          VideoPlayer,
          SegRecords
       },
       props: {
            qwUser: {
                type: Object,
                default: () => {
                    return {
                          //"userId":1688854331463712,"avatar":"https://wework.qpic.cn/wwpic/258414_QSUkkN5rTMGzwIc_1692169272/0","corpId":1970326754004217,"corpName":"重庆润方数字科技","nickName":"秦先觉","deviceId":"aeff5e72448d4d299e03d7291a21c2ea","phone":null,"account":"1261818888"
                     };
                },
          },
       },
       data(){
           return {
                activeName: 'first',
                dialogVisible:false,
                dialogContextVisible:false,
                theme: "default",
                IMUI:null,
                hideMenuAvatar: false,
                hideMenu: false,
                hideMessageName: false,
                hideMessageTime: true,
                showSearch:false,
                UserData: {
                    id: "1000",
                    displayName: "June",
                    avatar: "https://p.qqan.com/up/2018-4/15244505348390471.jpg",
                },
                contactData:null,
                conversationId:null,
                conversationData:null,
                isFromLogin:false,
                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,
                },
                form: { content:"" },
                // 表单校验
                rules: {
                    content: [
                        { required: true, message: "请输入关键字", trigger: "blur" }
                    ],
                }
           }
       },
       created(){
           
       },
       mounted(){
           
       },
       methods: {
                handleTabClick(tab, event){
                    console.log(tab,tab.index);
                    const sIMUI = this.$refs["sIMUI"+tab.index];
                    sIMUI.open();
                },
                serchInput(value){
                   this.showSearch=value!="";
                   if(value!=""){
                        const sIMUI = this.$refs["sIMUI"];
                        sIMUI.openSearch(value);
                   }else{
                   }
                   console.log("qxj serchInput:"+JSON.stringify(value));
                },
                /** 搜索按钮操作 */
                handleQuery() {
                    if(this.form.content!=""){
                         const sIMUI = this.$refs["sIMUI"];
                         sIMUI.openSearch(this.form.content);
                    }
                },
                showContextBox(message){
                    this.dialogContextVisible=true;
                    setTimeout(() => {
                         const sIMUI = this.$refs["sIMUI4"];
                         console.log("点击了上下文", sIMUI);
                         sIMUI.openContextBox(message);
                    }, 50);
                },
                init(){
                     this.deviceId=this.qwUser.deviceId;
                     this.UserData.id=this.qwUser.userId;
                     this.UserData.displayName=this.qwUser.nickName;
                     this.UserData.avatar=this.qwUser.avatar;
                     const IMUI = this.$refs.IMUI;
                    //IMUI.changeContact(this.queryParams.conversationId);
                    //this.getContacts();  //获取联系人信息
                    this.getConversation();   //获取会话信息
                    ////IMUI.initEmoji(EmojiData); 
                },
                open(qwUser,conversationId,conversationData){
                     this.dialogVisible=true;
                     var converChanged=this.conversationId!=conversationId;
                     this.qwUser=qwUser;
                     this.conversationId=conversationId;
                     this.conversationData=conversationData;
                     this.queryParams.conversationId=conversationId;
                     setTimeout(() => {
                         const sIMUI = this.$refs.sIMUI0;
                         sIMUI.open(converChanged);
                    }, 50);

                },
                getRoomInfo(roomId){
                    getRoomInfo(roomId).then(response => {
                        this.roomMembers=response.members;
                        this.admins=response.members;
                        this.roomInfo=response.detail;
                    });
                },
                getContacts(){  
                    getContactsByUser(this.qwUser.userId).then(response => {
                        this.contactData = response.data;
                        this.$refs.IMUI.initContacts(this.contactData);
                        
                    });
                },
                getConversation(){
                    let that=this;
                    const IMUI = this.$refs.IMUI;
                    //getConversations(this.qwUser.userId).then(response => {
                    //this.conversationData = response.data;
                        IMUI.initConversations(this.conversationData);
                        var fstConversation=this.conversationData[0];
                        if(fstConversation){
                            IMUI.changeContact(fstConversation.conversationId);
                        }
                    //});
                },
                messageTimeFormat(time) {
                   return this.friendlyDate(time);
                },
                changeTheme() {
                  this.theme = this.theme == "default" ? "blue" : "default";
                },
                scrollToTop() {
                  document.body.scrollIntoView();
                },
                openDrawer(position) {
                        const IMUI = this.$refs.IMUI;
                        const params = {
                            position,
                            render: contact => {
                            return (
                                <div style="padding:15px">
                                <h5>{contact.displayName}</h5>
                                <span style="cursor:pointer;" on-click={IMUI.closeDrawer}>关闭抽屉</span>
                                </div>
                            );
                            },
                };
                if (position == "center") {
                    params.width = "50%";
                    params.height = "50%";
                } else if (position == "rightInside") {
                    params.height = "90%";
                    params.offsetY = "10%";
                }
                this.IMUI.openDrawer(params);
                },
                handlePullMessages(contact, next,instance) {
                    const { IMUI } = this.$refs;
                    let isEnd = false;
                    getMessageList(this.queryParams).then(response => {
                        if(response.code==200){
                            isEnd=response.data.isLastPage;
                            next(response.data.list, isEnd);
                            if(!isEnd){
                                pages[contact.conversationId]++;
                            }
                        }
                    });
                },
                handleChangeConversation(conversation, instance) {
                    console.log("qxj ChangeConversation:"+JSON.stringify(conversation));
                    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) {

                },
                //收到消息后添加消息显示
                appendMessageAction(msgData){
                    if(msgData.type=="text" || msgData.type=="image" || msgData.type=="voice"){     //文本   text  image  video  voice 
                        const message = {
                                id: msgData.id,
                                status: msgData.status,
                                type: msgData.type,
                                sendTime: msgData.sendTime,
                                content: msgData.content,
                                params1: "1",
                                params2: "2",
                                toContactId: msgData.toContactId,
                                fromUser: msgData.fromUser,
                        };
                        this.appendRemoteMessage(message);
                    }
                    else if(msgData.type=="file"){
                        const message = {
                                id: msgData.id,
                                status: msgData.status,
                                type: msgData.type,
                                sendTime: msgData.sendTime,
                                content: msgData.content,
                                toContactId: msgData.toContactId,
                                fromUser: msgData.fromUser,
                                fileName:msgData.fileName,
                                fileSize:msgData.fileSize
                        };
                        this.appendRemoteMessage(message);
                    }
                    else{
                        const message = {
                                id: msgData.id,
                                status: msgData.status,
                                type: msgData.type,
                                sendTime: msgData.sendTime,
                                content: msgData.content,
                                toContactId: msgData.toContactId,
                                fromUser: msgData.fromUser,
                        };
                        this.appendRemoteMessage(message);
                    }
                },
                handleMenuAvatarClick() {
                console.log("Event:menu-avatar-click");
                },
                //聊天工具栏点击图片
                handleImageClick() { 
                
                },
                //选择图片框确定按钮回调
                handlePickImageDone(data){
                    console.log("handlePickImageDone:"+JSON.stringify(data));
                    this.pickUploadImgData=data;
                    const IMUI = this.$refs.IMUI;
                    IMUI._handleRemoteImage(data.url);
                },
                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);
                    }
                },

                changeMenuAvatarVisible() {
                   this.hideMenuAvatar = !this.hideMenuAvatar;
                },
                changeMenuVisible() {
                   this.hideMenu = !this.hideMenu;
                },
                changeMessageNameVisible() {
                   this.hideMessageName = !this.hideMessageName;
                },
                changeMessageTimeVisible() {
                   this.hideMessageTime = !this.hideMessageTime;
                },
                removeMessage() {
                    const { IMUI } = this.$refs;
                    const messages = IMUI.getCurrentMessages();
                    const id = messages[messages.length - 1].id;
                    if (messages.length > 0) {
                        IMUI.removeMessage(id);
                    }
                },
                updateMessage() {
                    const { IMUI } = this.$refs;
                    const messages = IMUI.getCurrentMessages();
                    const message = messages[messages.length - 1];
                    if (messages.length > 0) {
                        const update = {
                        id: message.id,
                        status: "succeed",
                        type: "file",
                        fileName: "被修改成文件了.txt",
                        fileSize: "4200000",
                        };
                        if (message.type == "event") {
                        update.fromUser = this.user;
                        }
                        IMUI.updateMessage(update);
                        IMUI.messageViewToBottom();
                }
                },
                appendCustomMessage() {
                    const { IMUI } = this.$refs;
                    const message = {
                        id: generateRandId(),
                        status: "succeed",
                        type: "voice",
                        sendTime: getTime(),
                        content: "语音消息",
                        params1: "1",
                        params2: "2",
                        toContactId: "contact-1",
                        fromUser: this.user,
                    };
                    IMUI.appendMessage(message, true);
                },
                appendMessage() {
                    const { IMUI } = this.$refs;
                    const contact = IMUI.currentContact;
                    const message = generateMessage("contact-3");
                    message.fromUser = {
                        ...message.fromUser,
                        ...this.user,
                    };
                    IMUI.appendMessage(message, true);
                    console.log("🚀 ~ file: App.vue ~ line 1508 ~ appendMessage ~ message", message)
                },
                appendEventMessage() {
                    const { IMUI } = this.$refs;
                    const message = {
                        id: generateRandId(),
                        type: "event",
                        content: (
                        <span>
                            邀请你加入群聊{" "}
                            <span
                            style="color:#333;cursor:pointer"
                            on-click={() => alert("OK")}>
                            接受
                            </span>
                        </span>
                        ),
                        toContactId: "contact-3",
                        sendTime: getTime(),
                    };
                    IMUI.appendMessage(message, true);
                },
                appendRemoteMessage(message) {  //从服务端返回的消息
                    const { IMUI } = this.$refs;
                    IMUI.appendMessage(message, true);
                },
                updateContact() {
                    this.$refs.IMUI.updateContact({
                        id: "contact-3",
                        unread: 10,
                        displayName: generateRandWord(),
                        lastSendTime: getTime(),
                        lastContent: "修改昵称为随机字母",
                     });
                },
                handleChangeMenu() {
                     console.log("Event:change-menu");
                },
                openCustomContainer() {

                },
                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>