<template>
  <div
    class="strategyDiv"
    :style="styleDataNew[keyData.strategy]"
    ref="strategy"
    @click.stop="styleClick('click', 'strategy')"
    @mousemove.stop="styleClick('mousemove', 'strategy')"
    @mouseout.stop="styleClick('mouseout')"
  >
    <img
      :style="styleDataNew[keyData.strategyImg1]"
      :src="styleDataNew[keyData.strategyImg1].imageUrl"
      alt=""
    />
    <img
      :style="styleDataNew[keyData.strategyImg2]"
      :src="styleDataNew[keyData.strategyImg2].imageUrl"
      alt=""
    />
    <img
      :style="styleDataNew[keyData.strategyImg3]"
      :src="styleDataNew[keyData.strategyImg3].imageUrl"
      alt=""
    />
  </div>
</template>

<script>
export default {
  props: [
    "styleData",
    "keyData",
    "datas",
    "templateData",
    "isWebClick",
    "modifyContent",
  ],
  data() {
    return {
      styleDataOld:{}
    };
  },
  created() {
     //深拷贝重置需要
    this.styleDataOld = JSON.parse(JSON.stringify(this.styleData));
    this.styleDataNew = this.styleData;
  },
  mounted() {},

  methods: {
    //点击可修改位置的方法
    styleClick(type, refName) {
      if (this.isWebClick) {
        //传值给B端
        let byValue = {
          modifyContent: this.modifyContent,
          refName: refName,
          styleData: this.styleDataNew,
          c_this: this,
          styleDataOld: this.styleDataOld,
        };
        this.$emit("opertaionCom", type, byValue);
      }
    },
    initData() {},
  },
};
</script>

<style lang="scss">
.strategyDiv {
  // position: absolute;
  // position: absolute;
  // overflow: hidden;
}
</style>
