<!-- 图文描述组件（图文预览和图文复制） -->
<template lang="html">
	<div id="_flag4unlimit">
		<div  v-if="can_select==0" class="image-text-box t2 forbidden-copy" oncontextmenu="return false">
			<div ref="detail_div" id="detail_div" class="detail_div" v-html="content" @click="preview"></div>
		</div>
		<div  v-else class="image-text-box t2">
			<div ref="detail_div" id="detail_div" class="detail_div" v-html="content" @click="preview"></div>
		</div>
	</div>
</template>
<script>
	export default {
		props: ['content', 'can_select'],
		data: function(){
			return{
				imgs: [], // 图文预览数组
			};
		},
		mounted(){
			let that = this;		
			that.$nextTick(() => {
               if(!this.can_select){
					document.querySelector('body').classList.add('forbidden-all');
				}
			  })			
		},
		methods: {
			// 图文预览事件
			preview: function(e) {
				let $this = this;
				let target = e.target || e.srcElement;
				let nodeName = target.nodeName.toLocaleLowerCase();
				if (nodeName == 'img') {
					if ($this.can_select==0) { // 关闭图文复制则不可预览
						return;
					}
					// if (!target.alt) { // 表情不能预览
					//     return;
					// }
					// let parentNode = target.parentNode;
					// let parentNodeName = parentNode.nodeName.toLocaleLowerCase();
					// if (parentNodeName == 'a') { // a标签不可预览
					//     return;
					// } else if (parentNode.parentNode && parentNode.parentNode.nodeName.toLocaleLowerCase() == 'a') {
					//     return;
					// } else if (parentNode.parentNode.parentNode && parentNode.parentNode.parentNode.nodeName.toLocaleLowerCase() == 'a') {
					//     return;
					// }
					if(!this.popToDiv(target.parentNode)) {return false;}
					let imgs = document.querySelectorAll('#detail_div img');
					let srcs = [];
					if ($this.imgs.length == 0) {
						console.log("enter");
						for(let i=0,j=imgs.length;i<j;i++){
							let imgItem = imgs[i];
							if (!imgItem.src) {
								continue;
							}
							srcs = [...srcs, imgItem.src];
						}
						$this.imgs = srcs;
					}
					let src = e.target.src;
					console.log({
						current: src, // 当前显示图片的http链接
						urls: $this.imgs,
					});
					console.log('2018-07-27');
					wx.previewImage({
						current: src, // 当前显示图片的http链接
						urls: $this.imgs,
					});
				}
			},
			popToDiv: function (el) {
				if(el.nodeName == 'A') {return false;}
				if(el.parentNode.id.indexOf("_flag4unlimit")<0 && el.parentNode.nodeName != 'BODY'){
					return this.popToDiv(el.parentNode);
				} else{
					return true;
				}
			}
		},
	};
</script>

<style>
	.image-text-box{
		position: relative;
		z-index: 0;
		font-size: 16px;
		color: #333;
		line-height: 30px;
		font-family:
		-apple-system,
		PingFangSC-Regular,
		PingFangHK-Regular,
		PingFangTC-Regular,
		'微软雅黑',
		sans-serif;
	}
	/*添加h1-h6样式*/
	.image-text-box h1 {
		font-weight: bolder;
		font-size: 32px;
		margin: 0.67em 0;
	}

	.image-text-box h2 {
		font-weight: bolder;
		font-size: 24px;
		margin: 0.75em 0;
	}

	.image-text-box h3 {
		font-weight: bolder;
		font-size: 18px;
		margin: 0.83em 0;
	}

	.image-text-box h4 {
		font-weight: bolder;
		margin: 1.12em 0;
	}

	.image-text-box h5 {
		font-weight: bolder;
		font-size: 13px;
		margin: 1.5em 0;
	}

	.image-text-box h6 {
		font-weight: bolder;
		font-size: 12px;
		margin: 1.67em 0;
	}

	.detail_div{
		padding: .2rem 0;
		word-wrap: break-word;
		word-break:normal;
	}
	.detail_div *{
		max-width: 100%;
		box-sizing: border-box;
	}
	.detail_div ul{
		box-sizing: border-box;
	}
	.detail_div img {
		max-width: 100%;
	}

	/*.detail_div a{*/
	/*z-index: 999;*/
	/*position: relative;*/
	/*}*/

	.detail_div img[alt*='二维码']{
		position: relative;
		z-index: 999;
	}

	.auto-height{
		height: auto;
		max-height: none;
	}
	.forbidden-copy{
		-webkit-user-select:auto; /*webkit浏览器*/
		-webkit-touch-callout:none;  /*系统默认菜单被禁用*/
		-webkit-user-select:none; /*webkit浏览器*/
		-khtml-user-select:none; /*早期浏览器*/
		-moz-user-select:none;/*火狐*/
		-ms-user-select:none; /*IE10*/
		user-select:none;
		pointer-events:none;
	}
	.forbidden-all{
		user-select:none;
	}
	a{
		pointer-events:all;
	}
	#detail_div iframe{
		pointer-events:all;
	}
</style>
