<script setup lang="ts">
import { computed, nextTick, onMounted, ref, watch } from 'vue'
import { Image, Spin } from 'ant-design-vue'
import { MdPreview } from 'md-editor-v3'
import 'md-editor-v3/lib/style.css'
import { throttle } from 'lodash-es'
import type { MessageItem } from './index.d'
import { SvgIcon } from '@/components/SvgIcon'
import { MessageStatusEnum, MessageTypeEnum } from '@/enums/messageEnum'
import { MenuTypeEnum } from '@/enums/menuEnum'
import { copyText } from '@/utils/copyTextToClipboard'
import { useMessageStore } from '@/store/moules/messageStore/index'
import { MqttContentErrorEnum } from '@/enums/mqttEnum'

const props = defineProps({
  elIndex: {
    type: Number,
    default: 0,
  },
  height: {
    type: String,
    default: 'calc(100% - 120px)',
  },
  list: {
    type: Array as PropType<MessageItem[]>,
    default: () => [],
  },
  aiWidthType: {
    type: String as PropType<'auto' | 'full'>,
    default: 'full',
  },
})

const emit = defineEmits(['onScrollTop', 'reloadMessage'])

defineExpose({ seamlessScrollToTop, getElementOffsetTop })

const messageStore = useMessageStore()

const messageRef = ref<any>(null)
const filstDivTop = ref(0)

const defaultScrollTop = ref(0) // 默认滚动距离
const isAutoScroll = ref(true) // 是否自动滚动
const conversationData = computed(() => messageStore.getConversationData)
const throttleSetHrefTarget = throttle(setHrefTarget, 500)

watch(
  () => props.list[props.list.length - 1],
  () => {
    throttleSetHrefTarget()
    if (isAutoScroll.value) {
      scrollToBottom()
    }
  },
  { immediate: true },
)

watch(
  () => props.list.length,
  () => {
    throttleSetHrefTarget()
  },
)

/**
 * @description: 滚动到底部
 */
async function scrollToBottom() {
  if (!messageRef.value) {
    return
  }
  await nextTick()
  if (messageRef.value) {
    defaultScrollTop.value = messageRef.value.scrollTop
    messageRef.value.scrollTo(0, messageRef.value.scrollHeight)
  }
}

/**
 * @description: 监听滚动
 */
function onScroll() {
  if (!messageRef.value) {
    return
  }

  // 滚动距离 - 默认距离 > -1px，停止自动滚动
  if (messageRef.value.scrollTop - defaultScrollTop.value > -1) {
    isAutoScroll.value = true
  }
  else {
    isAutoScroll.value = false
  }
  emit('onScrollTop', messageRef.value.scrollTop)
}

/**
 * @description: 上滑加载无缝滚动
 */
async function seamlessScrollToTop() {
  if (!messageRef.value) {
    return
  }
  messageRef.value.scrollTo(0, filstDivTop.value)
}

/**
 * @description: 获取某个元素的滚动条位置
 */
async function getElementOffsetTop() {
  if (messageRef.value) {
    filstDivTop.value = messageRef.value.children[props.elIndex].offsetTop
  }
}

/**
 * @description: 重新回答
 */
function reloadMessage() {
  emit('reloadMessage')
}

/**
 * @description: 给链接添加target="_blank"
 */
async function setHrefTarget() {
  if (messageRef.value && props.list.length) {
    await nextTick()
    const links = messageRef.value.querySelectorAll('a')
    links.forEach((item: { target: string }) => {
      item.target = '_blank'
    })
  }
}

onMounted(async () => {
  scrollToBottom()
  throttleSetHrefTarget()
})
</script>

<template>
  <div ref="messageRef" class="app-message" @scroll="onScroll">
    <div v-for="(item, index) in list" :key="item.time + index" class="item">
      <div v-if="item.messageType === MessageTypeEnum.USER" class="user">
        <div class="content">
          <MdPreview
            :editor-id="`preview-only-user${index}${Date.now()}`"
            :model-value="item.content"
          />
        </div>
        <img class="icon-user" src="@/assets/images/conversation/user.png" alt="">
      </div>
      <div
        v-if="item.messageType === MessageTypeEnum.AI || item.messageType === MessageTypeEnum.DESCRIBE"
        class="ai"
      >
        <img class="icon-ai" src="@/assets/images/conversation/logo.png" alt="">
        <div class="content" :class="[aiWidthType === 'auto' ? 'width-auto' : 'width-full']">
          <div v-if="conversationData?.type === MenuTypeEnum.TEXT_TO_IMAGE" class="pt-2 pb-2">
            <Spin tip="正在生成中..." :spinning="item.messageStatus !== MessageStatusEnum.END">
              <Image
                v-if="!item.content.includes(MqttContentErrorEnum.SENSITIVE_WORD)"
                class="mb-2"
                :width="400"
                :height="400"
                :src="item.content"
                fallback="data:image/png;base64,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aOahnAYjQIAAAQL5App5vrkZCRAgQIBAqIBmHsppMAIECBAgkC+gmeebm5EAAQIECIQKaOahnAYjQIAAAQL5App5vrkZCRAgQIBAqIBmHsppMAIECBAgkC+gmeebm5EAAQIECIQKaOahnAYjQIAAAQL5App5vrkZCRAgQIBAqIBmHsppMAIECBAgkC+gmeebm5EAAQIECIQKaOahnAYjQIAAAQL5App5vrkZCRAgQIBAqIBmHsppMAIECBAgkC+gmeebm5EAAQIECIQKaOahnAYjQIAAAQL5App5vrkZCRAgQIBAqIBmHsppMAIECBAgkC+gmeebm5EAAQIECIQKaOahnAYjQIAAAQL5App5vrkZCRAgQIBAqIBmHsppMAIECBAgkC+gmeebm5EAAQIECIQKaOahnAYjQIAAAQL5App5vrkZCRAgQIBAqIBmHsppMAIECBAgkC+gmeebm5EAAQIECIQKaOahnAYjQIAAAQL5App5vrkZCRAgQIBAqIBmHsppMAIECBAgkC+gmeebm5EAAQIECIQKaOahnAYjQIAAAQL5App5vrkZCRAgQIBAqIBmHsppMAIECBAgkC+gmeebm5EAAQIECIQKaOahnAYjQIAAAQL5App5vrkZCRAgQIBAqIBmHsppMAIECBAgkC+gmeebm5EAAQIECIQKaOahnAYjQIAAAQL5App5vrkZCRAgQIBAqIBmHsppMAIECBAgkC+gmeebm5EAAQIECIQKaOahnAYjQIAAAQL5App5vrkZCRAgQIBAqIBmHsppMAIECBAgkC+gmeebm5EAAQIECIQKaOahnAYjQIAAAQL5App5vrkZCRAgQIBAqIBmHsppMAIECBAgkC+gmeebm5EAAQIECIQKaOahnAYjQIAAAQL5App5vrkZCRAgQIBAqIBmHsppMAIECBAgkC+gmeebm5EAAQIECIQKaOahnAYjQIAAAQL5App5vrkZCRAgQIBAqIBmHsppMAIECBAgkC+gmeebm5EAAQIECIQKaOahnAYjQIAAAQL5App5vrkZCRAgQIBAqIBmHsppMAIECBAgkC+gmeebm5EAAQIECIQKaOahnAYjQIAAAQL5App5vrkZCRAgQIBAqIBmHsppMAIECBAgkC+gmeebm5EAAQIECIQKaOahnAYjQIAAAQL5App5vrkZCRAgQIBAqIBmHsppMAIE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"
              ></Image>
            </Spin>
            <!-- <p v-if="!item.content.includes('http')" class="mb-0">
              {{ item.content }}
            </p> -->
          </div>
          <div v-else>
            <MdPreview
              :editor-id="`preview-only-ai${index}${Date.now()}`"
              :model-value="item.content"
            />
            <div v-if="item.messageStatus !== MessageStatusEnum.END" class="flex items-center pt-1 text-stone-600">
              <Spin></Spin>
              <span class="ml-2 mb-1">正在思考中 . . .</span>
            </div>
          </div>
        </div>
        <div v-if="item.messageType !== MessageTypeEnum.DESCRIBE" class="w-full">
          <div v-if="item.messageStatus === MessageStatusEnum.ERROR" class="error">
            哎呀，出问题了...
          </div>

          <div v-if="item.messageStatus === MessageStatusEnum.END" class="btns">
            <div class="copy" @click="copyText(item.content)">
              <SvgIcon class="icon" name="copy"></SvgIcon>
              复制
            </div>
            <div
              v-if="
                index === list.length - 1
                  && conversationData?.type !== MenuTypeEnum.VISUAL_ANALYSIS"
              class="reload"
              @click="reloadMessage"
            >
              <SvgIcon class="icon" name="again"></SvgIcon>
              重新回答
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
@include app('message') {
  height: v-bind(height);
  overflow: auto;
  box-sizing: border-box;
  :deep(.md-editor-preview) {
    font-size: 14px;
  }
  :deep(.md-editor-preview-wrapper) {
    padding: 0;
    .text-to-image {
      width: 30%;
    }
  }

  .item {
    padding: 0 15px;
    margin-top: 20px;
    .user,
    .ai {
      display: flex;
    }
    .user {
      justify-content: flex-end;
      .content {
        max-width: calc(100% - 110px);
        padding: 5px 15px;
        background: #edf3ff;
        border-radius: 10px;
        :deep(.md-editor-preview-wrapper) {
          img {
            width: 400px;
            display: block;
          }
        }

        div {
          background: #edf3ff;
        }
      }
      .icon-user {
        width: 40px;
        height: 40px;
        margin-left: 15px;
      }
    }
    .ai {
      position: relative;
      margin-bottom: 15px;
      display: flex;
      flex-wrap: wrap;
      .icon-ai {
        width: 40px;
        height: 40px;
        margin-right: 15px;
      }
      .icon {
        margin-right: 5px;
      }
      .content {
        padding: 5px 15px;
        background: #ffffff;
        // box-shadow: 0px 2px 10px 0px rgba(128, 135, 152, 0.4);
        border-radius: 10px;
        border: 1px solid #d8dde7;
      }
      .width-auto {
        max-width: calc(100% - 110px);
      }
      .width-full {
        width: calc(100% - 110px);
      }
      .error {
        width: 100%;
        color: red;
        height: 30px;
        padding-left: 60px;
        margin-top: 10px;
      }
      .btns {
        width: 100%;
        height: 30px;
        padding-left: 60px;
        margin: 10px auto 0 auto;
        display: flex;
        align-items: center;
        .copy {
          color: #4670e3;
          margin-right: 20px;
          cursor: pointer;
        }
        .reload {
          color: #4670e3;
          cursor: pointer;
        }
      }
    }
  }
}
</style>
