<template>
  <div @click="handleClickConv">
    <ConversationList @handleSwitchConversation="handleSwitchConversation" @newConversationUpdated="newConversationUpdated" @updateHlwDoctorOnlineStatus="updateHlwDoctorOnlineStatus" />
  </div>
</template>
<script lang="ts" setup>
import { TUIStore, StoreName } from "@tencentcloud/chat-uikit-engine";
import { ref } from "../../adapter-vue";
import ConversationList from "./conversation-list/index.vue";
import ConversationHeader from "./conversation-header/index.vue";
import ConversationNetwork from "./conversation-network/index.vue";

const emits = defineEmits(["handleSwitchConversation", "newConversationUpdated", "updateHlwDoctorOnlineStatus"]);
const totalUnreadCount = ref(0);
const headerRef = ref<typeof ConversationHeader>();
const isShowConversationHeader = ref<boolean>(true);
TUIStore.watch(StoreName.CONV, {
  totalUnreadCount: (count: number) => {
    totalUnreadCount.value = count;
  },
});
TUIStore.watch(StoreName.CUSTOM, {
  isShowConversationHeader: (showStatus: boolean) => {
    isShowConversationHeader.value = showStatus !== false;
  },
});

const handleSwitchConversation = (conversationID: string, order: object) => {
  console.log("handleSwitchConversation", conversationID, order);
  emits("handleSwitchConversation", conversationID, order);
};
const newConversationUpdated = () => {
  emits("newConversationUpdated");
};
const updateHlwDoctorOnlineStatus = (status: string) => {
  emits("updateHlwDoctorOnlineStatus", status);
};

const handleClickConv = () => {
  headerRef?.value?.closeChildren();
};
</script>

<style lang="scss" scoped src="./style/index.scss"></style>
