<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 w-chat-msg-avatar h-chat-msg-avatar !rounded-md"
        v-if="type !== 6"
      >
        <img :src="default_avatar_url" />
      </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, onMounted } 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 ChatContentMessageImageVue from "./ChatContentMessageImage.vue";
import { ChatMessageTypes } from "@/types/chatMessageTypes";
// import ChatContentMessageVideoVue from "./ChatContentMessageVideo.vue";
import { target } from "@/store/appCallerStore";
import { copyToClipboard } from 'quasar'
import { Toast } from "vant";
import ChatMessageDB from "@/db/ChatMessageDB";
import { useRoute } from "vue-router";
import { clipboardValue } from "@/store/AppStore";


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

  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 abort = () => {
      messageStore.abortSendingMessage(
        props.uuid,
        props.uploadProgress?.checkpoint
      );
    };

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


    const textMsgActions = [
      {
        text: '删除', 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: '复制', 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;
    }

    return {
      default_avatar_url, resend, isMedia, abort, ChatMessageTypes, handleTouchHoldItem,
      onTextMsgSelect,
      textMsgActions,
      showPopOver,
      clickItem,
    };
  },
});

</script>
<style scoped>
.message_ {
  font-size: 12px;
  font-family: PingFangSC-Regular, PingFang SC;
  color: #adadad;
  font-weight: 400;
}
</style>