<template>
  <div class="ruleMaskDiv" v-if="show" @click="closeClick">
    <div class="context1">
      <div class="context" v-html="ruleText"></div>
      <div class="close-btn" @click="closeClick"></div>
    </div>
  </div>
</template>

<script>
import apis1 from "../../../util/apis1.js";
let { getRule } = apis1;
export default {
  props: [],
  data() {
    return {
      ruleText: "",
    };
  },
  created() {
    this.initData();
  },
  methods: {
    initData() {
      if (this.isTemplate == true) {
        console.log(this.templateData, "活动规则templateData");
        if (this.templateData) {
          var rules = this.templateData.activity.actRule;
          rules = rules.replace(/app store/gi, "app store").split("\n");
          var rules1 = rules;
          var ua = navigator.userAgent;

          var prompt1 = "本次活动为商家自发举办，与苹果公司及app store无关";
          var prompt2 = "本次活动为商家自发举办,与苹果公司及app store无关";
          var prompt3 = "本次活动为商家自发举办,与苹果公司及app store无关。";
          var prompt4 = "本次活动为商家自发举办，与苹果公司及app store无关。";

          if (rules1.indexOf(prompt1 || prompt2 || prompt3 || prompt4) != -1) {
            var a = rules.indexOf(prompt1);
            var b = rules.indexOf(prompt2);
            var c = rules.indexOf(prompt3);
            var e = rules.indexOf(prompt4);

            if (a != -1) {
              rules.splice(a, prompt1.length);
            }
            if (b != -1) {
              rules.splice(b, prompt2.length);
            }
            if (c != -1) {
              rules.splice(c, prompt3.length);
            }
            if (e != -1) {
              rules.splice(e, prompt4.length);
            }
          }
          if (/iphone|ipad|ipod/.test(ua)) {
            rules.push("本次活动为商家自发举办，与苹果公司及App Store无关。");
          }
          this.ruleText = rules.join("<br/>");
          console.log(this.ruleText, "this.ruleText");
        } else {
          this.ruleText = "暂无规则";
        }
        return;
      } else {
        getRule((initDatas) => {
          console.log(initDatas);
          var data = initDatas.data.trim();
          //渲染规则
          if (data) {
            if (data.trim() == "") {
              this.ruleText = "暂无规则";
            } else {
              var rules = data;
              rules = rules.replace(/app store/gi, "app store").split("\n");

              var rules1 = rules;

              var ua = navigator.userAgent;

              var prompt1 = "本次活动为商家自发举办，与苹果公司及app store无关";
              var prompt2 = "本次活动为商家自发举办,与苹果公司及app store无关";
              var prompt3 =
                "本次活动为商家自发举办,与苹果公司及app store无关。";
              var prompt4 =
                "本次活动为商家自发举办，与苹果公司及app store无关。";

              if (
                rules1.indexOf(prompt1) != -1 ||
                rules1.indexOf(prompt2) != -1 ||
                rules1.indexOf(prompt3) != -1 ||
                rules1.indexOf(prompt4) != -1
              ) {
                var a = rules.indexOf(prompt1);
                var b = rules.indexOf(prompt2);
                var c = rules.indexOf(prompt3);
                var e = rules.indexOf(prompt4);

                if (a != -1) {
                  rules.splice(a, prompt1.length);
                }
                if (b != -1) {
                  rules.splice(b, prompt2.length);
                }
                if (c != -1) {
                  rules.splice(c, prompt3.length);
                }
                if (e != -1) {
                  rules.splice(e, prompt4.length);
                }
              }

              if (/iphone|iPhone|ipad|iPad|ipod|iPod/.test(ua)) {
                rules.push(
                  "本次活动为商家自发举办，与苹果公司及App Store无关。"
                );
              }
              this.ruleText = rules.join("<br/>");
            }
          } else {
            this.ruleText = "暂无规则";
          }
        });
      }
    },
    closeClick() {
      document.querySelector("body").removeAttribute("style");
      this.submit();
      // this.$emit('closeClick');
    },
  },
};
</script>

<style lang="scss">
.ruleMaskDiv {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  z-index: 10;
}
.context1 {
  position: absolute;
  left: 50%;
  top: 2.73rem;
  width: 6.48rem;
  height: 7.34rem;
  background: url("//img10.360buyimg.com/imgzone/jfs/t1/107758/7/32062/93623/64e2d8dcF63bce004/e3f0284edb26d117.png")
    no-repeat;
  background-size: 100% 100%;
  transform: translateX(-50%);
  padding: 1.67rem 0.3rem 0.3rem 0.3rem;
  color: #fcdfc5;
  font-size: 0.24rem;
  .context {
    width: 100%;
    height: 100%;
    overflow-y: auto;
  }
}
.close-btn {
  position: absolute;
  width: 0.45rem;
  height: 0.45rem;
  background: url("//img10.360buyimg.com/imgzone/jfs/t1/183690/31/37249/1097/64e2d8dcFb8273014/2bd869caeaf31168.png")
    no-repeat;
  background-size: 100% 100%;
  bottom: -0.8rem;
  left: 50%;
  transform: translateX(-50%);
}
</style>
