<template>
  <view class="container">
    <view class="chat-ai">
      <view class="loading-container">
        <image
          v-if="isLoading"
          class="loading-img"
          src="/static/msg_loading.svg"
        />
        <!-- <loading v-if="isLoading" /> -->
        <ChatMarkdown :key="textKey" :text="processedText" />
        <DotLoading v-if="isLoading" />
      </view>
      <slot name="content"></slot>
    </view>
    <slot name="footer"></slot>
  </view>
</template>

<script setup>
import { defineProps, computed, ref, watch } from "vue";
import ChatMarkdown from "./ChatMarkdown.vue";
import loading from "@/pages/loading/loading.vue";
import DotLoading from "@/pages/loading/DotLoading.vue";

const props = defineProps({
  text: {
    type: String,
    default: "",
  },
  isLoading: {
    type: Boolean,
    default: false,
  },
});

// 用于强制重新渲染的key
const textKey = ref(0);

// 处理文本内容
const processedText = computed(() => {
  if (!props.text) {
    return "";
  }

  // 确保文本是字符串类型
  const textStr = String(props.text);

  // 处理加载状态的文本
  if (textStr.includes("加载中") || textStr.includes("...")) {
    return textStr;
  }

  return textStr;
});

// 监听text变化，强制重新渲染
watch(
  () => props.text,
  (newText, oldText) => {
    if (newText !== oldText) {
      textKey.value++;
    }
  },
  { immediate: true }
);
</script>

<style lang="scss" scoped>
.container {
  display: flex;
  flex-direction: column;
  max-width: 100%; // ✅ 限制最大宽度
  overflow-x: hidden; // ✅ 防止横向撑开

  .chat-ai {
    margin: 6px 12px;
    padding: 0 12px;
    max-width: 100%; // ✅ 限制最大宽度
    min-width: 100px;
    background: rgba(255, 255, 255, 0.4);
    box-shadow: 2px 2px 6px 0px rgba(0, 0, 0, 0.1);
    border-radius: 4px 20px 20px 20px;
    border: 1px solid;
    border-color: #ffffff;
  }
}

.loading-container {
  display: flex;
  align-items: center;
  padding: 4px 0;
  max-width: 100%; // ✅ 限制最大宽度
}

.loading-img {
  margin-left: -4px;
  width: 32px;
  height: 32px;
}
</style>
