<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>{{ detailInfo.content }}</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 {
      width: 100%;
    }

    p {
      display: block;
      // text-indent: 2em;
      letter-spacing: 2px;
      line-height: 46rpx;

      img {
        // margin-left: -2em;
      }
    }
  }
}

.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>
