<template>
  <div class="Navigation">
    <div class="Navigationcontent">
      <image
        @click="Returnfunc"
        style="width: 46rpx;height: 46rpx;;"
        src="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/Return.png"
        mode="scaleToFill"
        class="Navigation-return"
      />
      <div class="Navigation-name">
        {{ Title }}
      </div>
      <div></div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, onUnmounted, ref } from "../../../adapter-vue";
import {
  TUIStore,
  StoreName,
  IConversationModel,
  TUITranslateService,
} from "@tencentcloud/chat-uikit-engine";
import { TUIGlobal } from "@tencentcloud/universal-api";
import { onLoad, onNavigationBarButtonTap } from "@dcloudio/uni-app";

const emits = defineEmits(["openGroupManagement"]);
const props = defineProps(["isGroup"]);

const currentConversation = ref<IConversationModel>();
const typingStatus = ref(false);
const Title = ref("Global"); // 初始化为默认标题

// #ifdef APP-PLUS
onNavigationBarButtonTap(() => {
  if (props.isGroup) {
    emits("openGroupManagement");
  }
});

const pages = getCurrentPages();
const currentPage = pages[pages.length - 1];
const currentWebview = currentPage.$getAppWebview();

if (!props.isGroup) {
  // hidden menu button in C2C chat
  // override current webview titleNView
  currentWebview.setStyle({
    titleNView: {
      ...currentWebview.getStyle().titleNView,
      buttons: [],
    },
  });
}
// #endif

function Returnfunc() {
  uni.navigateBack({
    delta: 1,
  });
}

const setChatHeaderContent = (content: string | undefined) => {
  Title.value = content || "Global"; // 确保默认值存在
};

onMounted(() => {
  TUIStore.watch(StoreName.CONV, {
    currentConversation: onCurrentConversationUpdated,
  });
  TUIStore.watch(StoreName.CHAT, {
    typingStatus: onTypingStatusUpdated,
  });
});

onUnmounted(() => {
  TUIStore.unwatch(StoreName.CONV, {
    currentConversation: onCurrentConversationUpdated,
  });
  TUIStore.unwatch(StoreName.CHAT, {
    typingStatus: onTypingStatusUpdated,
  });
});

onLoad(() => {
  setChatHeaderContent(currentConversation.value?.getShowName());
});

function onCurrentConversationUpdated(conversation: IConversationModel) {
  currentConversation.value = conversation;
  if (!typingStatus.value) {
    setChatHeaderContent(currentConversation?.value?.getShowName());
  }
}

function onTypingStatusUpdated(status: boolean) {
  typingStatus.value = status;
  if (typingStatus.value) {
    setChatHeaderContent(TUITranslateService.t("TUIChat.对方正在输入..."));
  } else {
    setChatHeaderContent(currentConversation.value?.getShowName());
  }
}
</script>
<style>
.Navigation-name {
  font-size: 36rpx;
  color: #000000;
  font-weight: bold;
}
.Navigation {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  width: 100%;
  height: 240rpx;
  background-image: url("https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/Navigationimg.png");
  background-position: 100% 100%;
  background-repeat: no-repeat;
}
.Navigationcontent{
  width: 80%;
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 60rpx;
}
</style>
