<template>
  <div :style="styleData.maskStyle" class="maskStyle" ref="actRuleNew" @click="styleClick('click', 'actRuleNew')"
    @mousemove="styleClick('mousemove', 'actRuleNew')" @mouseout="styleClick('mouseout')">
    <div class="mainStyleDiv" :style="styleData.mainStyleDiv">
      <div :style="styleData.context1">
        <div :style="styleData.context" v-html="ruleText"></div>
      </div>
    </div>
  </div>
</template>

<script>
import apis1 from "../../../util/apis1.js";
let { getRule } = apis1;
export default {
  props: [
    "isTemplate",
    "datas",
    "styleData",
    "keyData",
    "templateData",
    "isWebClick",
    "modifyContent",
  ],
  data() {
    return {
      ruleText: "",
      styleDataOld: {},
    };
  },


  created() {
    this.initData();
  },
  methods: {
    //点击可修改位置的方法
    styleClick(type, refName) {
      if (this.isWebClick) {
        //传值给B端
        let byValue = {
          modifyContent: this.modifyContent,
          refName: refName,
          styleData: this.styleData,
          c_this: this,
          styleDataOld: this.styleDataOld,
        };
        this.$emit("opertaionCom", type, byValue);
      }
    },
    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 = "暂无规则";
          }
        });
      }
    },
  },
};
</script>

<style lang="scss" scoped="scoped">
.mainStyleDiv {
  .noData {
    font-size: 0.24rem;
    width: 100%;
    height: 100%;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
.recordListDiv::-webkit-scrollbar {
  width: 0;
}
.maskStyle {
  position: relative;
}

@keyframes rowup {
  0% {
    transform: translate3d(0, 300px, 0);
  }
  100% {
    transform: translate3d(0, -300px, 0);
  }
}
</style>
