<template>
    <div
        class="msg-detail inline-text"
        v-html="format2Link(messageBody.msg.text || emptyText)"
    ></div>
</template>

<script lang="ts">
    import { replaceText2Link } from "@/customer-service/utils";
    import xim from "@/customer-service/xim";
    import { Component } from "vue-property-decorator";
    import BaseMessage from "./index";

    @Component({ components: {} })
    export default class Index extends BaseMessage {
        protected readonly emptyText = "　";

        protected format2Link(text: string) {
            let t = replaceText2Link(text);
            const keywords = xim.getMatchedTextKeywords();
            for (const item of keywords) {
                const r = new RegExp(item, "g");
                t = t.replace(r, `<span class="highlight">${item}</span>`);
            }
            return t;
        }
    }
</script>

<style lang="less" scoped>
    .inline-text {
        display: inline-block;
        white-space: pre-wrap;
        text-align: left;
        color: #409eff;
        /deep/ .highlight {
            color: #e87005;
        }
    }
</style>