<template>
  <view class="container_zg">
    <z-nav-bar :title="prescriptDetail.title"></z-nav-bar>
    <view class="contentBox" v-if="prescriptDetail.type == 0">
      <view class="content">
        <view class="item title-center">
          {{ prescriptDetail.title }}
        </view>
        <rich-text
          v-if="prescriptDetail.content"
          class="item"
          :nodes="formatRichText(prescriptDetail.content)"
        ></rich-text>
      </view>
    </view>
    <view class="fullscreen-webview" v-else>
      <web-view :src="prescriptDetail.url"> </web-view>
    </view>
  </view>
</template>

<script>
import $http from "@/config/requestConfig.js";
export default {
  data() {
    return {
      options: {},
      playData: {},
      prescriptDetail: {
        images: [],
      },
      id: null,
      indicatorDots: true,
      autoplay: true,
      interval: 5000,
      duration: 500,
    };
  },
  onLoad(options) {
    this.id = options.id;
    this.options = options;
  },
  onShow() {
    this.getDetail();
  },
  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(/<br[^>]*\/>/gi, "");
      newContent = newContent.replace(
        /\<img/gi,
        '<img style="max-width:100%;height:auto;display:inline-block;margin:10rpx auto;"'
      );
      return newContent;
    },
    //详情
    getDetail() {
      $http
        .request({
          url: 'visitor/getTaihuWelfareArticleDetail',
          method: "POST",
          data: {id: this.options.id,},
          header: {
            "Content-Type": "application/json",
          },
        })
        .then((res) => {
          if (res.code == 0) {
            this.prescriptDetail = res.result;
            if (
              this.prescriptDetail.content &&
              this.prescriptDetail.contentType == 1
            ) {
              this.prescriptDetail.content = res.result.content;
            }
			
          }
        })
        .catch((e) => {
          console.log(e);
        });
    },
  }
};
</script>

<style lang="scss" scoped>
.contentBox {
  padding-bottom: 20rpx;
}
.contentBoxwebwiew {
  height: 100%;
}
.fullscreen-webview {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.mb-10 {
  margin-bottom: 10px;
}

.content {
  font-size: 28rpx;
}

.swiper-item {
  image {
    margin: 0 auto;
    height: 250rpx;
  }
}

.uni-margin-wrap {
  margin-bottom: 20rpx;
  padding-top: 20rpx;
  background-color: #fff;
}

.container_zg {
  padding: 20rpx;
  background: #fff;
  
  .item {
    padding: 10rpx 20rpx;
    padding-bottom: 20rpx;
    line-height: 46rpx;
  }
  .title-center {
    text-align: center;
    font-size: 32rpx;
    font-weight: 700 !important;
  }
}

.flexbox {
  display: flex;
}

/deep/ .uni-section-header__decoration.line {
  background-color: #18bc37;
}
</style>
