<template>
  <div :class="['chat-header', !isPC && 'chat-header-h5']">
    <div v-if="!isPC && isNotRoomChat" :class="['chat-header-back', !isPC && 'chat-header-h5-back']"
      @click="closeChat(currentConversation.conversationID)">
      <Icon :file="backSVG" />
    </div>
    <div class="chat-header-container text-center">
      <div v-if="isNotRoomChat" class="flex items-center" :class="['chat-header-content', !isPC && 'chat-header-h5-content']"
        style="margin-right: 0;">
        {{ order.name }}/{{ order.sex }}/{{ order.age }}
        <el-tag v-if="order.consultType ==='onlineMedicinePurchase'" class="ml-2" type="warning">在线配药</el-tag>
        <el-tag v-if="order.consultType ==='wineConsult'" class="ml-2" type="success">中药饮片</el-tag>
        <span v-if="order.expectVideoConsult" class="text-blue-500 ml-2">(患者希望视频问诊)</span>
      </div>
      <div>
        <!-- <JoinGroupCard v-if="isPC" /> -->
      </div>
    </div>
    <div :class="['chat-header-setting', !isPC && 'chat-header-h5-setting']">
      <div v-for="(item, index) in props.headerExtensionList" :key="index" @click.stop="handleExtensions(item)">
        <Icon :file="item.icon" />
      </div>
    </div>
    <div class="flex items-center">
      <div
        class="flex-shrink-0 mr-5px border border-blue-500 rounded px-10px py-4px flex-shrink-0 cursor-pointer text-blue-500 text-14px"
        @click="showArchive()">病历档案
      </div>
      <div v-if="isShowIllnessSummary"
        class="flex-shrink-0 border border-blue-500 rounded px-10px py-4px flex-shrink-0 cursor-pointer text-blue-500 text-14px"
        @click="showIllnessSummary">
        本次病情概要
      </div>
      <div v-if="diagnosisExist"
        class="ml-5px flex-shrink-0 border border-blue-500 rounded px-10px py-4px flex-shrink-0 cursor-pointer text-blue-500 text-14px"
        @click="showDiagnosisDrawer">
        预览本次医嘱
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { ref, onMounted, onUnmounted, withDefaults, inject } from "../../../adapter-vue";
import { TUIStore, StoreName, TUITranslateService, IConversationModel } from "@tencentcloud/chat-uikit-engine";
import { TUIConstants, ExtensionInfo } from "@tencentcloud/tui-core";
// import { JoinGroupCard } from '@tencentcloud/call-uikit-vue';
import Icon from "../../common/Icon.vue";
import backSVG from "../../../assets/icon/back.svg";
import { isPC } from "../../../utils/env";
import TUIChatConfig from "../config";

const props = withDefaults(
  defineProps<{
    headerExtensionList: ExtensionInfo[];
    order: any;
  }>(),
  {
    headerExtensionList: () => [],
  }
);
const showIllnessSummary = inject("showIllnessSummary", () => {}) as Function;
const showArchive = inject("showPendingOrderArchive", () => {}) as Function;

const isShowIllnessSummary = inject("isShowIllnessSummary");
const diagnosisExist = inject("diagnosisExist");
const showDiagnosisDrawer = inject("showDiagnosisDrawer", () => {});

const emits = defineEmits(["closeChat"]);
const currentConversation = ref<IConversationModel>();
const currentConversationName = ref("");
const typingStatus = ref(false);
const groupID = ref("");
const isNotRoomChat = ref<boolean>(TUIChatConfig.getChatType() !== TUIConstants.TUIChat.TYPE.ROOM);

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,
  });
});

const closeChat = (conversationID: string | undefined) => {
  emits("closeChat", conversationID);
};

const handleExtensions = (item: ExtensionInfo) => {
  item.listener.onClicked?.({ groupID: groupID.value });
};

function onCurrentConversationUpdated(conversation: IConversationModel) {
  currentConversation.value = conversation;
  groupID.value = currentConversation.value?.groupProfile?.groupID;
  currentConversationName.value = currentConversation?.value?.getShowName();
}

function onTypingStatusUpdated(status: boolean) {
  typingStatus.value = status;
  if (typingStatus.value) {
    currentConversationName.value = TUITranslateService.t("TUIChat.对方正在输入");
  } else {
    currentConversationName.value = currentConversation.value?.getShowName() || "";
  }
}
</script>
<style lang="scss" scoped>
.chat-header {
  display: flex;
  min-width: 0;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #eee;

  &-container {
    display: flex;
    min-width: 0;
    flex-direction: column;
    justify-content: flex-start;
  }

  &-content {
    margin-right: 20px;
    flex: 1;
    font-size: 16px;
    line-height: 30px;
    font-family: PingFangSC-Medium;
    font-weight: 500;
    color: #000;
    letter-spacing: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  &-back,
  &-setting {
    width: 27px;
    height: 27px;

    .icon {
      width: 100%;
      height: 100%;
    }
  }
}

.chat-header-h5 {
  &-back {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  &-content {
    margin: 0 20px;
    text-align: center;
  }
}
</style>
