 <template>
  <div class="repeatExposure" :style="styleData.repeatBuyExposureStyle" ref="repeatExposure" id="vital1" v-if="isshow"
    @click="styleClick('click', 'repeatExposure')" @mousemove="styleClick('mousemove', 'repeatExposure')"
    @mouseout="styleClick('mouseout')">
    <div class="lz-box">
      <div v-for="(item) in exposureList" :key="item" :style="styleData.exposureBox" class="exposure-item"
        style="margin-bottom:0.22rem">
        <div class="exposure-img-box" :style="styleData.exposureImgBox">
          <img :src="item.skuImg" alt="">
          <div class="exposure-sku" :style="styleData.exposureSku">{{item.skuName}}</div>
        </div>
        <div class="exposure-price" :style="styleData.exposurePrice">
          <div :style="styleData.exposureSkuPrice">￥{{item.skuPrice}}</div>
          <div :style="styleData.repeatBuyExposureBtn" @click="goToBuy(item)"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { goToShopPage, newToSkuPage } from '../../../util/tools.js';
import store from '../../../store/store.js';
import apis1 from "../../../util/apis1.js";
let { storeGoodsPoint,getbuyExposureShop } = apis1;
export default {
  props: [
    "datas",
    "keyData",
    "styleData",
    "isTemplate",
    "templateData",
    "modifyContent",
    "isWebClick",
  ],
  data() {
    return {
      styleDataOld: {},
      isshow: true,
      exposureList: []
    };
  },
  created() {
    this.publicData.$on('buyShop', res => {
      if (res && this.exposureList.length > 0) {
        this.goAnchor('#vital1')
      } else {
        storeGoodsPoint(4);
        goToShopPage(store.state.shopId);
      }
    });
    //深拷贝重置需要
    this.styleDataOld = JSON.parse(JSON.stringify(this.styleData));
    this.initData();
  },

  filters: {
    toFixed: function (value) {
      console.log(32, value)
      if (!value) {
        return "";
      } else {
        return Number(value).toFixed(2);
      }
    },
  },

  methods: {
    goAnchor(selector) {
      document.querySelector(selector).scrollIntoView({
        behavior: "smooth"
      });
    },
    //点击可修改位置的方法
    styleClick(type, refName) {
      if (this.isWebClick) {
        //传值给B端
        let byValue = {
          modifyContent: this.modifyContent,
          refName: refName,
          styleData: this.styleData,
          styleDataOld: this.styleDataOld,
          c_this: this,
        };
        this.$emit("opertaionCom", type, byValue);
      }
    },
    initData() {

      if (this.isTemplate) {
        var datasAll = this.templateData;
        console.log(this.templateData,'this.templateData11')
        if (datasAll) {
          if (datasAll.activityCommonRule.list.length > 0) {
            this.isshow = true
            this.exposureList = datasAll.activityCommonRule.list
            this.exposureList.forEach(ele=>{
              ele.skuImg = ele.imagePath
              ele.skuName = ele.name
              ele.skuPrice = ele.price
            })
          } else {
            this.isshow = false
          }
        } else {
          this.isshow = true;
            this.exposureList = [
              {
                skuImg:
                  "//img10.360buyimg.com/imgzone/jfs/t1/103733/20/39000/9174/645c62e8F93735772/2bf088868d88ec2b.png",
                skuId: "1336052",
                skuName: "曝光商品1",
                skuPrice: "10.00",
              },
              {
                skuImg:
                  "//img10.360buyimg.com/imgzone/jfs/t1/103733/20/39000/9174/645c62e8F93735772/2bf088868d88ec2b.png",
                skuId: "100015054036",
                skuName: "曝光商品2",
                skuPrice: "10.00",
              },
            ];
        }
      } else {

       // 指定商品
        getbuyExposureShop((initdatas) => {
          if (initdatas.data) {
            this.exposureList = initdatas.data.records;
          }
          if (this.exposureList.length > 0) {
            this.isshow = true;
            console.log("aaaa");
          } else {
            this.isshow = false;
            console.log("bbbb");
          }
        });
      }
    },
    goToBuy(sku) {
      if (this.isTemplate && !this.isWebClick) {
        return;
      }
      if (this.isWebClick) { return }
      storeGoodsPoint(5)
      newToSkuPage(sku);
    },
  },
};
</script>

<style lang="scss" scoped="scoped">
.lz-box {
  width: 100%;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  overflow: auto;
  justify-content: space-between;
  list-style: none;
  .exposure-item {
    padding: 0.2rem 0.05rem;
  }
  .exposure-img-box {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    img {
      position: relative;
      top: -0.1rem;
      width: 2.19rem;
      height: 2.19rem;
    }
    .exposure-sku {
      position: absolute;
      bottom: 0.06rem;
      width: 100%;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      padding: 0 0.25rem;
    }
  }
  .exposure-price {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.12rem 0.16rem;
  }
}
</style>
