<template>
	<!--基础元素-->

	<view class="parse" :class="className" v-if="!loading">
		<template v-for="(node,index) of nodes" :key="index">
			<parseTemplate :node="node" />
		</template>
	</view>
</template>

<script>
	import HtmlToJson from './libs/html2json';
	import parseTemplate from './parseTemplate.vue';

	export default {
		name: 'wxParse',
		components: {
			parseTemplate,
		},
		props: {
			loading: {
				type: Boolean,
				default: false,
			},
			className: {
				type: String,
				default: '',
			},
			content: {
				type: String,
				default: '',
			},
			noData: {
				type: String,
				default: '<div style="color: red;">数据不能为空</div>',
			},
			startHandler: {
				type: Function,
				default () {
					return (node) => {
						node.attr.class = null;
						node.attr.style = null;
					};
				},
			},
			endHandler: {
				type: Function,
				default: null,
			},
			charsHandler: {
				type: Function,
				default: null,
			},
			imageProp: {
				type: Object,
				default () {
					return {
						mode: 'aspectFit',
						padding: 0,
						lazyLoad: false,
						domain: '',
					};
				},
			},
		},
		emits: ['navigate', 'preview'],
		data() {
			return {
				imageUrls: [],
			};
		},
		computed: {
			nodes() {
				const {
					content,
					noData,
					imageProp,
					startHandler,
					endHandler,
					charsHandler,
				} = this;
				const parseData = content || noData;
				const customHandler = {
					start: startHandler,
					end: endHandler,
					chars: charsHandler,
				};
				const results = HtmlToJson(parseData, customHandler, imageProp, this);
				this.imageUrls = results.imageUrls;
				console.log('result', results, customHandler)
				return results.nodes;
			},
		},
		methods: {
			navigate(href, $event) {
				this.$emit('navigate', href, $event);
			},
			preview(src, $event) {
				if (!this.imageUrls.length) return;
				wx.previewImage({
					current: src,
					urls: this.imageUrls,
				});
				this.$emit('preview', src, $event);
			},
			removeImageUrl(src) {
				const {
					imageUrls
				} = this;
				imageUrls.splice(imageUrls.indexOf(src), 1);
			},
		},
	};
</script>

<style lang="scss">
	// @import url("@/components/parse/style.scss");
</style>