<template>
  <view
    :class="classPrefix"
    :style="'' + tools._style([customStyle])"
    @click.stop
  >
    <block v-if="status === 'error' || content.type === 'text'">
      <view :class="classPrefix + '__' + role + ' ' + classPrefix + '__' + status">
        <view class="_pre">
          <rich-text :nodes="textInfo" />
        </view>
      </view>
    </block>
    <block v-else>
      <view :class="classPrefix + '__assistant'">
        <t-chat-markdown
          :content="textInfo"
          :options="markdownProps && markdownProps.options"
          :streaming="markdownProps && markdownProps.streaming"
          @click="onClick"
        />
      </view>
    </block>
  </view>
</template>
<script>
import { prefix } from '@tdesign/uniapp/common/config';

import { uniComponent } from '@tdesign/uniapp/common/src/index';
import tools from '@tdesign/uniapp/common/utils.wxs';

import TChatMarkdown from '../chat-markdown/chat-markdown.vue';

import props from './props';


const name = `${prefix}-chat-content`;


export default {
  components: {
    TChatMarkdown,
  },
  ...uniComponent({
    name,
    options: {
      multipleSlots: true,
      styleIsolation: 'shared',
    },

    props: {
      ...props,
    },

    emits: [
      'click',
    ],
    data() {
      return {
        classPrefix: name,
        textInfo: '',
        tools,
      };
    },

    watch: {
      content: {
        handler() {
          this.setTextInfo();
        },
        immediate: true,
        deep: true,
      },
    },

    mounted() {
      this.setTextInfo();
    },

    methods: {
      getEscapeReplacement(ch) {
        const escapeReplacements = {
          '&': '&amp;',
          '<': '&lt;',
          '>': '&gt;',
          '"': '&quot;',
          '\'': '&#39;',
        };
        return escapeReplacements[ch];
      },
      escape(html, encode = false) {
        const escapeTest = /[&<>"']/;
        const escapeReplace = new RegExp(escapeTest.source, 'g');
        const escapeTestNoEncode = /[<>"']|&(?!(#\d{1,7}|#[Xx][a-fA-F0-9]{1,6}|\w+);)/;
        const escapeReplaceNoEncode = new RegExp(escapeTestNoEncode.source, 'g');
        if (encode) {
          if (escapeTest.test(html)) {
            return html.replace(escapeReplace, this.getEscapeReplacement);
          }
        } else if (escapeTestNoEncode.test(html)) {
          return html.replace(escapeReplaceNoEncode, this.getEscapeReplacement);
        }
        return html;
      },

      setTextInfo() {
      // error 状态下统一按纯文本处理，避免走 markdown 渲染
        if (this.content.type === 'text' || this.status === 'error') {
          this.textInfo = this.escape(this.content.data || '');
        } else {
          this.textInfo = this.content.data;
        }
      },

      onClick(e) {
        this.$emit('click', e);
      },
    },
  }),
};

</script>
<style scoped src="./chat-content.css"></style>
