<script setup lang="ts">
import AgoraRTC from "agora-rtc-sdk-ng"
import type { IAgoraRTCClient, IMicrophoneAudioTrack, ICameraVideoTrack } from "agora-rtc-sdk-ng"
import { CHAT_STATUS, CHAT_OPERATION } from '~/types';
import { UseDraggable } from '@vueuse/components'
import request from '~/utils/request';
import type { type_dyaw_xlfw_zxhd, type_dyaw_xlfw_zxhd_log } from '~/types';
import user, { UserRole } from '~/store/user';
import { socketSend } from '~/utils/ws';
import { formatOffsetSec } from '~/utils/time';
// import { ElMessage } from "element-plus";
import { showConfirmDialog, showSuccessToast, showFailToast } from 'vant';
let offsetTimer: NodeJS.Timeout
let offsetTime = $ref<number>(0)

const RTC_USE = window.RTC_USE
console.info('RTC_USE', RTC_USE)

const emits = defineEmits<{
  (event: 'update-info', info: Partial<type_dyaw_xlfw_zxhd_log>, isUpdate?: boolean): void;
}>()

let reqDate: Partial<type_dyaw_xlfw_zxhd_log>

let dyaw_xlfw_zxhd = $ref<type_dyaw_xlfw_zxhd>()
let mode = $ref<'audio' | 'video'>()
let dxzl_id = $ref<string>()

const otherInfo = $computed(() => {
  if (UserRole === 'student')
    return { id: dyaw_xlfw_zxhd?.dxz_tea_user_id, realname: dyaw_xlfw_zxhd?.dxz_tea_user_realname, avatar: dyaw_xlfw_zxhd?.dxx_tea_avatar }
  if (UserRole === 'teacher')
    return { id: dyaw_xlfw_zxhd?.dxz_stu_user_id, realname: dyaw_xlfw_zxhd?.dxz_stu_user_realname, avatar: dyaw_xlfw_zxhd?.dxx_user_avatar }
})

let isOpen = $ref<boolean>(false)
let currentChatStatus = $ref<CHAT_STATUS>(CHAT_STATUS.WAITING_OTHERS_ACCEPT)

let ws2: WebSocket;
function handleClose() {
  isOpen = false
}
defineExpose({
  init(ws: WebSocket) {
    console.info("init")
    ws2 = ws
    console.info("init end", ws2)
  },
  open(d: type_dyaw_xlfw_zxhd, _mode: 'audio' | 'video') {
    if (isOpen) return;
    // isOpen = true
    mins = false
    dyaw_xlfw_zxhd = d
    reqDate = {
      dxz_id: dyaw_xlfw_zxhd.dxz_id,
      dxzl_stu_user_id: dyaw_xlfw_zxhd.dxz_stu_user_id,
      dxzl_stu_user_realname: dyaw_xlfw_zxhd.dxz_stu_user_realname,
      dxzl_tea_user_id: dyaw_xlfw_zxhd.dxz_tea_user_id,
      dxzl_tea_user_realname: dyaw_xlfw_zxhd.dxz_tea_user_realname,
    }

    mode = _mode
    handleAudioChatStart()
  },
  close() {
    handleClose()
  },
  async publisher(
    content:
      // type_dyaw_xlfw_zxhd_log &
      {
        operate: CHAT_OPERATION
        // rtcOptions?: TRtcOptions
        mode?: 'audio' | 'video'
        dyaw_xlfw_zxhd?: type_dyaw_xlfw_zxhd
        fullSendData?: type_dyaw_xlfw_zxhd_log
        dxzl_id?: string
      }
  ) {
    console.info('[in publisher] start ', content);
    //
    const { operate } = content
    switch (operate) {
      case CHAT_OPERATION.START:
        currentChatStatus = CHAT_STATUS.WAITING_YOU_ACCEPT
        // rtcOptions = content.rtcOptions!;
        mode = content.mode!;
        dyaw_xlfw_zxhd = content.dyaw_xlfw_zxhd!
        dxzl_id = content.dxzl_id!
        reqDate = {
          dxz_id: dyaw_xlfw_zxhd.dxz_id,
          dxzl_stu_user_id: dyaw_xlfw_zxhd.dxz_stu_user_id,
          dxzl_stu_user_realname: dyaw_xlfw_zxhd.dxz_stu_user_realname,
          dxzl_tea_user_id: dyaw_xlfw_zxhd.dxz_tea_user_id,
          dxzl_tea_user_realname: dyaw_xlfw_zxhd.dxz_tea_user_realname,
        }
        isOpen = true
        emits('update-info', content.fullSendData!)

        break;
      case CHAT_OPERATION.CANCEL:
        emits('update-info', content.fullSendData!, true)
        isOpen = false
        break;
      case CHAT_OPERATION.ACCEPT:
        if (RTC_USE) {
          await rtcInstance.client!.publish(rtcInstance.localAudioTrack!);
          if (mode === 'video')
            await rtcInstance.client!.publish(rtcInstance.localVideoTrack!);
        }
        currentChatStatus = CHAT_STATUS.CHATING
        offsetTime = 0
        offsetTimer = setInterval(() => {
          offsetTime = (offsetTime as number + 1)
        }, 1000)
        break;
      case CHAT_OPERATION.DENY:
        emits('update-info', content.fullSendData!, true)
        isOpen = false
        if (RTC_USE)
          await rtcInstance.client?.leave();
        break;
      case CHAT_OPERATION.END:
        emits('update-info', content.fullSendData!, true)
        offsetTimer && clearInterval(offsetTimer)
        isOpen = false
        if (RTC_USE)
          await rtcInstance.client!.leave();
        handleSwitchUse(false)

        break;
      default:
        break;
    }
  }
})

function handleInfoAdd(tip: string) {
  console.info('[in handleInfoAdd] start ');
  const _reqDate = Object.assign({
    dxzl_status: '1',
    dxzl_type: mode === 'audio' ? '3' : '4',
    dxzl_last_msg_content: encodeURIComponent(`【${mode === 'audio' ? '语音通话' : '视频通话'}】 ${tip}`),
  }, reqDate)
  return request({
    url: '/dyaw/xlfw_zxhd_log/add',
    data: {
      dyaw_xlfw_zxhd_log: _reqDate
    }
  }).then(res => {
    if (res.code === '1') {
      const fullSendData = {
        create_user_id: user.user_id,
        create_dateline: Date.now().toString().slice(0, 10),
        ..._reqDate,
        dxzl_id: `${res.data.insert_id}`
      } as type_dyaw_xlfw_zxhd_log
      emits('update-info', fullSendData)
      dxzl_id = `${res.data.insert_id}`
      console.info('[success][in handleInfoAdd] end ', fullSendData);
      return fullSendData
    }
    console.error('[fail][in handleInfoAdd] end ', res)
    return Promise.reject()
  }).catch(err => {
    console.error('[error][in handleInfoAdd] end ', err)
    return Promise.reject()
  })
}

function handleInfoEdit(data: Partial<type_dyaw_xlfw_zxhd_log>, tip?: string) {
  console.info('[in handleInfoEdit] start ');
  const _reqDate = Object.assign({
    dxzl_last_msg_content: tip ? encodeURIComponent(`【${mode === 'audio' ? '语音通话' : '视频通话'}】 ${tip}`) : undefined,
  }, data)
  console.info('[in handleInfoEdit] data ', {
    dxzl_id: dxzl_id,
    dyaw_xlfw_zxhd_log: _reqDate
  })
  if (dxzl_id === undefined) {
    return Promise.reject(
      new Error('尚未与对方建立通话')
    )
  }
  return request({
    url: '/dyaw/xlfw_zxhd_log/edit',
    data: {
      dxzl_id: dxzl_id,
      dyaw_xlfw_zxhd_log: _reqDate
    }
  }).then(res => {
    if (res.code === '1') {
      emits('update-info', {
        dxzl_id: dxzl_id!,
        ..._reqDate
      }, true)
      console.info('[success][in handleInfoEdit] end ', _reqDate);
      return {
        dxzl_id: dxzl_id!,
        ..._reqDate
      }
    }
    console.error('[fail][in handleInfoEdit] end ', res)
    return Promise.reject()
  }).catch(err => {
    console.error('[error][in handleInfoEdit] end ', err)
    return Promise.reject()
  })
}


const LocalPlayerContainerRef = $ref<HTMLElement>()
const RemotePlayerContainerRef = $ref<HTMLElement>()
// ==========
// chat audio/video
// ==========
let rtcInstance: {
  client?: IAgoraRTCClient;
  localAudioTrack?: IMicrophoneAudioTrack;
  localVideoTrack?: ICameraVideoTrack
} = {
  client: undefined,
  localAudioTrack: undefined,
  localVideoTrack: undefined,
}
type TRtcOptions = {
  appId: string;
  channel: string;
  token: string;
}
let rtcOptions: TRtcOptions;

function handleSwitchUse(v: boolean) {
  if (!RTC_USE) return
  // console.info('[in handleSwitchUse] start ');
  try {
    audioInUse = v
    videoInUse = v
    rtcInstance?.localAudioTrack?.setEnabled(v)
    rtcInstance?.localVideoTrack?.setEnabled(v)
    // ! will error
    // if (!v) {
    //   rtcInstance?.localAudioTrack?.close()
    //   rtcInstance?.localVideoTrack?.close()
    // }
  } catch (error) {
    console.error(error);
  }
}

function initRtcClient() {
  if (!RTC_USE) return
  console.info('[in initRtcClient] start')

  if (rtcInstance.client) {
    handleSwitchUse(true)
    return
  };
  const client = rtcInstance.client = AgoraRTC.createClient({ mode: "rtc", codec: "vp8" });
  console.info("AgoraRTC client initialized", client);
  client.on("user-published", async (user, mediaType) => {
    await client.subscribe(user, mediaType);
    if (mediaType === "audio") {
      const audioTrack = user.audioTrack;
      audioTrack?.play();
    } else {
      const videoTrack = user.videoTrack;
      videoTrack?.play(RemotePlayerContainerRef as HTMLElement);
    }
  });
}

async function getRtcOption() {
  if (!RTC_USE) return
  console.info('[in getRtcOption] start')
  try {
    await request({
      url: '/dyaw/xlfw_zxhd/get_rtc_token',
      timeout: 10000,
      data: {
        dxz_id: dyaw_xlfw_zxhd?.dxz_id
      }
    }).then(async res => {
      if (res.code === '1') {
        let resp: { jgim_roomid: string; rtc_appid: string; rtc_token: string } = res.data.one_info
        console.info('[success][in getRtcOption] end ', resp)
        return rtcOptions = {
          appId: resp.rtc_appid,
          // channel: resp.jgim_roomid,
          channel: dyaw_xlfw_zxhd!.dxz_id,
          token: resp.rtc_token,
          // uid: user.user_id
        }
      } else {
        console.error('[fail][in getRtcOption] end ', res)
        showFailToast('服务器繁忙，请稍后再试')
      }
    })
  } catch (error) {
    console.error('[error][in getRtcOption] end ', error)
    showFailToast('服务器繁忙，请稍后再试')
  }
}

async function handleAudioChatStart() {
  try {
    isOpen = true
    currentChatStatus = CHAT_STATUS.WAITING_OTHERS_ACCEPT
    let isBusy;
    await request({
      url: '/dyaw/xlfw_zxhd/get_user_status',
      data: {
        user_id: otherInfo?.id
      }
    }).then(res => {
      if (res.code === '1') {
        isBusy = !!res.data.status
      }
    })
    if (isBusy) {
      // busy operation
      currentChatStatus = CHAT_STATUS.WAITING_BUSY
      // ElMessage.warning('对方忙线中')
      showFailToast('对方忙线中')
      console.info('对方忙线中');
      setTimeout(() => {
        handleClose()
      }, 5000)
      return
    };
    if (RTC_USE) {

      console.info('验证相关权限')
      // 手机版跳过验证
      try {
        console.info('验证麦克风权限')
        const microInfo = await AgoraRTC.getMicrophones()
        console.info('麦克风权限验证结束 : ', microInfo)
        if (mode === 'video') {
          console.info('验证摄像头权限')
          const camerasInfo = await AgoraRTC.getCameras()
          console.info('摄像头权限验证结束 : ', camerasInfo)
        }
      } catch (error) {
        console.error('权限验证失败 :', error)
        showFailToast('应用未进行相关授权，请授权后重启应用后再尝试')
        handleClose()
      }
      console.info('相关权限验证结束')
    }
    initRtcClient()

    await getRtcOption()

    console.info('发送拨号信息')
    const fullSendData = await handleInfoAdd('拨号中')
    console.info('发送拨号信息结束')

    await nextTick(async () => {
      if (RTC_USE) {

        console.info('初始化rtc频道')
        await rtcInstance.client!.join(rtcOptions.appId, rtcOptions.channel, rtcOptions?.token, /*rtcOptions.uid*/ user.user_id);
        console.info('初始化rtc频道结束，开始创建本地音视频轨道')
        rtcInstance.localAudioTrack = await AgoraRTC.createMicrophoneAudioTrack();
        // await rtcInstance.client!.publish(rtcInstance.localAudioTrack);
        if (mode === 'video') {
          console.info('创建本地视频轨道')
          rtcInstance.localVideoTrack = await AgoraRTC.createCameraVideoTrack();
          console.info('创建本地视频轨道结束，开始播放本地视频')
          rtcInstance.localVideoTrack.play(LocalPlayerContainerRef as HTMLElement);
          // await rtcInstance.client!.publish(rtcInstance.localVideoTrack);
        }
      }
      console.info('socket发送拨号信息')
      socketSend(ws2, {
        dxzl_stu_user_id: dyaw_xlfw_zxhd!.dxz_stu_user_id,
        dxzl_tea_user_id: dyaw_xlfw_zxhd!.dxz_tea_user_id,
        operate: CHAT_OPERATION.START,
        mode,
        // rtcOptions,
        dyaw_xlfw_zxhd,
        fullSendData,
        dxzl_id: fullSendData?.dxzl_id
      })
    })

  } catch (error) {
    console.error(error);
    handleClose()
  }

}
async function handleAudioChatCancel() {
  console.info('handleAudioChatCancel start')

  try {
    const fullSendData = await handleInfoEdit({ dxzl_status: '2' }, '已取消')
    socketSend(ws2, {
      dxzl_stu_user_id: dyaw_xlfw_zxhd!.dxz_stu_user_id,
      dxzl_tea_user_id: dyaw_xlfw_zxhd!.dxz_tea_user_id,
      operate: CHAT_OPERATION.CANCEL,
      fullSendData
    })
    isOpen = false
    if (RTC_USE)
      rtcInstance.client?.leave();
    handleSwitchUse(false)
    console.info('[success]handleAudioChatCancel end')
  } catch (error) {
    console.error('[error]handleAudioChatCancel end', error)
    isOpen = false
  }

}
async function handleAudioChatAccept() {
  console.info('handleAudioChatAccept start')
  currentChatStatus = CHAT_STATUS.WAITING_ACCEPT

  try {
    console.info('发送接听信息')
    const fullSendData = await handleInfoEdit({ dxzl_status: '3' }, '通话中')
    console.info('发送接听信息结束')
    // ...
    if (RTC_USE) {
      {

        console.info('验证相关权限')
        // 手机版跳过验证
        try {
          console.info('验证麦克风权限')
          const microInfo = await AgoraRTC.getMicrophones()
          console.info('麦克风权限验证结束 : ', microInfo)
          if (mode === 'video') {
            console.info('验证摄像头权限')
            const camerasInfo = await AgoraRTC.getCameras()
            console.info('摄像头权限验证结束 : ', camerasInfo)
          }
        } catch (error) {
          console.error('权限验证失败 :', error)
          showFailToast('应用未进行相关授权，请授权后重启应用后再尝试')
          try {
            const fullSendData = await handleInfoEdit({ dxzl_status: '4' }, '出错')
            socketSend(ws2, {
              dxzl_stu_user_id: dyaw_xlfw_zxhd!.dxz_stu_user_id,
              dxzl_tea_user_id: dyaw_xlfw_zxhd!.dxz_tea_user_id,
              operate: CHAT_OPERATION.DENY,
              fullSendData
            })
            isOpen = false
            console.info('[success] handleAudioChatError end')
          } catch (error) {
            console.error('[error] handleAudioChatError', error)
          }
        }
        console.info('相关权限验证结束')
      }
      console.info('初始化rtc频道')
      initRtcClient()
      console.info('初始化rtc频道结束')

      await getRtcOption()
      console.info('加入会话频道')
      await rtcInstance.client!.join(rtcOptions.appId, rtcOptions.channel, rtcOptions?.token, /*rtcOptions.uid*/ user.user_id);
      console.info('加入会话频道结束，开始创建本地音视频轨道')
      rtcInstance.localAudioTrack = await AgoraRTC.createMicrophoneAudioTrack();
      console.info('创建本地音频轨道结束，发布本地音频')
      await rtcInstance.client!.publish(rtcInstance.localAudioTrack);
      console.info('发布本地音频结束')
      if (mode === 'video') {
        console.info('创建本地视频轨道')
        rtcInstance.localVideoTrack = await AgoraRTC.createCameraVideoTrack();
        console.info('创建本地视频轨道结束，开始播放本地视频')
        rtcInstance.localVideoTrack.play(LocalPlayerContainerRef as HTMLElement);
        console.info('发布本地视频')
        await rtcInstance.client!.publish(rtcInstance.localVideoTrack);
        console.info('发布本地视频结束')
      }
    }
    //
    console.info('socket发送已接听信息')
    socketSend(ws2, {
      dxzl_stu_user_id: dyaw_xlfw_zxhd!.dxz_stu_user_id,
      dxzl_tea_user_id: dyaw_xlfw_zxhd!.dxz_tea_user_id,
      operate: CHAT_OPERATION.ACCEPT,
      fullSendData
    })
    console.info('socket发送已接听信息结束')
    currentChatStatus = CHAT_STATUS.CHATING
    offsetTime = 0
    offsetTimer = setInterval(() => {
      offsetTime = (offsetTime as number + 1)
    }, 1000)
  } catch (error) {
    console.error('[error] handleAudioChatAccept', error)
  }

}
async function handleAudioChatDeny() {
  console.info('handleAudioChatDeny start')
  try {
    const fullSendData = await handleInfoEdit({ dxzl_status: '4' }, '已拒接')
    socketSend(ws2, {
      dxzl_stu_user_id: dyaw_xlfw_zxhd!.dxz_stu_user_id,
      dxzl_tea_user_id: dyaw_xlfw_zxhd!.dxz_tea_user_id,
      operate: CHAT_OPERATION.DENY,
      fullSendData
    })
    isOpen = false
    console.info('[success]handleAudioChatDeny end')
  } catch (error) {
    console.error('[error] handleAudioChatDeny', error)
  }

}
async function handleAudioChatEnd() {
  console.info('handleAudioChatEnd start')
  try {
    const fullSendData = await handleInfoEdit({ dxzl_status: '4' }, /*'已结束'*/formatOffsetSec(offsetTime))
    offsetTimer && clearInterval(offsetTimer)
    if (RTC_USE) {
      await rtcInstance.client!.leave();
      handleSwitchUse(false)
    }

    socketSend(ws2, {
      dxzl_stu_user_id: dyaw_xlfw_zxhd!.dxz_stu_user_id,
      dxzl_tea_user_id: dyaw_xlfw_zxhd!.dxz_tea_user_id,
      operate: CHAT_OPERATION.END,
      fullSendData
    })
    isOpen = false
    console.info('[success]handleAudioChatEnd end')
  } catch (error) {
    console.error('[error] handleAudioChatEnd', error)
  }

}

let audioInUse = $ref(true)
let videoInUse = $ref(true)

function handleSwitchAudio(v?: boolean) {
  if (!RTC_USE) return

  audioInUse = v ?? !audioInUse
  try {
    rtcInstance.localAudioTrack!.setEnabled(audioInUse)
  } catch (error) {
    console.error(error);
  }

}
function handleSwitchVideo(v?: boolean) {
  if (!RTC_USE) return

  videoInUse = v ?? !videoInUse
  try {
    rtcInstance.localVideoTrack!.setEnabled(videoInUse)
  } catch (error) {
    console.error(error);
  }
}


function handleCloseForce() {
  if (currentChatStatus === CHAT_STATUS.CHATING) {
    handleAudioChatEnd()
  }
  else {
    handleAudioChatCancel()
  }
}

let mins = $ref(false)
let isMove = $ref(false)
let isDown = $ref(false)
function handleChangeMins() {
  isDown = false
  if (isMove) {
    isMove = false;
    return;
  }
  mins = !mins
}

</script>

<template>
  <div v-if="isOpen" class="fixed bg-transparent z-4000">
    <UseDraggable v-show="mins" class="fixed" storage-key="chat-audio" storage-type="session"
      :initial-value="{ x: 20, y: 500 }">
      <el-avatar :size="70" :src="otherInfo?.avatar" @mousedown="isDown = true" @mousemove="isMove = isDown"
        @click="handleChangeMins"></el-avatar>
    </UseDraggable>
    <div class="w-screen h-screen bg-hex-191919" v-show="!mins">
      <div class="w-full flex justify-end items-center p-2 text-light-50 h-36px space-x-2">
        <i:clarity:window-min-line class="cursor-pointer" @click="handleChangeMins" />
        <i:ic:outline-close class="cursor-pointer" @click="handleCloseForce" />
      </div>
      <div class="h-screen relative">
        <slot>

          <div v-show="mode === 'video' && currentChatStatus === CHAT_STATUS.CHATING" ref="LocalPlayerContainerRef"
            class="absolute z-6 w-144px h-174px top-80px right-10px border border-dark-50"></div>
          <div v-show="mode === 'video' && currentChatStatus === CHAT_STATUS.CHATING" ref="RemotePlayerContainerRef"
            class="absolute z-1 inset-0"></div>


          <div class="absolute z-11 left-0 bottom-36 text-xl flex justify-around w-full text-light-50 ">
            <div v-show="currentChatStatus === CHAT_STATUS.WAITING_YOU_ACCEPT"
              class="bg-green-600 w-12 h-12 rounded-1 cursor-pointer flex items-center justify-around"
              @click="handleAudioChatAccept">
              <i:ic:baseline-phone />
            </div>
            <div v-show="currentChatStatus === CHAT_STATUS.WAITING_YOU_ACCEPT"
              class="bg-red-600 w-12 h-12 rounded-1 cursor-pointer flex items-center justify-around"
              @click="handleAudioChatDeny">
              <i:mdi:phone-hangup />
            </div>
            <div v-show="currentChatStatus === CHAT_STATUS.CHATING"
              class="bg-hex-efefef text-hex-272636 w-12 h-12 rounded-1 cursor-pointer flex items-center justify-around"
              @click="handleSwitchAudio()">
              <i:ant-design:audio-outlined v-show="audioInUse" />
              <i:ant-design:audio-muted-outlined v-show="!audioInUse" />
            </div>
            <div v-show="currentChatStatus === CHAT_STATUS.CHATING"
              class="bg-red-600 w-12 h-12 rounded-1 cursor-pointer flex items-center justify-around"
              @click="handleAudioChatEnd">
              <i:ic:outline-close></i:ic:outline-close>
            </div>
            <div
              v-show="currentChatStatus === CHAT_STATUS.WAITING_OTHERS_ACCEPT || currentChatStatus === CHAT_STATUS.WAITING_BUSY"
              class="bg-red-600 w-12 h-12 rounded-1 cursor-pointer flex items-center justify-around"
              @click="handleAudioChatCancel">
              <i:ic:outline-close></i:ic:outline-close>
            </div>
            <div v-show="mode === 'video' && currentChatStatus === CHAT_STATUS.CHATING"
              class="bg-hex-efefef text-hex-272636 w-12 h-12 rounded-1 cursor-pointer flex items-center justify-around"
              @click="handleSwitchVideo()">
              <i:material-symbols:video-camera-back-rounded v-show="videoInUse" />
              <i:material-symbols:video-camera-front-off-rounded v-show="!videoInUse" />
            </div>
          </div>
          <!--  -->
          <div class="pt-24 flex_center flex-col text-light-50 space-y-4">
            <!-- <div>{{ CHAT_STATUS[currentChatStatus] }}</div> -->
            <el-avatar v-show="mode === 'audio' || (mode === 'video' && currentChatStatus !== CHAT_STATUS.CHATING)"
              :size="158" :src="otherInfo?.avatar"></el-avatar>
            <div v-show="mode === 'audio' || (mode === 'video' && currentChatStatus !== CHAT_STATUS.CHATING)">{{
              otherInfo?.realname
            }}</div>
            <!-- <div class="text-hex-909090 flex_center flex-col space-y-2 h-16"> -->
            <div class="text-hex-909090 flex_center flex-col space-y-2 h-16"
              v-show="currentChatStatus === CHAT_STATUS.WAITING_OTHERS_ACCEPT">
              <div>正在等待对方接受邀请</div>
              <i:line-md:loading-alt-loop class="text-xl" />
            </div>
            <div class="text-hex-909090 flex_center flex-col space-y-2 h-16"
              v-show="currentChatStatus === CHAT_STATUS.WAITING_YOU_ACCEPT">
              <div>邀请你语音通话...</div>
            </div>
            <div class="text-hex-909090 flex_center flex-col space-y-2 h-16"
              v-show="currentChatStatus === CHAT_STATUS.WAITING_BUSY">
              <div class="text-red-500">对方忙线中</div>
              <div class="text-red-500">请稍后再试</div>
              <i:line-md:loading-alt-loop class="text-xl" />
            </div>
            <div class="text-hex-909090 flex_center flex-col space-y-2 h-16"
              v-show="currentChatStatus === CHAT_STATUS.WAITING_ACCEPT">
              <div>接通中...</div>
            </div>
            <div class="text-hex-909090 flex_center flex-col space-y-2 h-16"
              v-show="mode === 'audio' && currentChatStatus === CHAT_STATUS.CHATING">
              <div>正在通话中</div>
              <div>{{ formatOffsetSec(offsetTime) }}</div>
            </div>
            <!-- </div> -->
          </div>
        </slot>
      </div>
    </div>

  </div>
</template>

