<!-- 自定义邀请消息 -->
<template>
  <ToolbarItemContainer
    ref="container"
    :iconFile="evaluateIcon"
    title="邀请"
    :needBottomPopup="true"
    :iconWidth="isUniFrameWork ? '36px' : '30px'"
    :iconHeight="isUniFrameWork ? '36px' : '30px'"
    @onDialogShow="onDialogShow"
    @onDialogClose="onDialogClose"
  >
    <div>
      <div class="container"></div>
      <button class="send-btn" @click="submitEvaluate">发送邀请</button>
    </div>
  </ToolbarItemContainer>
</template>

<script setup>
import TUIChatConfig from "../../config";
import ToolbarItemContainer from "../toolbar-item-container/index.vue";
import InvitationDark from "../../../../assets/icon/InvitationDark.png";
import InvitationLight from "../../../../assets/icon/InvitationLight.png";
import { ref } from "vue";
import TUIChatEngine, {
  TUIStore,
  StoreName,
  TUIChatService,
} from "@tencentcloud/chat-uikit-engine";
import { isEnabledMessageReadReceiptGlobal } from "../../utils/utils";
import OfflinePushInfoManager from "../../offlinePushInfoManager/index";

const evaluateIcon =
  TUIChatConfig.getTheme() === "dark" ? InvitationDark : InvitationLight;
const emits = defineEmits(["onDialogPopupShowOrHide"]);
const onDialogShow = () => {
  emits("onDialogPopupShowOrHide", true);
};
const onDialogClose = () => {
  emits("onDialogPopupShowOrHide", false);
};
///``````````````````````````````````````````````````````````````````````````````````````
const currentConversation = ref();

TUIStore.watch(StoreName.CONV, {
  currentConversation: (conversation) => {
    currentConversation.value = conversation;
  },
});
const container = ref();
///``````````````````````````````````````标记``````````````````````````````````````````````
const submitEvaluate = () => {
  const payload = {
    data: JSON.stringify({
      businessID: "pk",
      title: "PK邀请",
      buttonText1: "接受邀请",
      buttonText2: "拒绝邀请",
    }),
    description: "邀请参加PK",
    extension: "邀请参加PK",
  };

  //`````````````````````````````````````````````````````
  const options = {
    to:
      currentConversation?.value?.groupProfile?.groupID ||
      currentConversation?.value?.userProfile?.userID,
    conversationType: currentConversation?.value?.type,
    payload,
    needReadReceipt: isEnabledMessageReadReceiptGlobal(),
  };

  const offlinePushInfoCreateParams = {
    conversation: currentConversation.value,
    payload: options.payload,
    messageType: TUIChatEngine.TYPES.MSG_CUSTOM,
  };
  const sendMessageOptions = {
    offlinePushInfo: OfflinePushInfoManager.create(offlinePushInfoCreateParams),
  };
  TUIChatService.sendCustomMessage(options, sendMessageOptions);
  // close dialog after submit evaluate
  container?.value?.toggleDialogDisplay(false);
};
</script>

<style scoped>
.container {
  height: 300rpx;
}
.send-btn {
  margin-bottom: 100rpx;
}
</style>
