<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  style="width:100%"  v-model="form.content"  placeholder="请输入搜索消息内容" />
                        </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>

            <div class="imui-center qq-lemon-imui">
                <lemon-records  class="lemon-slot"
                    :width="windowWidth"
                    :height="windowHeight"
                    :user="UserData"
                    ref="IMUI"
                    :theme="theme"
                    :hide-menu="hideMenu"
                    :hide-menu-avatar="hideMenuAvatar"
                    :hide-message-name="hideMessageName"
                    :hide-message-time="hideMessageTime"
                    :messageTimeFormat="messageTimeFormat"
                    @change-menu="handleChangeMenu"
                    @pull-messages="handlePullMessages"
                    @change-contact="handleChangeContact"
                    @change-conversation="handleChangeConversation"
                    @message-click="handleMessageClick"
                    @menu-avatar-click="handleMenuAvatarClick"
                    @pick-image="handleImageClick">

                    <template #cover>
                            <div class="cover">
                                <!-- <i class="lemon-icon-message"></i>
                                <p>
                                    <b>自定义封面 Lemon</b>IMUI
                                </p> -->
                            </div>
                    </template>

                    <template #message-title="contact">
                        <div>
                            <div style="display:flex;justify-content:space-between">
                                <span>{{contact.displayName}}</span>
                                <span style="font-size:12px;">
                                <!-- <span>打开抽屉：</span>
                                <span style="cursor:pointer;"  @click="openDrawer('right')">
                                    右侧  |
                                </span>
                                <span style="cursor:pointer;" @click="openDrawer('rightInside')">
                                    右侧内部  |
                                </span>
                                <span style="cursor:pointer;" @click="openDrawer('center')">
                                    居中
                                </span> -->
                                </span>
                            </div>
                            <!-- <div v-if="contact.isGroup" class="slot-group-menu">
                                <span>聊天</span>
                                <span>公告</span>
                                <span>相册</span>
                                <span>文件</span>
                                <span>活动</span>
                                <span>设置(左键弹出菜单)</span>
                            </div> -->
                        </div>
                    </template>
                </lemon-records>

            </div>


        </div>
    </el-dialog>

    <el-dialog :visible.sync="dialogImgVisible">
        <img width="100%" :src="dialogImageUrl" alt="" />
    </el-dialog>

     <el-dialog :visible.sync="dialogVideoVisible"
               :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,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'
  let pages = {};
  export default {
       name: "ChatRecords",
       components: {
          VideoPlayer,
       },
       data(){
           return {
                dialogVisible:false,
                theme: "default",
                IMUI:null,
                hideMenuAvatar: false,
                hideMenu: false,
                hideMessageName: false,
                hideMessageTime: true,
                qwUser:{
                    "userId":1688854331463712,"avatar":"https://wework.qpic.cn/wwpic/258414_QSUkkN5rTMGzwIc_1692169272/0","corpId":1970326754004217,"corpName":"重庆润方数字科技","nickName":"秦先觉","deviceId":"aeff5e72448d4d299e03d7291a21c2ea","phone":null,"account":"1261818888"
                },
                showQW:false,
                UserData: {
                    id: "1000",
                    displayName: "June",
                    avatar: "https://p.qqan.com/up/2018-4/15244505348390471.jpg",
                },
                contactData: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(){
            this.deviceId=this.qwUser.deviceId;
            this.UserData.id=this.qwUser.userId;
            this.UserData.displayName=this.qwUser.nickName;
            this.UserData.avatar=this.qwUser.avatar;
       },
       methods: {
                /** 搜索按钮操作 */
                handleQuery() {

                },
                init(){
                    const IMUI = this.$refs.IMUI;
                    //IMUI.changeContact(this.queryParams.conversationId);
                    //this.getContacts();  //获取联系人信息
                    this.getConversation();   //获取会话信息
                    ////IMUI.initEmoji(EmojiData);
                },
                open(conversationId,conversationData){
                     this.conversationData=conversationData;
                     this.queryParams.conversationId=conversationId;
                     console.log("qxj conversationId:"+conversationId);
                     this.dialogVisible=true;
                      setTimeout(() => {
                         const IMUI = this.$refs.IMUI;
                         console.log("qxj records imui:"+IMUI);
                         this.init();
                    }, 500);
                },
                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__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>
