<template>
  <div class="input-root">
    <div class="msg-input-wrapper">
      <!-- 当回复他人消息时，输入框上方需要展示被回复消息相关内容 -->
      <div v-if="isReplyMsg" class="reply-message-wrapper">
        <div class="reply-message-close" @tap="removeReplyMsg">
          <Icon
            color="#929299"
            :iconStyle="{ fontWeight: '200' }"
            :size="13"
            type="icon-guanbi1"
          />
        </div>
        <div class="reply-line">｜</div>
        <div class="reply-title">{{ t('replyText') }}</div>
        <div class="reply-to">
          <Appellation
            :account="replyMsg && replyMsg.senderId"
            :team-id="
              props.conversationType ===
              V2NIMConst.V2NIMConversationType.V2NIM_CONVERSATION_TYPE_TEAM
                ? to
                : ''
            "
            color="#929299"
            :fontSize="13"
          >
          </Appellation>
        </div>
        <div class="reply-to-colon">:</div>
        <div
          v-if="replyMsg && replyMsg.messageClientId === 'noFind'"
          class="reply-noFind"
        >
          {{ t('replyNotFindText') }}
        </div>
        <div class="reply-message" v-else>
          <message-one-line
            v-if="
              replyMsg &&
              replyMsg.messageType ===
                V2NIMConst.V2NIMMessageType.V2NIM_MESSAGE_TYPE_TEXT
            "
            :text="replyMsg && replyMsg.text"
          ></message-one-line>
          <div v-else>
            {{
              replyMsg
                ? '[' + REPLY_MSG_TYPE_MAP[replyMsg.messageType] + ']'
                : ''
            }}
          </div>
        </div>
      </div>
      <!-- 输入框上按钮组 -->
      <div class="msg-button-group">
        <div
          @tap="handleAudioVisible"
          v-if="!(isWeb || isHarmonyOs || isGroupSend)"
          class="msg-input-button"
        >
          <Icon
            v-if="audioPanelVisible"
            :size="20"
            type="audio-btn-selected"
            key="audio-btn-selected"
          />
          <Icon v-else :size="20" type="icon-audio" key="icon-audio" />
        </div>
        <div class="msg-input-button">
          <Icon @tap="handleEmojiVisible" :size="20" type="icon-biaoqing" />
        </div>
        <div class="msg-input-button">
          <div>
            <Icon @tap="handleSendImageMsg" :size="20" type="icon-tupian" />
          </div>
        </div>
        <div class="msg-input-button">
          <Icon @tap="handleSendMoreVisible" type="send-more" :size="20" />
        </div>
        <!-- <div class="msg-input-button">
          <Icon @tap="handleSetting" type="icon-shezhi" :size="20" />
        </div> -->
      </div>
      <div v-if="inputVisible" class="msg-input">
        <!-- 当从表情面板切换到文字输入时，直接唤起键盘，会导致input框滚动消失，故此处需要用EmojiInput兼容下，保证先隐藏表情面板，再弹出键盘 -->
        <div
          v-show="showEmojiInput"
          @click="onClickEmojiInput"
          class="input-emoji"
        >
          <div v-if="inputText" class="input-text">{{ inputText }}</div>
          <div v-else class="input-placeholder">
            {{
              isTeamMute ? t('teamMutePlaceholder') : t('chatInputPlaceHolder')
            }}
          </div>
        </div>
        <input
          v-show="!showEmojiInput"
          :focus="isFocus"
          class="msg-input-input"
          :maxlength="-1"
          :placeholder="
            isTeamMute ? t('teamMutePlaceholder') : t('chatInputPlaceHolder')
          "
          v-model="inputText"
          type="text"
          :disabled="isTeamMute"
          :confirm-hold="true"
          cursor-spacing="20"
          adjust-position="true"
          confirm-type="send"
          @confirm="handleSendTextMsg"
          @blur="handleInputBlur"
          @input="handleInput"
          id="msg-input"
        />
      </div>
      <!-- 表情面板 -->
      <div v-if="emojiVisible" class="msg-emoji-panel" @click.stop="() => {}">
        <Face
          @emojiClick="handleEmoji"
          @emojiDelete="handleEmojiDelete"
          @emojiSend="handleSendTextMsg"
        />
      </div>
      <!-- 发送语音消息面板 -->
      <div
        v-if="audioPanelVisible"
        class="msg-audio-panel"
        @click.stop="() => {}"
      >
        <VoicePanel @handleSendAudioMsg="handleSendAudioMsg"></VoicePanel>
      </div>
      <!-- 发送更多面板 -->
      <div
        v-if="sendMoreVisible"
        class="send-more-panel"
        @click.stop="() => {}"
      >
        <div class="send-more-panel-item-wrapper" v-if="!(isGroupSend)">
          <div
            class="send-more-panel-item"
            @tap="(event:any) => handleSendVideoMsg('camera', event)"
          >
            <Icon type="icon-paishe" :size="30"></Icon>
          </div>
          <div class="icon-text">{{ t('shootText') }}</div>
        </div>
        <div class="send-more-panel-item-wrapper" v-if="!(isGroupSend)">
          <div
            class="send-more-panel-item"
            @tap="(event: any) => handleSendVideoMsg('album', event)"
          >
            <Icon type="icon-shipin2" :size="30"></Icon>
          </div>
          <div class="icon-text">{{ t('albumText') }}</div>
        </div>
        <div class="send-more-panel-item-wrapper">
          <div
            class="send-more-panel-item"
            @tap="(event: any) => handleCustom('reply', event)"
          >
            <image :src="quickImg" mode="widthFix"></image>
          </div>
          <div class="icon-text">快捷回复</div>
        </div>
        <div class="send-more-panel-item-wrapper">
          <div
            class="send-more-panel-item"
            @tap="(event: any) => handleCustom('hj', event)"
          >
          <image :src="quickImg" mode="widthFix"></image>
          </div>
          <div class="icon-text">患教</div>
        </div>
        <div class="send-more-panel-item-wrapper">
          <div
            class="send-more-panel-item"
            @tap="(event: any) => handleCustom('outpatient', event)"
          >
           <image :src="chuzhenImg" mode="widthFix"></image>
          </div>
          <div class="icon-text">出/停诊公告</div>
        </div>
        <div class="send-more-panel-item-wrapper">
          <div
            class="send-more-panel-item"
            @tap="(event: any) => handleCustom('mall', event)"
          >
            <image :src="mallImg" mode="widthFix"></image>
          </div>
          <div class="icon-text">商城</div>
        </div>

        <!-- <div class="send-more-panel-item-wrapper">
          <div
            class="send-more-panel-item"
            @tap="(event: any) => handleCustom('hospital', event)"
          >
            <image :src="hospitalImg" mode="widthFix"></image>
          </div>
          <div class="icon-text">互联网医院</div>
        </div> -->
        <!-- 音频呼叫 -->
        <!-- <div
          class="send-more-panel-item-wrapper"
          v-if="
            isAndroidOrIosApp &&
            props.conversationType !==
              V2NIMConst.V2NIMConversationType.V2NIM_CONVERSATION_TYPE_TEAM
          "
        >
          <div class="send-more-panel-item" @tap="handleCall(1)">
            <Icon type="icon-audio-call" :size="30"></Icon>
          </div>
          <div class="icon-text">{{ t('voiceCallText') }}</div>
        </div> -->

        <!-- 视频呼叫 -->
        <!-- <div
          class="send-more-panel-item-wrapper"
          v-if="
            isAndroidOrIosApp &&
            props.conversationType !==
              V2NIMConst.V2NIMConversationType.V2NIM_CONVERSATION_TYPE_TEAM
          "
        >
          <div class="send-more-panel-item" @tap="() => handleCall(2)">
            <Icon type="icon-video-call" :size="30"></Icon>
          </div>
          <div class="icon-text">{{ t('videoCallText') }}</div>
        </div> -->
        <!-- <div
          v-if="isWeb"
          class="send-more-panel-item-wrapper"
          @tap="handleSendFileMsg"
        >
          <div class="send-more-panel-item">
            <Icon type="icon-file" :size="30"></Icon>
          </div>
          <div class="icon-text">{{ t('fileText') }}</div>
        </div> -->
      </div>
    </div>
    <!-- @消息相关 popup -->
    <UniPopup
      ref="popupRef"
      background-color="#ffffff"
      type="bottom"
      mask-background-color="rgba(0,0,0,0.4)"
      @change="onPopupChange"
    >
      <MentionMemberList :team-id="to"></MentionMemberList>
    </UniPopup>
    <!-- 复制自 groupSend 的遮罩与弹窗 -->
    <view v-if="showModal" class="mask" @tap="closeModal"></view>
    <view v-if="showModal" class="center-modal">
      <view class="modal-title">温馨提示</view>
      <view class="modal-divider"></view>
      <view class="modal-item" @tap="onSelectSince('article')">
        <text>图文科普</text>
      </view>
      <view class="modal-divider"></view>
      <view class="modal-item" @tap="onSelectSince('video')">
        <text>视频科普</text>
      </view>
    </view>
     <!-- 商城弹窗 -->
    <view v-if="showMallModal" class="mask" @tap="closeMallModal"></view>
    <view v-if="showMallModal" class="center-modal">
      <view class="modal-title">温馨提示</view>
      <view class="modal-divider"></view>
      <view class="modal-item" @tap="sendMallMsg">
        <text>纽娃复合营养素固体饮料</text>
      </view>
      <view class="modal-divider"></view>
      <view class="modal-item" >
        <text>更多商品正在准备中</text>
      </view>
    </view>
  </div>
</template>

<script lang="ts" setup>
/** 消息页面输入框组件 */
import docUrl from '@/utils/docUrl'
import Face from './face.vue'
import VoicePanel from './voice-panel.vue'
import Icon from '@/components/Icon.vue'
import { ref, getCurrentInstance, computed, onUnmounted, onMounted } from 'vue'
import { ALLOW_AT, events, REPLY_MSG_TYPE_MAP } from '@/utils/im/constants'
import { emojiMap } from '@/utils/im/emoji'
import { t } from '@/utils/im/i18n'
import { handleNoPermission } from '@/utils/im/permission'
import { customNavigateTo } from '@/utils/im/customNavigate'
import MessageOneLine from '@/components/MessageOneLine.vue'
import {
  isAndroidApp,
  stopAllAudio,
  isIosWeb,
  isWeb,
  isWxApp,
  startCall,
  isAndroidOrIosApp,
  isHarmonyOs,
} from '@/utils/im/index'

// @ts-ignore
import UniPopup from '@/components/uni-components/uni-popup/components/uni-popup/uni-popup.vue'
// @ts-ignore
import MentionMemberList from './mention-member-list.vue'
import Appellation from '@/components/Appellation.vue'
import { AT_ALL_ACCOUNT } from '@/utils/im/constants'
import { replaceEmoji } from '@/utils/im/index'
import { autorun } from 'mobx'
import quickImg from '@/static/quck_message.png'
import chuzhenImg from '@/static/outpatient_true.png'
import mallImg from '@/static/ytx_chattingfooter_shopping.png'
import hospitalImg from '@/static/ytx_chatting_hospital.png'
import {onShow,onUnload} from '@dcloudio/uni-app'

import {
  V2NIMTeam,
  V2NIMTeamChatBannedMode,
  V2NIMTeamMember,
} from 'nim-web-sdk-ng/dist/esm/nim/src/V2NIMTeamService'
import {
  V2NIMMessageForUI,
  YxServerExt,
  YxAitMsg,
} from '@xkit-yx/im-store-v2/dist/types/types'
//@ts-ignore
import { V2NIMConst } from '@/utils/im/nim'
import { V2NIMMessage } from 'nim-web-sdk-ng/dist/esm/nim/src/V2NIMMessageService'
export type MentionedMember = { accountId: string; appellation: string }
import navTo from '@/utils/navTo'
import api from '@/api/api.js'
let userInfo=uni.getStorageSync('userInfo');
let expert_uuid=userInfo.uuid;
let expert_name=userInfo.realName;
let patient_uuid='';
const articleInfo=ref({});
const videoInfo=ref({});
const patientListByGBK = async () => {
		
		const res = await api.patientListByGBK();
		if(res.code == 1){
			//patientList.value = res.data;
      for (let i = 0; i < res.data.length; i++) {
        if (res.data[i].uuid.toLowerCase() === props.to) {
          patient_uuid = res.data[i].uuid;
          break;
        }
      }
			
			
		}
		
	};
const props = withDefaults(
  defineProps<{
    conversationType: V2NIMConst.V2NIMConversationType
    to: string
    isGroupSend?: boolean
    replyMsgsMap?: {
      [key: string]: V2NIMMessageForUI
    }
  }>(),
  {}
)
const emits = defineEmits(['send'])
/** 会话ID */
const conversationId =
  props.conversationType ===
  V2NIMConst.V2NIMConversationType.V2NIM_CONVERSATION_TYPE_P2P
    ? uni.$UIKitNIM.V2NIMConversationIdUtil.p2pConversationId(props.to)
    : uni.$UIKitNIM.V2NIMConversationIdUtil.teamConversationId(props.to)

/** 输入框内容 */
const inputText = ref('')
const extVisible = ref(false)
/** 群发选择弹窗 */
const showModal = ref(false)
/** 商城弹窗 */
const showMallModal = ref(false)
/** 音频面板flag */
const audioPanelVisible = ref(false)
/** 发送更多面板flag */
const sendMoreVisible = ref(false)
/** 表情面板flag */
const emojiVisible = ref(false)
/** input框flag */
const inputVisible = computed(() => {
  if (audioPanelVisible.value || sendMoreVisible.value) {
    return false
  } else {
    return true
  }
})

/** 发起呼叫，type: 1 音频呼叫，2 视频呼叫 */
const handleCall = (type: number) => {
  const myAccount = uni.$UIKitStore.userStore.myUserInfo.accountId

  const remoteShowName = uni.$UIKitStore.uiStore.getAppellation({
    account: props.to,
  })
  if (myAccount) {
    startCall({
      remoteUserAccid: props.to,
      currentUserAccid: myAccount,
      type: type,
      remoteShowName: remoteShowName,
    })
  } else {
    uni.showToast({
      title: t('callFailedText'),
      icon: 'none',
    })
  }
}
const outPatientList = ref([]);
const getListOutPatient = async () => {
  const res = await api.listOutPatient({
    page:1,
  });
  if(res.code == 200){
    outPatientList.value = res.data.list.list;
  }
}
const stopOutPatientList = ref([]);
const getStopOutPatientList = async () => {
  const res = await api.stopOutPatientList();
  if(res.code == 200){
    stopOutPatientList.value = res.data;
  }
}
onShow(() => {
  uni.$on('articelItem', (article) => {
    console.log('article', article);
    articleInfo.value = article;
    senCustomMsg('article');
    //handleSendTextMsg('article', article);
  });
  uni.$on('videoItem', (video) => {
    console.log('video', video);
    videoInfo.value = video;
    senCustomMsg('video');
    //handleSendTextMsg('video', video);
  });
  uni.$on('quickReply', (reply) => {
    inputText.value= reply;
    uni.$emit(events.CLOSE_PANEL)
  });
  getListOutPatient();
  getStopOutPatientList();
});
onUnload(() => {
  uni.$off('articelItem');
  uni.$off('videoItem');
  uni.$off('quickReply');
});
/** 商城弹窗 */
let rawStr="{\"gdxz_content\":\"我已入驻肝胆相照互联网医院，复诊购药一站式服务，快来看看吧\",\"gdxz_ext_data\":\"[互联网医院]\",\"gdxz_id\":\"1681174885629431808\",\"gdxz_img\":\"https://img.applets.igandanyiyuan.com/applet/admin/avatar/2023071813261420200708181049.png\",\"gdxz_title\":\"肝胆相照互联网医院\",\"gdxz_type\":\"[互联网医院]\",\"gdxz_url\":\"\"}";
const sendMallMsg = () => {
  showMallModal.value = false;
  //handleSendTextMsg('mall');
  senCustomMsg('mall');
 
}

/** 商城弹窗 */
const closeMallModal = () => {
  showMallModal.value = false
}

/** 用于解决表情面板和键盘冲突，导致输入框滚动消失问题 */
const showEmojiInput = ref(false)

/** 回复消息相关 */
const isReplyMsg = ref(false)
const isFocus = ref(false)
const replyMsg = ref<V2NIMMessageForUI>()

/** @ 消息相关 */
const ctx = getCurrentInstance()
const popupRef = ref(null)

/** @ 成员列表 */
const selectedAtMembers = ref<MentionedMember[]>([])

/** 群相关 */
const team = ref<V2NIMTeam>()
/** 群成员 */
const teamMembers = ref<V2NIMTeamMember[]>([])
/** 群禁言模式 */
const teamMute = ref<V2NIMTeamChatBannedMode>(
  V2NIMConst.V2NIMTeamChatBannedMode.V2NIM_TEAM_CHAT_BANNED_MODE_UNBAN
)
/** 是否是群主 */
const isGroupOwner = ref(false)
/** 是否是群管理员 */
const isGroupManager = ref(false)
/** 群是否禁言 */
const isTeamMute = ref(false)

/** 是否允许@ 所有人 */
const allowAtAll = computed(() => {
  let ext: YxServerExt = {}
  try {
    ext = JSON.parse((team.value || {}).serverExtension || '{}')
  } catch (error) {
    //
  }
  if (ext[ALLOW_AT] === 'manager') {
    return isGroupOwner.value || isGroupManager.value
  }
  return true
})
/** 更新群禁言 */
const updateTeamMute = () => {
  if (
    teamMute.value ===
    V2NIMConst.V2NIMTeamChatBannedMode.V2NIM_TEAM_CHAT_BANNED_MODE_UNBAN
  ) {
    isTeamMute.value = false
    return
  }

  /** 群主或者群管理员在群禁言时，可以发送消息 */
  if (isGroupOwner.value || isGroupManager.value) {
    isTeamMute.value = false
    return
  }
  isTeamMute.value = true
  return
}

/** 弹窗*/
const onPopupChange = (e: any) => {
  uni.$emit(events.HANDLE_MOVE_THROUGH, e.value)
}

/** 打开/关闭群发选择弹窗（与 groupSend 保持一致） */
const openModal = () => {
  showModal.value = true;
 
}
const closeModal = () => {
  showModal.value = false
}
const toggleModal = () => {
  showModal.value = !showModal.value
}
const onSelectSince = (type: string) => {
  showModal.value = false
  if (type === 'article') {
    navTo({ url: '/pages_chat/article/article' })
  } else if (type === 'video') {
    navTo({ url: '/pages_chat/video/video' })
  }
}


/** 点击@ 群成员 */
const handleMentionItemClick = (member: MentionedMember) => {
  //@ts-ignore
  ctx.refs.popupRef.close()
  uni.$emit(events.HANDLE_MOVE_THROUGH, false)
  const nickInTeam = member.appellation
  selectedAtMembers.value = [
    ...selectedAtMembers.value.filter(
      (item) => item.accountId !== member.accountId
    ),
    member,
  ]
  const newInputText = inputText.value + nickInTeam + ' '
  // 更新input框的内容
  inputText.value = newInputText
}

/** 关闭popup */
const closePopup = () => {
  //@ts-ignore
  ctx.refs.popupRef.close()
}

/** 点击表情输入框，隐藏表情面板，显示键盘 */
const onClickEmojiInput = () => {
  showEmojiInput.value = false
  extVisible.value = false
  emojiVisible.value = false
  if (isIosWeb) {
    showKeyboard()
  } else if (!isHarmonyOs) {
    const timeout = setTimeout(() => {
      showKeyboard()
      clearTimeout(timeout)
    }, 500)
  }
}

/** 输入框失焦 */
const handleInputBlur = () => {
  isFocus.value = false
}

/** 滚动到底部 */
const scrollBottom = () => {
  if (!isWeb) {
    setTimeout(() => {
      uni.$emit(events.ON_SCROLL_BOTTOM)
    }, 300)
  } else {
    uni.$emit(events.ON_SCROLL_BOTTOM)
  }
}

/** 输入框输入事件 */
const handleInput = (event: any) => {
  const text = event?.detail?.value
  const isAit = text.endsWith('@') || text.endsWith('@\n')
  if (
    props.conversationType ==
    V2NIMConst.V2NIMConversationType.V2NIM_CONVERSATION_TYPE_TEAM
  ) {
    if (isAit) {
      /** 当前输入的是@ */
      uni.hideKeyboard()
      // @ts-ignore
      ctx.refs.popupRef.open('bottom')
      isFocus.value = false
      uni.$emit(events.HANDLE_MOVE_THROUGH, true)
    }
  }
}

/** 发送文本消息 */
const handleSendTextMsg = (type:string) => {
  if (inputText.value.trim() === '') return
  const ext = onAtMembersExtHandler()
   let mallText='纽娃复合营养素固体饮料主要成分是:蜂花粉、乳清蛋白粉、灰树花粉、低聚木糖、蚕蛹氨基酸、麦芽粉、薏苡仁粉、烟酸、磷脂，以及其他调味品、辅助原料。科学配比制成，含有丰富的蛋白质、氨基酸、维生素、微量元素及其他营养元素，点击链接了解详情。'
  let text = type==='mall'?mallText:replaceEmoji(inputText.value)
  const textMsg = uni.$UIKitNIM.V2NIMMessageCreator.createTextMessage(text)
 //let serverExtension={"gdxz_nickName":"测试","gdxz_sessionType":"general"};
  if(props.isGroupSend){
    emits('send',{
      content:text,
      msg_type:1,
    })
    inputText.value = ''
    isReplyMsg.value = false
    replyMsg.value = undefined
    selectedAtMembers.value = [];
  }else{

    uni.$UIKitStore.msgStore
    .sendMessageActive({
      msg: textMsg as unknown as V2NIMMessage,
      conversationId,
      serverExtension:selectedAtMembers.value.length && (ext as any),
      sendBefore: () => {
        scrollBottom();
       
      },
    })
    .catch(() => {
      uni.showToast({
        icon: 'error',
        title: t('sendMsgFailedText'),
      })
    })
    .finally(() => {
      scrollBottom()
    })

  inputText.value = ''
  isReplyMsg.value = false
  replyMsg.value = undefined
  selectedAtMembers.value = [];
  // if(type=='mall'){
  //         senCustomMsg('mall');
  // }
}
}

/** 发送文件消息 */
const handleSendFileMsg = () => {
  uni.chooseFile({
    count: 1,
    type: 'all',
    success: (res) => {
      const filePath = res?.tempFilePaths?.[0]
      // @ts-ignore
      const fileName = res?.tempFiles?.[0]?.name
      if (filePath && fileName) {
        const fileMsg = uni.$UIKitNIM.V2NIMMessageCreator.createFileMessage(
          filePath,
          fileName
        )
        uni.$UIKitStore.msgStore.sendMessageActive({
          msg: fileMsg as unknown as V2NIMMessage,
          conversationId,
          sendBefore: () => {
            scrollBottom()
          },
        })
      }
    },
    fail: () => {
      uni.showToast({
        title: t('sendFileFailedText'),
        icon: 'none',
      })
    },
  })
}

/** 移除回复消息 */
const removeReplyMsg = () => {
  uni.$UIKitStore.msgStore.removeReplyMsgActive(
    replyMsg?.value?.conversationId as string
  )
  isReplyMsg.value = false
}

/** 显示表情面板 */
const handleEmojiVisible = () => {
  if (isTeamMute.value) return
  if (isWxApp || isAndroidApp || isHarmonyOs) {
    const timeout = setTimeout(() => {
      emojiVisible.value = true
      extVisible.value = true
      uni.$emit(events.ON_SCROLL_BOTTOM)
      clearTimeout(timeout)
    }, 300)
  } else {
    emojiVisible.value = true
    extVisible.value = true
  }
  showEmojiInput.value = true
  audioPanelVisible.value = false
  sendMoreVisible.value = false
  uni.$emit(events.ON_SCROLL_BOTTOM)
}

/** 显示发送更多"+"面板 */
const handleSendMoreVisible = () => {
  if (isTeamMute.value) return
  audioPanelVisible.value = false
  emojiVisible.value = false
  sendMoreVisible.value = !sendMoreVisible.value
  setTimeout(() => {
    uni.$emit(events.ON_SCROLL_BOTTOM)
  }, 300)
}

/** 点击表情 */
const handleEmoji = (emoji: { key: string; type: string }) => {
  inputText.value += emoji.key
}

/** 删除表情 */
const handleEmojiDelete = () => {
  let target = ''
  const isEmojiEnd = Object.keys(emojiMap).reduce((prev, cur) => {
    const isEnd = inputText.value.endsWith(cur)
    if (isEnd) {
      target = cur
    }
    return prev || isEnd
  }, false)
  if (isEmojiEnd && target) {
    inputText.value = inputText.value.replace(target, '')
  } else {
    inputText.value = inputText.value.slice(0, -1)
  }
}

/** 显示语音面板 */
const handleAudioVisible = () => {
  if (isTeamMute.value) return
  audioPanelVisible.value = !audioPanelVisible.value
  emojiVisible.value = false
  setTimeout(() => {
    uni.$emit(events.ON_SCROLL_BOTTOM)
  }, 300)
}

/** 发送图片消息 */
const handleSendImageMsg = () => {
  if (isTeamMute.value) return
  stopAllAudio()
  uni.chooseImage({
    count: 1,
    sizeType: ['compressed'],
    success: (res) => {
      const imgMsg = uni.$UIKitNIM.V2NIMMessageCreator.createImageMessage(
        res.tempFilePaths[0]
      )
      if(props.isGroupSend){
        const fileManager = uni.getFileSystemManager();
        fileManager.readFile({
          filePath: res.tempFilePaths[0],
          encoding: 'base64',
          success: (res) => {
              emits('send',{  
                content:res.data,
                msg_type:2,
              })
        },
        fail: (error) => {
          console.log('chooseImage', error)
        }
      })
      }else{
      uni.$UIKitStore.msgStore
        .sendMessageActive({
          msg: imgMsg as unknown as V2NIMMessage,
          conversationId,
          progress: () => true,
          sendBefore: () => {
            scrollBottom()
          },
        })
        .then(() => {
          scrollBottom()
        })
        .catch(() => {
          scrollBottom()
          uni.showToast({
            icon: 'error',
            title: t('sendImageFailedText'),
          })
        })
    }
    
  },
  /** uniapp 提供的chooseImage api 在鸿蒙上表现为不支持选择gif，在其他端支持 */
  fail: (error) => {
      console.log('chooseImage', error)
    },
    /** 没有开启权限时，提示开启权限 */
    complete: handleNoPermission,
  })
  
}
const senCustomMsg = (type:string) => {
    let rawStr="";
    let text="";
    let msg_type=0;
    let msg_content="";
    let doctor_id="";
  if(type == 'hospital'){
    doctor_id='';
    msg_type=8;
    msg_content="https://img.applets.igandanyiyuan.com/applet/admin/avatar/2023071813261420200708181049.png";
    text="[互联网医院]";
    rawStr=`{\"gdxz_content\":\"我已入驻肝胆相照互联网医院，复诊购药一站式服务，快来看看吧\",\"gdxz_ext_data\":\"[互联网医院]\",\"gdxz_id\":\"1681174885629431808\",\"gdxz_img\":\"https://img.applets.igandanyiyuan.com/applet/admin/avatar/2023071813261420200708181049.png\",\"gdxz_title\":\"肝胆相照互联网医院\",\"gdxz_type\":\"[互联网医院]\",\"gdxz_url\":\"\"}`;
  }else if(type == 'mall'){
    msg_type=6;
    msg_content="";
    text="[肝胆商城]";
    rawStr=`{\"gdxz_content\":\"肝胆相照®肝胆病在线公共服务平台\",\"gdxz_ext_data\":\"[肝胆商城]\",\"gdxz_id\":\"\",\"gdxz_img\":\"\",\"gdxz_title\":\"纽娃复合营养素固体饮料\",\"gdxz_type\":\"[肝胆商城]\",\"gdxz_url\":\"https://wx.igandan.com/shop_notify/setInfo?patient_uuid=${patient_uuid}&expert_uuid=${expert_uuid}\"}`;
  }else if(type == 'outpatient'){
    msg_type=5;
    msg_content="";
    text="[门诊公告]";
    rawStr=`{\"gdxz_content\":\"门诊详情\",\"gdxz_ext_data\":\"[门诊公告]\",\"gdxz_id\":\"\",\"gdxz_img\":\"\",\"gdxz_title\":\"${expert_name}医生门诊详情\",\"gdxz_type\":\"[门诊公告]\",\"gdxz_url\":\"https://dev-wx.igandan.com/wxPatient/index.htm#/outPatient?link=share&expertUuid=${expert_uuid}\"}`
  }else if(type == 'article'){
    msg_type=3;
    msg_content=articleInfo.value.uuid;
    text="[图文科普]";
    let content='"'+articleInfo.value.summary+'"';
    let id='"'+articleInfo.value.uuid+'"';
    let title='"'+articleInfo.value.title+'"';
    let path='"'+docUrl+articleInfo.value.path+'"';
    rawStr=`{\"gdxz_content\":${content},\"gdxz_ext_data\":\"[图文科普]\",\"gdxz_id\":${id},\"gdxz_img\":\"http://doc.igandan.org/app/book/pdf/2019/20190613152617.png\",\"gdxz_title\":${title},\"gdxz_type\":\"[图文科普]\",\"gdxz_url\":${path}}`
  }else if(type == 'video'){
    msg_type=4;
    msg_content=videoInfo.value.uuid;
    let content='"'+videoInfo.value.note+'"';
    let id='"'+videoInfo.value.uuid+'"';
    let title='"'+videoInfo.value.name+'"';
    let path='"'+docUrl+videoInfo.value.path+'"';
    text="[视频科普]";
    rawStr=`{\"gdxz_content\":${content},\"gdxz_ext_data\":\"[视频科普]\",\"gdxz_id\":${id},\"gdxz_img\":\"http://doc.igandan.org/app/book/pdf/2019/20190613152617.png\",\"gdxz_title\":${title},\"gdxz_type\":\"[视频科普]\",\"gdxz_url\":${path}}`
  }
  const customMsg = uni.$UIKitNIM.V2NIMMessageCreator.createCustomMessage(text,rawStr)
  if(props.isGroupSend){
    emits('send',{
      content:msg_content,
      msg_type:msg_type,
    })
  }else{
  uni.$UIKitStore.msgStore
        .sendMessageActive({
          msg: customMsg as unknown as V2NIMMessage,
          conversationId,
          progress: () => true,
          sendBefore: () => {
            scrollBottom()
          },
        })
        .then(() => {
          scrollBottom();
        })
        .catch(() => {
          scrollBottom()
          uni.showToast({
            icon: 'error',
            title: '发送失败',
          })
        })
  }
}

const handleCustom = (type: string, event: any) => {
  if (isTeamMute.value) return
  if(type == 'reply'){
     navTo({
      url: '/pages_chat/quickReply/quickReply',
     })
  }else if(type == 'hj'){
    showModal.value = true
  }else if(type == 'mall'){
    showMallModal.value = true
    patientListByGBK();
  }else if(type == 'outpatient'){
      //  navTo({
      //   url: '/pages_chat/outpatient/outpatient',
      // })
    if( outPatientList.value.length==0 && stopOutPatientList.value.length==0 ){
      navTo({
        url: '/pages_chat/outpatient/outpatient',
      })
    }else{
      senCustomMsg('outpatient');
    }
   
   
  }else if(type == 'hospital'){
    senCustomMsg('hospital');
  }
}
/** 发送视频消息（使用相机或者从相册选择） */
const handleSendVideoMsg = (type: string, event: any) => {
  if (isTeamMute.value) return
  stopAllAudio()
  // 这里做一层拦截的原因是，微信小程序在input聚焦的时候点击+号按钮，会触发此函数执行，阻止冒泡也无法解决该问题，疑为uniapp编译问题
  if (isWxApp && event?.type == 'blur') {
    return
  }

  uni.chooseVideo({
    sourceType: [type],
    compressed: true,
    maxDuration: 60,
    success: (res) => {
      const videoMsg = uni.$UIKitNIM.V2NIMMessageCreator.createVideoMessage(
        res.tempFilePath
      )

      uni.$UIKitStore.msgStore
        .sendMessageActive({
          msg: videoMsg as unknown as V2NIMMessage,
          conversationId,
          progress: () => true,
          sendBefore: () => {
            scrollBottom()
          },
        })
        .then(() => {
          scrollBottom()
        })
        .catch(() => {
          scrollBottom()
          uni.showToast({
            icon: 'error',
            title: t('sendVideoFailedText'),
          })
        })
    },
    /** 没有开启权限时，提示开启权限 */
    complete: handleNoPermission,
  })
}

/** 发送语音消息 */
const handleSendAudioMsg = (filePath: string, duration: number) => {
  const audioMsg =
    uni.$UIKitNIM.V2NIMMessageCreator.createAudioMessage(filePath)

  uni.$UIKitStore.msgStore
    .sendMessageActive({
      msg: audioMsg as unknown as V2NIMMessage,
      conversationId,
      progress: () => true,
      sendBefore: (msg) => {
        scrollBottom()
        uni.$UIKitStore.msgStore.addMsg(msg.conversationId, [
          {
            ...msg,
            //@ts-ignore
            attachment: {
              duration: duration,
            },
          },
        ])
      },
    })
    .then(() => {
      scrollBottom()
    })
    .catch(() => {
      uni.showToast({
        icon: 'error',
        title: t('sendAudioFailedText'),
      })
      scrollBottom()
    })
}

/** 跳转设置页 */
const handleSetting = () => {
  uni.hideKeyboard()
  if (
    props.conversationType ===
    V2NIMConst.V2NIMConversationType.V2NIM_CONVERSATION_TYPE_P2P
  ) {
    customNavigateTo({
      url: `/pages/Chat/message/p2p-set?id=${props.to}`,
    })
  } else if (
    props.conversationType ===
    V2NIMConst.V2NIMConversationType.V2NIM_CONVERSATION_TYPE_TEAM
  ) {
    customNavigateTo({
      url: `/pages/Team/team-set/index?id=${props.to}`,
    })
  }
}

let teamWatch = () => {}
/** 编译到鸿蒙上时，通过isFocus来唤起键盘，会导致input框滚动消失，故鸿蒙不使用isFocus来唤起键盘，由用户手动唤起 */
const showKeyboard = () => {
  isFocus.value = true
}

onMounted(() => {
  /** 群监听 */
  teamWatch = autorun(() => {
    if (
      props.conversationType ===
      V2NIMConst.V2NIMConversationType.V2NIM_CONVERSATION_TYPE_TEAM
    ) {
      //@ts-expect-error
      const _team: V2NIMTeam = uni.$UIKitStore.teamStore.teams.get(props.to)

      teamMembers.value = uni.$UIKitStore.teamMemberStore.getTeamMember(
        props.to
      )

      const myUser = uni.$UIKitStore.userStore.myUserInfo
      isGroupOwner.value = _team?.ownerAccountId == myUser.accountId
      isGroupManager.value = teamMembers.value
        .filter(
          (item) =>
            item.memberRole ===
            V2NIMConst.V2NIMTeamMemberRole.V2NIM_TEAM_MEMBER_ROLE_MANAGER
        )
        .some((member) => member.accountId === (myUser ? myUser.accountId : ''))
      team.value = _team
      if (_team) {
        teamMute.value = _team.chatBannedMode
      }
      updateTeamMute()
    }
  })

  /** 撤回后，重新编辑消息 */
  uni.$on(events.ON_REEDIT_MSG, (msg: V2NIMMessageForUI) => {
    const _replyMsg = props.replyMsgsMap?.[msg.messageClientId]

    // 为了解决 1.撤回回复消息A 2.再撤回普通文本消息B 3.重新编辑消息A 4.再重新编辑消息B后 输入框显示A的引用内容，发送后显示A的引用内容的问题

    if (msg.conversationId) {
      uni.$UIKitStore.msgStore.removeReplyMsgActive(msg.conversationId)
      isReplyMsg.value = false
    }

    /** 如果重新编辑的是回复消息，则需要将回复消息展示在输入框上方 */
    if (_replyMsg?.messageClientId) {
      _replyMsg && uni.$UIKitStore.msgStore.replyMsgActive(_replyMsg)
      replyMsg.value = _replyMsg
      isReplyMsg.value = true
    }

    /** 如果重新编辑的是@消息，则需要将被@ 的成员重新加入selectedAtMembers */
    if (msg.serverExtension) {
      const extObj = JSON.parse(msg.serverExtension)
      const yxAitMsg = extObj.yxAitMsg
      if (yxAitMsg) {
        const _mentionedMembers: MentionedMember[] = []
        Object.keys(yxAitMsg).forEach((key) => {
          if (key == AT_ALL_ACCOUNT) {
            _mentionedMembers.push({
              accountId: key,
              appellation: '所有人',
            })
          } else {
            _mentionedMembers.push({
              accountId: key,
              appellation: uni.$UIKitStore.uiStore.getAppellation({
                account: key,
                teamId: props.to,
                ignoreAlias: true,
              }),
            })
          }
        })
        selectedAtMembers.value = _mentionedMembers
      }
    }
    inputText.value = msg?.oldText || ''
    if (!isHarmonyOs) {
      showKeyboard()
    }
  })

  uni.$on(events.REPLY_MSG, (msg: V2NIMMessageForUI) => {
    isReplyMsg.value = true
    replyMsg.value = msg
    if (!isHarmonyOs) {
      showKeyboard()
    }
  })

  uni.$on(events.AIT_TEAM_MEMBER, (member: MentionedMember) => {
    selectedAtMembers.value = [
      ...selectedAtMembers.value.filter(
        (item) => item.accountId !== member.accountId
      ),
      member,
    ]
    const newInputText = inputText.value + '@' + member.appellation + ' '
    /** 更新input框的内容 */
    inputText.value = newInputText
  })

  /** 关闭表情、语音、发送更多面板 */
  uni.$on(events.CLOSE_PANEL, () => {
    emojiVisible.value = false
    extVisible.value = false
    audioPanelVisible.value = false
    sendMoreVisible.value = false
  })

  /** @ 消息 @ 群成员 */
  uni.$on(events.HANDLE_AIT_MEMBER, (member: MentionedMember) => {
    handleMentionItemClick(member)
  })

  /** 关闭@ 群成员面板 */
  uni.$on(events.CLOSE_AIT_POPUP, () => {
    closePopup()
  })

  /** 表情点击 */
  uni.$on(events.EMOJI_CLICK, (emoji) => {
    handleEmoji(emoji)
  })

  /** 表情删除 */
  uni.$on(events.EMOJI_DELETE, () => {
    handleEmojiDelete()
  })

  /** 表情发送 */
  uni.$on(events.EMOJI_SEND, () => {
    emojiVisible.value = false
    extVisible.value = false
    handleSendTextMsg()
  })

  if (uni.onKeyboardHeightChange) {
    uni.onKeyboardHeightChange((res) => {
      const isAndroidWxapp =
        uni.getSystemInfoSync().platform == 'android' && isWxApp
      // 此处是为了点击安卓键盘上的收起按钮时，表情面板需要隐藏
      if (
        (res.height === 0 && isAndroidApp) ||
        (res.height === 0 && isAndroidWxapp)
      ) {
        emojiVisible.value = false
        extVisible.value = false
      }
    })
  }
})

/** 处理选中的@ 成员 */
const onAtMembersExtHandler = () => {
  let ext: YxServerExt
  if (selectedAtMembers.value.length) {
    selectedAtMembers.value
      .filter((member) => {
        if (!allowAtAll.value && member.accountId === AT_ALL_ACCOUNT) {
          return false
        }
        return true
      })
      .forEach((member) => {
        const substr = `@${member.appellation}`
        const positions: number[] = []
        let pos = inputText.value?.indexOf(substr)
        while (pos !== -1) {
          positions.push(pos)
          pos = inputText.value?.indexOf(substr, pos + 1)
        }
        if (positions.length) {
          if (!ext) {
            ext = {
              yxAitMsg: {
                [member.accountId]: {
                  text: substr,
                  segments: [],
                },
              },
            }
          } else {
            ;(ext.yxAitMsg as YxAitMsg)[member.accountId] = {
              text: substr,
              segments: [],
            }
          }
          positions.forEach((position) => {
            const start = position
            ;(ext?.yxAitMsg as YxAitMsg)[member.accountId].segments.push({
              start,
              end: start + substr.length,
              broken: false,
            })
          })
        }
      })
  }
  // @ts-ignore
  return ext
}

onUnmounted(() => {
  uni.$off(events.REPLY_MSG)
  uni.$off(events.ON_REEDIT_MSG)
  uni.$off(events.REPLY_MSG)
  uni.$off(events.AIT_TEAM_MEMBER)
  // 关闭表情面板
  uni.$off(events.CLOSE_PANEL)
  // @消息 @群成员
  uni.$off(events.HANDLE_AIT_MEMBER)
  // 关闭@群成员面板
  uni.$off(events.CLOSE_AIT_POPUP)
  // 表情点击
  uni.$off(events.EMOJI_CLICK)
  // 表情删除
  uni.$off(events.EMOJI_DELETE)
  // 表情发送
  uni.$off(events.EMOJI_SEND)
  removeReplyMsg()
  teamWatch()
})
</script>

<style scoped lang="scss">
@import '@/styles/common.scss';

.input-root {
  width: 100%;
  display: flex;
  flex-direction: column;
  height: auto;
  max-height: 300px;
}

.input-root-h5 {
  height: auto;
  position: relative;
  order: 1;
}

.msg-input-wrapper {
  width: 100%;
  height: 100%;
  background-color: #eff1f3;
  transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  z-index: 999;
}

.msg-input {
  overflow-x: hidden;
  padding: 7px;
  background-color: #eff1f3;

  &-input {
    background-color: #fff;
    height: 40px;
    font-size: 16px;
    padding: 0 12px;
    border-radius: 6px;
    margin-bottom: 5px;

    &::placeholder {
      padding: 0 12px;
    }
  }
}

.msg-button-group {
  padding: 12px 20px 2px 20px;
  display: flex;
  flex-direction: row;
  align-items: center;
}

.msg-input-button {
  flex: 1;
  // &:not(:last-child) {
  //   margin-right: 60px;
  // }

  &.msg-input-loading {
    animation: loadingCircle 1s infinite linear;
    z-index: 1;
    width: 20px;
    height: 20px;
    margin-top: 4px;

    .loading {
      width: 100%;
      height: 100%;
    }
  }
}

.msg-ext {
  overflow-y: auto;
  width: 100%;
  height: 300px;
  background-color: #eff1f3;
  z-index: 1;
}

.msg-emoji-panel {
  overflow-y: auto;
  width: 100%;
  height: 246px;
  background-color: #eff1f3;
  z-index: 1;
}

.msg-audio-panel {
  overflow-y: hidden;
  width: 100%;
  height: 300px;
  background-color: #eff1f3;
  z-index: 1;
}

.send-more-panel {
  padding: 15px;
  overflow-y: hidden;
  width: 100%;
  height: 300px;
  background-color: #eff1f3;
  z-index: 1;
  flex-wrap: wrap;
  box-sizing: border-box;
}

.send-more-panel-item-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  display: inline-block;
  margin-bottom: 10px;
  .send-more-panel-item {
    background-color: #fff;
    border-radius: 8px;
    width: 100rpx;
    height: 100rpx;
    display: flex;
    overflow: hidden;
    align-items: center;
    margin: 0 15px;
    justify-content: center;
    image{
      width: 100rpx;
      height: 100rpx;
      border-radius: 8px;
    }
  }
  .icon-text {
    font-size: 12px;
    color: #747475;
    margin-top: 8px;
    text-align: center;
  }
}

.reply-message-wrapper {
  display: flex;
  font-size: 13px;
  background-color: #eff1f2;
  height: 25px;
  padding-top: 6px;
  align-items: center;
  color: #929299;

  .reply-noFind {
    width: fit-content;
  }

  .reply-to-colon {
    flex-basis: 3px;
    margin-right: 2px;
  }

  .reply-message-close {
    flex-basis: 14px;
    margin-left: 10px;
    display: flex;
    align-items: center;
  }

  .reply-message {
    flex: 1;
    display: flex;
    align-items: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    message-one-line {
      flex: 1;
      font-size: 13px;
      width: 100%;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
  }

  .reply-title {
    flex-basis: 30px;
    white-space: nowrap;
    margin-right: 5px;
  }

  .reply-to {
    max-width: 120px;
    flex: 0 0 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13px;
  }
}

.input-emoji {
  background-color: #fff;
  height: 40px;
  line-height: 40px;
  font-size: 16px;
  padding: 0 12px;
  border-radius: 6px;
}

.input-text {
  white-space: nowrap;
}

.input-placeholder {
  background-color: #fff;
  height: 40px;
  line-height: 40px;
  font-size: 16px;
  padding: 0 12px;
  border-radius: 6px;
  color: gray;
}
.file-picker-wrapper {
  position: absolute;
  width: 60px;
  height: 60px;
  z-index: 1;
  .files-button {
    width: 60px;
    height: 60px;
  }
}

/* 复制自 groupSend 的遮罩与弹窗样式 */
.mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 1000;
}

.center-modal {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 650rpx;
  background: #ffffff;
  border-radius: 16rpx;
  z-index: 1001;
  overflow: hidden;
  box-shadow: 0 10rpx 40rpx rgba(0, 0, 0, 0.15);
}

.modal-title {
  text-align: center;
  font-size: 34rpx;
  color: #d32f2f;
  padding: 28rpx 20rpx;
}

.modal-item {
  padding: 36rpx 28rpx;
  font-size: 30rpx;
  color: #333333;
  background: #ffffff;
}

.modal-divider {
  height: 2rpx;
  background: #eeeeee;
}
</style>
