<template>
  <div :style="styleData.ruleDivStyle" v-if="!isHelper"  ref="rule"
    @click="styleClick('click', 'rule')"
    @mousemove="styleClick('mousemove', 'rule')"
    @mouseout="styleClick('mouseout')">
    <div class="ruleDiv" :style="isChange ? styleData[keyData.ruleDiv] : styleData[keyData.ruleDiv1]">
      <div :style="styleData[keyData.context]" v-html="ruleText"><!-- {{getrule}} --></div>
    </div>
  </div>
</template>

<script>
import { Toast } from 'vant';
import apis1 from '../../../util/apis1.js';
import { goToShopPage } from '../../../util/tools';
let { getRule } = apis1;
import store from '../../../store/store.js'
export default {
  components: {
    goToShopPage
  },
  props: ['datas', 'styleData', 'keyData', 'isTemplate', "isWebClick", "modifyContent"],
  data() {
    return {
      isHelper: false, //是否是助力者进入
      dataAll: {},
      isChange: false,
      ruleText: '',
      isCustomSwitching: 1,
      styleDataOld:{}
      // ruleShow:false
    };
  },
  created() {
     //深拷贝重置需要
    this.styleDataOld = JSON.parse(JSON.stringify(this.styleData));
     this.isHelper = store.state.shareUserId ? true : false;
     this.publicData.$on("kanSwitchValue", (isCustomSwitching, refName) => {
       this.isCustomSwitching = isCustomSwitching;
       if(isCustomSwitching == '1') {
        this.isHelper = false;
      }else if(isCustomSwitching == "2"){
        this.isHelper = true;
      }else if(isCustomSwitching == "3"){
        this.isHelper = true;
      }
    });
    this.publicData.$on('friendNotifRecord', friendNotNum => {
      // console.log(friendNotNum,'111111111111111111111111')
      if (friendNotNum != 0) {
        this.isChange = true;
      }
    });
    console.log(this.datas,'this.datas')
    if(!this.isHelper){
      if (this.isTemplate == true) {
          var temPlateDataAll = this.datas.temPlateDataAll
          if (temPlateDataAll) {
            var rules = temPlateDataAll.activity.actRule
              .trim()
              .toLowerCase()
              .split('\n');
            var rules1 = temPlateDataAll.activity.actRule.trim().toLowerCase();
            var ua = navigator.userAgent.toLowerCase();
            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/>');
          } else {
            this.ruleText = '暂无规则';
          }
        } 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');
                  // .trim()
                  // .toLowerCase()
                  // .split('\n');
                var rules1 = data.trim().toLowerCase();
                var ua = navigator.userAgent.toLowerCase();
                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) {
                  // console.log('测试11111111111')
                  var a = rules.indexOf(prompt1);
                  var b = rules.indexOf(prompt2);
                  var c = rules.indexOf(prompt3);
                  var e = rules.indexOf(prompt4);
                  if (a != -1) {
                    // console.log(a,'***2222222222')
                    rules.splice(a, prompt1.length);
                  }
                  if (b != -1) {
                    // console.log(b,'***-------2222222222')
                    rules.splice(b, prompt2.length);
                  }
                  if (c != -1) {
                    // console.log(c,'***-------2222222222')
                    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 = '暂无规则';
            }
          });
        }
      
    }
  },
  mounted() {},

  methods: {
    initData(data) {
      console.log(data);
      let activityType = sessionStorage.getItem('activityType');
      this.dataAll = data;
    },
    styleClick(type, refName) {
      if (this.isWebClick) {
        //传值给B端
        let byValue = {
          modifyContent: this.modifyContent,
          refName: refName,
          styleData: this.styleData,
          c_this: this,
          isCustomSwitching: this.isCustomSwitching,
          styleDataOld: this.styleDataOld,
        };
        this.$emit("opertaionCom", type, byValue);
      }
    },
  }
};
</script>

<style lang="scss">
.ruleDiv {
  // position: absolute;
  // width: 100%;
  // z-index: 2;
}
</style>
