<template>
  <div class="flex text-sm text-gray-900">
    <div>
      <audio src=""></audio>
      <audio src=""></audio>
    </div>
    <!-- left sidebar -->
    <Sidebar @switchUser="onSwitchUser" ref="sidebarRef"/>
    <main class="grow flex flex-col h-screen relative min-w-[420px]">
      <Chat ref="chatRef" @onNewMessage="onNewMessage" @addTagToUser="addTagToUser" @unbindSession="unbindSession" @openAudio="openAudio"/>
    </main>
    <div>
      <ReplyPresets @setContent="setContent"/>
    </div>
  </div>
</template>

<script setup lang="ts">
import {onMounted, ref} from 'vue'
import Sidebar from './components/Sidebar.vue'
import Chat from './components/Chat.vue'
import ReplyPresets from './components/ReplyPresets.vue';
import type { TagRelation } from '@/types/global';
import { ElMessage, ElNotification } from 'element-plus';
const chatRef = ref()
const sidebarRef =ref()

const onSwitchUser =() => {
  chatRef.value.onSwitchUser()
}

const onNewMessage = (body:any) => {
  sidebarRef.value.onNewMessage(body)
}

const setContent = (content:any) => {
  console.log('setContent', content)
  chatRef.value.setContent(content)
}

const addTagToUser = (item:TagRelation) => {
  console.log('index addTagToUser', item)
  sidebarRef.value.addTagToUser(item)
}

const unbindSession = (userId: number) => {
  sidebarRef.value.unbindSession(userId)
}

const openAudio = (val:boolean)=> {
  sidebarRef.value.openAudio(val)
}

onMounted(() => {
  ElMessage({
    message: '点击页面聊天窗空白地方开启消息提示音!',
    type: 'success',
  })
})

</script>
