<template>
  <!-- #ifdef MP-WEIXIN  -->
  <view class="xd-content-xss" :style="{fontSize: fontSizes + 'rpx', lineHeight: fontSizes * 1.8 + 'rpx'}" v-if="vhtml" v-html="vhtml"></view>
  <!-- #endif -->
  <!-- #ifdef H5  -->
  <view class="xd-content-xss" :style="{fontSize: fontSizes + 'rpx', lineHeight: fontSizes * 1.8 + 'rpx'}" v-if="vhtml" v-html="vhtml"></view>
  <!-- #endif -->
  <!-- #ifndef MP-WEIXIN || H5 -->
  <xd-mp-html v-if="vhtml" :content="vhtml"></xd-mp-html>
  <!-- #endif -->
</template>

<script>
  // #ifdef H5
  import DOMPurify from 'dompurify';
  // #endif
  import XdMpHtml from "@/components/XdMpHtml/XdMpHtml";

  export default {
    name: "XdContentXss",
    components: {
      XdMpHtml
    },
    props: {
      html: {
        type: String | null,
        default: null
      },
      fontSizes: {
        type: String | Number,
        default: 24
      },
      notPurify:{
        type: Boolean,
        default: false
      },
    },
    watch: {
      html(){
        this.initHtml();
      }
    },
    data(){
      return {
        vhtml : null,
        testHtml: '<math><mi//xlink:href="data:x,<\script>alert(4)<\/script>"><TABLE><tr><td>HELLO</tr></TABL><UL><li><A HREF=//google.com>click</UL><p><img src="http://www.jpg" onerror="console.log(\'onerror\',2222)"></p><svg><g/onload=console.log(\'onerror\',2)//<p><p>abc<iframe//src=jAva&Tab;script:console.log(\'onerror\',3)>def</p>'
      }
    },
    created() {
      if(this.html === null) {
        // #ifdef H5
        this.vhtml = DOMPurify.sanitize(this.testHtml);
        // #endif

        // #ifndef H5
        this.vhtml = this.testHtml;
        // #endif

      }
      else{
        this.initHtml();
      }
    },
    methods:{
      initHtml(){
        //不检查元素安全性
        if(this.notPurify) {
          this.vhtml = this.html;
          return
        }
        // #ifdef H5
        //jd产品详情
        if(this.html.indexOf('ssd-module-wrap') !== -1) {
          this.vhtml = this.html.replace(/(\d+)px?/g, (input, value) => {
            value = Number(value);
            return Math.floor(value * this.$rpxNum) + 'px'
          });
        }
        else{
          this.vhtml = null;
          if(this.html.indexOf('<style') !== -1) {
            let params = this.$xdUniHelper.parseURL();
            let data = {content: 'detailShowEmpty', html: this.html.slice(0, 500), params: params.params}
            this.$xdLog.setARMSInfo(data);
            this.vhtml = this.html;
          }
          else {
            this.vhtml = DOMPurify.sanitize(this.html);
          }
        }
        // #endif

        // #ifndef H5
        this.vhtml = this.getMpHtml(this.html);
        // #endif
      },
      getMpHtml(html){
        html = 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;
        });
        html =  html.replace(/style="[^"]+"/gi, function(match, capture) {
          match = match
            .replace(/<p>/gi, '<p class="p_class">')
            .replace(/width:[^;]+;/gi, 'max-width:100%;')
            .replace(/width:[^;]+;/gi, 'max-width:100%;');
          return match;
        });
        html =  html.replace(/<br[^>]*\/>/gi, "");
        html =  html.replace(/<a>/gi, '<a class="a_class "');
        html=  html.replace(/<li>/gi, '<li class="li_class "');
        html =  html.replace(/\<p/gi, '<p class="p_class "');
        html=  html.replace(/\<span/gi, '<span class="span_class "');
        html =  html.replace(/<div/gi, '<div class="div_class "');
        html =  html.replace(/\<img/gi, '<img style="max-width:100%;height:auto;display:block;margin-top:0;margin-bottom:0;"');
        return html;
      }
    }
  }
</script>

<style lang="less">
  .xd-content-xss {
    font-size: @xd-font-size-base;
    line-height: @xd-font-size-base * 1.5;

    /*  #ifdef  H5  */
    & /deep/ img {
      max-width: 100%;
      display: block;
      overflow: hidden;
    }
    /*  #endif  */
  
    & /deep/ .ssd-module-wrap {
      .ssd-module {
        /*max-width: unit(750, rpx)!important;*/
        /*height: auto;*/
      }
    }
    
  }
</style>
