<template>
  <div class="Navigation">
    <div class="Navigation-name">
      {{ Title }}
    </div>
    <image
      src="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/Navigationimg.png"
      mode="scaleToFill"
      class="Navigationimg"
    />
    <image
      @click="Returnfunc"
      src="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/Return.png"
      mode="scaleToFill"
      class="Return"
    />
  </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>
.Return {
  width: 46rpx;
  height: 46rpx;
  position: absolute;
  top: 110rpx;
  left: 40rpx;
  z-index: 999;
  font-weight: bold;
}
.Navigationimg {
  width: 100%;
  height: 240rpx;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}
.Navigation-name{
  position: absolute;
  top: 110rpx;
  left: 320rpx;
  font-size: 36rpx;
  color: #000000;
  font-weight: bold;
}
.Navigation{
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  width: 100%;
  height: 240rpx;
}
</style>