<template>
    <div class="nus_htmlcont">
        <component :is="introCom"></component>
    </div>
</template>

<script>
import WidgetTmp from '../_comm/WidgetTmp';
import NuImgc from '../img/imgc';

export default {
    extends: WidgetTmp,
    name: 'NuHtmlcont',
    props: {
        htmlText: {}
    },
    components: {
        NuImgc
    },
    computed: {
        /**
         * 挂载商品介绍组件
         * @return {String}
         */
        introCom () {
            const _that = this;
            let _details = _that.htmlText || '';
            // 处理图片
            _details = _details.replace(/<img([^>]+)>/gi, ($s1, $s2) => {
                $s2 = $s2.replace(/^\s+|\/\s*$/gi, '');
                $s2 = $s2.replace(/src\s*=/ig, 'imgUrl=');
                let _attrArr = $s2.split(/\s+/) || [];
                let _attrStr = _attrArr.join(' ');
                let _res = `<nu-imgc ${_attrStr}></nu-imgc>`;
                return _res;
            });
            let IntrCom = this.$root.constructor.extend({
                template: `<div>${_details}</div>`,
                components: {
                    NuImgc
                }
            });
            return IntrCom;
        }
    }
};
</script>

<style lang='scss'>
@import '../../../_assets/style/_iconFont.scss';
@import '../../../_assets/style/_var.scss';
@import '../../../_assets/style/_mixin.scss';
.nus_htmlcont {
    width: 100%;
}
</style>
