<template>
	<view data-component-name="diy-rich-text" class="rich-text-box" :style="richTextWarpCss">
		<rich-text :nodes="html" @click="handlerClick" @tap="handlerClick"></rich-text>
	</view>
</template>

<script>
// 富文本
import htmlParser from '@/common/js/html-parser';
import DiyMinx from './minx.js'
export default {
	name: 'diy-rich-text',
	props: {
		value: {
			type: Object
		}
	},
	data() {
		return {
			html: ''
		};
	},
	created() {
		this.html = htmlParser(this.value.html);
	},
	mixins: [DiyMinx],
	watch: {
		// 组件刷新监听
		componentRefresh: function (nval) { }
	},
	computed: {
		richTextWarpCss: function () {
			var obj = '';
			obj += 'background-color:' + this.value.componentBgColor + ';';
			if (this.value.componentAngle == 'round') {
				obj += 'border-top-left-radius:' + this.value.topAroundRadius * 2 + 'rpx;';
				obj += 'border-top-right-radius:' + this.value.topAroundRadius * 2 + 'rpx;';
				obj += 'border-bottom-left-radius:' + this.value.bottomAroundRadius * 2 + 'rpx;';
				obj += 'border-bottom-right-radius:' + this.value.bottomAroundRadius * 2 + 'rpx;';
			}
			return obj;
		}
	},
	mounted() { },
	methods: {
		async handlerClick(item) {
			await this.__$emitEvent({
				eventName: 'rich-text-tap', data: item, promiseCallback: (event, handler, awaitedResult) => {
					if (!awaitedResult) return;
				}
			})
		}
	}
};
</script>

<style lang="scss">
.rich-text-box {
	padding: $padding;
	box-sizing: border-box;
	height: auto;
	line-height: 1.5;
	white-space: pre-wrap;
	word-break: break-all;
}
</style>
