<template>
  <view class="richDetail">
    <view class="detail_title" v-if="detailInfo.title">{{ detailInfo.title }}</view>
    <slot name="richHeadImg"></slot>
    <view class="rich_box" v-if="detailInfo.content">
      <rich-text
        :nodes="detailInfo.content | formatRichText"
        @click.stop="showPreview"
        :data-nodes="detailInfo.content"
      ></rich-text>
    </view>
  </view>
</template>

<script>

import $http from '@/config/requestConfig.js';
import {
    mapState
} from 'vuex';
export default {
    props: ['detailInfo',],
    components: {

    },
    data() {
        return {



        }
    },
    onLoad(options) {


    },
    onHide() {

    },
    computed: {
        ...mapState(['userInfo']),
    },	filters: {
		/**
		 * 处理富文本里的图片宽度自适应
		 * 1.去掉img标签里的style、width、height属性
		 * 2.img标签添加style属性：max-width:100%;height:auto
		 * 3.修改所有style里的width属性为max-width:100%
		 * 4.去掉<br/>标签
		 * @param html
		 * @returns {void|string|*}
		 */
		formatRichText(html) { //控制小程序中图片大小
			let newContent = html.replace(/<img[^>]*>/gi, function (match, capture) {
				match = match.replace(/style="[^"]+"/gi, '').replace(/style='[^']+'/gi, '');
				match = match.replace(/width="[^"]+"/gi, '').replace(/width='[^']+'/gi, '');
				match = match.replace(/height="[^"]+"/gi, '').replace(/height='[^']+'/gi, '');
				return match;
			});
			newContent = newContent.replace(/style="[^"]+"/gi, function (match, capture) {
				match = match.replace(/width:[^;]+;/gi, 'max-width:100%;').replace(/width:[^;]+;/gi,
					'max-width:100%;');
				return match;
			});
			newContent = newContent.replace(/<br[^>]*\/>/gi, '');
			newContent = newContent.replace(/\<img/gi,
				'<img style="max-width:100%;height:auto;display:inline-block;margin:10rpx auto;"');
			return newContent;
		},
		// 时间格式化
		formatDate(date) {
			console.log(date)
			let newDate = new Date(date);
			let year = newDate.getFullYear();
			let month = newDate.getMonth().toString().padStart(2, 0);
			let day = newDate.getDay().toString().padStart(2, 0);
			return year + '-' + month + '-' + day;
		}
	},
    methods: {
        formatRichText(html) { //控制图片大小
			let newContent = html.replace(/<img[^>]*>/gi, function (match, capture) {
				match = match.replace(/style="[^"]+"/gi, '').replace(/style='[^']+'/gi, '');
				match = match.replace(/width="[^"]+"/gi, '').replace(/width='[^']+'/gi, '');
				match = match.replace(/height="[^"]+"/gi, '').replace(/height='[^']+'/gi, '');
				return match;
			});
			newContent = newContent.replace(/style="[^"]+"/gi, function (match, capture) {
				match = match.replace(/width:[^;]+;/gi, 'max-width:100%;').replace(/width:[^;]+;/gi,
					'max-width:100%;');
				return match;
			});
			// newContent = newContent.replace(/<img[^>]*>/gi, function(match, capture) {
			// 	match = match.replace(/<img[^>]*>/gi, "@click='1111'").replace(/<img[^>]*>/gi, "@click='1111'");
			// 	return match;
			// });
			newContent = newContent.replace(/<br[^>]*\/>/gi, '');
			newContent = newContent.replace(/\<img/gi,
				'<img style="max-width:100%;height:auto;display:inline-block;margin:10rpx auto;"');
			return newContent;
		},

        showPreview(e) {
        console.log('e at line 56:', e)
            let conimg = e.target.dataset.nodes;
            let imgs = conimg.match(/<img[^>]+>/g);//选择节点中的img
            console.log('imgs at line 59:', imgs)
            let imgList = [];
            //遍历img标签的src里面的内容放在定义的数组imgList中
            for (var j = 0; j < imgs.length; j++) {
                imgs[j].replace(/<img[^>]*src=['"]([^'"]+)[^>]*>/gi, function (match, capture) {
                    imgList.push(capture)

                })
            }
 console.log('imgList.push at line 64:', imgList)


            //最后一步就是所有图片放在预览的方法previewImage中就可以了
            // uni.previewImage({
            //     current: imgList,
            //     urls: imgList,
            // })
            uni.previewImage({
                urls: imgList,
                longPressActions: {
                    itemList: ['很抱歉，暂不支持保存图片到本地'],
                    success: function (res) {
                        // console.log(res,'+++++')
                    }
                }
            });

        },

        // 放大图片
        previewImage(url) {
            console.log(url)
            uni.previewImage({
                urls: [url],
                longPressActions: {
                    itemList: ['很抱歉，暂不支持保存图片到本地'],
                    success: function (res) {
                        // console.log(res,'+++++')
                    }
                }
            });
        },
        // getSearch() {
        // 	$http.request({
        // 		url: "book/prescript/searchPrescript",
        // 		method: "POST", // POST、GET、PUT、DELETE，具体说明查看官方文档
        // 		data: {
        // 			loadAnimate: 'none', // 请求加载动画
        // 			'keywords': this.searchValue,
        // 			type: this.currentCateIndex + 1
        // 		},
        // 		header: { //默认 无 说明：请求头
        // 			'Content-Type': 'application/json'
        // 		},
        // 	}).then(res => {
        // 		console.log(res, '搜索结果')
        // 		if (res.code == 0 && res.list.length >= 0) {
        // 			this.showSearchList = true
        // 			this.searchList = res.list
        // 		} else {
        // 			this.searchList = []
        // 		}
        // 	}).catch(e => {
        // 		// this.dataList = []
        // 		this.searchList = []
        // 		console.log(e)
        // 	})
        // },
        // search(res) {
        // 	console.log(res, 'res')
        // 	// uni.showToast({
        // 	// 	title: '搜索：' + res,
        // 	// 	icon: 'none'
        // 	// })
        // 	if (res == '') {
        // 		this.showSearchList = false
        // 		this.searchList = []
        // 	} else {
        // 		this.getSearch()
        // 	}

        // },
        // input(res) {
        // 	console.log('----input:', res)
        // 	if (res == '') {
        // 		this.searchList = []
        // 	} else {
        // 		this.getSearch()
        // 	}
        // },
        // clear(res) {
        // 	console.log('----clear:', res)
        // 	// uni.showToast({
        // 	// 	title: 'clear事件，清除值为：',
        // 	// 	icon: 'none'
        // 	// })
        // 	this.searchValue = ''
        // 	this.showSearchList = false
        // },
        // blur(res) {
        // 	// console.log('----blur:', res)
        // 	// if (res == '') {
        // 	// 	this.showSearchList = false
        // 	// 	this.searchList = []
        // 	// } else {
        // 	// 	this.getSearch()
        // 	// }
        // },
        // focus(e) {
        // 	console.log('----focus:')
        // 	// uni.showToast({
        // 	// 	title: 'focus事件，输出值为：' + e.value,
        // 	// 	icon: 'none'
        // 	// })
        // 	// 等于1 就是有权限
        // 	// this.showSearchList = true

        // },
        // cancel(res) {
        // 	uni.showToast({
        // 		title: '点击取消，输入值为：' + res.value,
        // 		icon: 'none'
        // 	})
        // }
    },
    onBackPress() {
        // #ifdef APP-PLUS
        plus.key.hideSoftKeybord();
        // #endif
    },

}
</script>

<style lang="scss" scoped>
.commonPageBox {
  padding: 40rpx 0;
}

.contentBox {
  .headImage {
    margin-bottom: 20rpx;
  }

  .detail_title {
    padding: 20rpx 40rpx 0;
    font-size: 38rpx;
    line-height: 64rpx;
    font-weight: bold;
    text-align: center;
    box-sizing: border-box;
    margin-bottom: 20rpx;
  }

  .rich_box {
    padding: 20rpx;
    box-sizing: border-box;
    ::v-deep img {
	  max-height: 300rpx;
    }

    p {
      display: block;
      letter-spacing: 2px ;
      line-height: 46rpx;
    }
  }
}

.richDetail {
  width: 100%;
  height: 100%;
}
.ql-size-small{
        font-size:20rpx !important;
    }
    .ql-size-large{
        font-size:36rpx !important;
    }
    .ql-size-huge{
        font-size:64rpx !important;
    }
</style>
