/* eslint-disable @typescript-eslint/no-explicit-any */
<template>
  <div>
    <div
      v-if="!hideDatetime"
      class="text-xs text-gray-400 text-center pb-2 pt-4"
    >
      {{ time }}
    </div>
    <!-- 卡片消息 -->
    <ChatContentMessageCardVue
      v-if="type === 6"
      :from-myself="fromMyself"
      :content="content"
    ></ChatContentMessageCardVue>
    <div
      class="flex items-start flex-nowrap w-screen py-1.5"
      :class="{ 'flex-row-reverse': fromMyself }"
    >
      <!-- 头像  -->
      <q-avatar
        class="mx-4 min-w-chat-msg-avatar !rounded-md !w-10 !h-10"
        v-if="type !== 6"
      >
        <img
          v-if="fromMyself && userType === eRole.user"
          :src="userAvatarUrl"
        />
        <img
          v-if="fromMyself && userType !== eRole.user"
          :src="staffAvatarUrl"
          class="object-contain"
        />
        <img
          v-else-if="!fromMyself && userType === eRole.user && !isRoboot"
          :src="staffAvatarUrl"
          class="object-contain"
        />
        <img
          v-else-if="!fromMyself && userType === eRole.user && isRoboot"
          src="@/assets/img/roboot.png"
          class="object-contain"
          :class="{ filterGray: isRobootOffLine }"
        />
        <img
          v-else-if="!fromMyself && userType !== eRole.user"
          :src="userAvatarUrl"
        />
      </q-avatar>

      <!-- 消息气泡 -->
      <div :class="[{ 'flex-row-reverse': fromMyself }]">
        <div :class="{ 'text-right': fromMyself }" class="message_"></div>
        <div
          :class="[{ 'flex-row-reverse': fromMyself }]"
          class="flex items-center max-w-chat-msg-bubble"
        >
          <div
            v-touch-hold:300="handleTouchHoldItem"
            @click.capture.stop="clickItem"
            v-if="type === 1 || type === ChatMessageTypes.robot"
          >
            <div @click.capture="stop">
              <van-popover
                @select="onTextMsgSelect"
                :actions="textMsgActions"
                v-model:show="showPopOver"
              >
                <template #reference>
                  <!-- 文本消息 -->
                  <ChatContentMessageTextVue
                    :from-myself="fromMyself"
                    :content="content"
                  />
                </template>
              </van-popover>
            </div>
          </div>

          <!-- 图片消息 -->
          <!-- <ChatContentMessageImageVue
            v-else-if="type === 3"
            :from-myself="fromMyself"
            :state="state"
            :content="content"
            :uploadProgress="uploadProgress"
          />-->

          <!-- <ChatContentMessageVideoVue
            v-else-if="type === 4"
            :from-myself="fromMyself"
            :state="state"
            :content="content"
            :uploadProgress="uploadProgress"
          />-->

          <!-- 消息状态 -->
          <div
            class="w-10 self-stretch flex flex-row justify-center items-center"
          >
            <!-- 发送失败 -->
            <div
              v-if="state === 'failure'"
              @click="resend"
              class="w-full h-full flex flex-row justify-center items-center"
            >
              <q-icon name="error" size="22px" color="negative" />
            </div>
            <!-- 正在发送 -->
            <q-spinner-ios
              v-else-if="state === 'pending' && !isMedia"
              color="grey"
              size="1.25rem"
              :thickness="5"
            />
            <q-icon
              v-else-if="state === 'pending' && isMedia"
              @click="abort"
              name="cancel"
              size="22px"
              color="negative"
            />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { computed, defineComponent, ref, PropType } from "vue";
import default_avatar_url from "@/assets/user_avatar.png";
import { messageStore } from "@/store/messagesStore";
import ChatContentMessageTextVue from "./ChatContentMessageText.vue";
import ChatContentMessageCardVue from "./ChatContentMessageCard.vue";
import userAvatarUrl from "@/assets/icons/avatar.png";
import staffAvatarUrl from "@/assets/icons/staff.png";
// import ChatContentMessageImageVue from "./ChatContentMessageImage.vue";
import { ChatMessageTypes } from "@/types/chatMessageTypes";
// import ChatContentMessageVideoVue from "./ChatContentMessageVideo.vue";
import ChatMessageDB from "@/db/ChatMessageDB";
import { useRoute } from "vue-router";
import { clipboardValue } from "@/store/AppStore";
import { getUserMsg } from "@/utils/userMsg";
import { eRole } from "@/types/roleType";

export default defineComponent({
  components: {
    ChatContentMessageTextVue,
    ChatContentMessageCardVue,
    // ChatContentMessageImageVue,
    // ChatContentMessageVideoVue,
  },

  props: {
    fromMyself: Boolean,
    content: { type: Object, required: true },
    type: { type: Number, required: true },
    time: String,
    state: String as PropType<string | null | undefined>,
    uuid: { type: String, required: true },
    hideDatetime: Boolean,
    uploadProgress: Object,
    logid: { type: String, required: false },
    isRobootOffLine: { type: Boolean, required: false },
  },

  setup(props) {
    const route = useRoute();
    /** 重发消息 */
    const resend = () => {
      messageStore.sendMessage({
        type: props.type,
        content: props.content,
        uuid: props.uuid,
        target: route.query.targetId as string,
      });
    };

    const userType = getUserMsg()?.role2;

    const abort = () => {
      messageStore.abortSendingMessage(
        props.uuid,
        props.uploadProgress?.checkpoint
      );
    };

    const isMedia = computed(() => {
      return (
        props.type === ChatMessageTypes.Image ||
        props.type === ChatMessageTypes.Video
      );
    });

    const textMsgActions = [
      {
        text: "删除",
        // eslint-disable-next-line @typescript-eslint/no-explicit-any
        cb(data: { content: any; uuid: string; logid?: string }) {
          ChatMessageDB.getInstance().deleteMsg({
            uuid: data.uuid,
            logid: data.logid,
          });
          const index = messageStore.messages.findIndex((i) => {
            return i.uuid === data.uuid;
          });
          messageStore.appendingNewMessage.value = false;
          messageStore.messages.splice(index, 1);
        },
      },
      {
        text: "复制",
        // eslint-disable-next-line @typescript-eslint/no-explicit-any
        cb(data: { content: any; uuid: string; logid: string }) {
          clipboardValue.value = data.content.content;
        },
      },
    ];
    const onTextMsgSelect = (action: typeof textMsgActions[0]) => {
      action.cb({
        content: props.content,
        uuid: props.uuid,
        logid: props.logid,
      });
    };
    const showPopOver = ref(false);
    const handleTouchHoldItem = () => {
      showPopOver.value = true;
    };
    const clickItem = () => {
      showPopOver.value = false;
    };

    const isRoboot = computed(() => {
      return route.query.outlet;
    });

    return {
      default_avatar_url,
      resend,
      isMedia,
      abort,
      ChatMessageTypes,
      handleTouchHoldItem,
      onTextMsgSelect,
      textMsgActions,
      showPopOver,
      clickItem,
      eRole,
      userType,
      userAvatarUrl,
      staffAvatarUrl,
      isRoboot,
    };
  },
});
</script>
<style scoped>
.message_ {
  font-size: 12px;
  font-family: PingFangSC-Regular, PingFang SC;
  color: #adadad;
  font-weight: 400;
}
</style>
