<template>
  <div :style="styleData.goumaiBigbox">
    <div
      v-if="isshow"
      class="goodbg"
      :style="styleData.goodbg"
      ref="exposure3"
      @click="styleClick('click', 'exposure3')"
      @mousemove="styleClick('mousemove', 'exposure3')"
      @mouseout="styleClick('mouseout')"
    >
      <div :style="goodTitleStyle" v-if="isShowTitle">
        <img :style="goodTitleStyle.img" :src="titleImg" />
      </div>
      <div
        :style="goodTitleStyle"
        style="text-align: center"
        v-if="isShowTitleByWords"
      >
        店长推荐
      </div>
      <ul
        class="draw-collect-list f-cb"
        :style="styleData.goodulbox"
        v-if="isWebClick"
      >
        <li
          v-for="(item, index) in exposureList"
          :key="index"
          :style="styleData.goodlibox"
        >
          <div>
            <div class="pic" :style="styleData.goodImgBox">
              <img
                alt=""
                :src="item.imagePath ? item.imagePath : item.skuImg"
                :style="styleData.googImg"
              />
            </div>
          </div>
          <div class="attention" :style="styleData.goumai"></div>
        </li>
      </ul>
      <ul class="draw-collect-list f-cb" :style="styleData.goodulbox" v-else>
        <li
          v-for="(item, index) in exposureList"
          :key="index"
          v-lz-click="'9'"
          :style="styleData.goodlibox"
        >
          <div>
            <div class="pic" :style="styleData.goodImgBox">
              <img
                alt=""
                :src="item.imagePath ? item.imagePath : item.skuImg"
                :style="styleData.googImg"
              />
            </div>
          </div>
          <div
            class="attention"
            v-lz-click="'9'"
            @click="goToBuy(item.skuId)"
            :style="styleData.goumai"
          ></div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import { goToSkuPage } from "../../../util/tools.js";
import apis1 from "../../../util/apis1.js";
let { getGoods } = apis1;
export default {
  props: [
    "datas",
    "keyData",
    "styleData",
    "isTemplate",
    "templateData",
    "modifyContent",
    "isWebClick",
  ],
  data() {
    return {
      titleImg: "",
      isShowTitle: false, //是否显示title
      isShowTitleByWords: false, //是否显示title文字
      goodTitleStyle: "",
      exposureList: [],
      isshow: false, //没有曝光商品页面不显示
    };
  },
  created() {
    //深拷贝重置需要
    this.styleDataOld = JSON.parse(JSON.stringify(this.styleData));
    this.isShowTitle = this.datas.isShowTitle;
    this.isShowTitleByWords = this.datas.isShowTitleByWords;
    this.titleImg = this.datas.titleImg;
    this.goodTitleStyle = this.styleData.goodTitleStyle;
    this.initData();
  },

  methods: {
    //点击可修改位置的方法
    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;
        if (datasAll) {
          if (datasAll.exposedData) {
            this.exposureList = datasAll.exposedData.exposedGoods;
            if (this.exposureList.length > 0) {
              this.isshow = true;
            } else {
              this.isshow = false;
            }
          }
        } else {
          if (this.isWebClick) {
            this.isshow = true;
          } else {
            this.isshow = false;
          }
          this.exposureList = [
            {
              skuImg:
                "//img10.360buyimg.com/imgzone/jfs/t1/187416/31/4714/49523/60ab4c4cE3a8eca46/c49d115666efe94f.png",
              skuId: "1336052",
              skuName: "曝光商品1",
              skuPrice: "10",
            },
            {
              skuImg:
                "//img10.360buyimg.com/imgzone/jfs/t1/183810/37/5745/49914/60ab4c4cE278180de/a793c8be0d03673c.png",
              skuId: "100015054036",
              skuName: "曝光商品2",
              skuPrice: "10",
            },
            {
              skuImg:
                "//img10.360buyimg.com/imgzone/jfs/t1/190444/40/4785/42939/60ab4c4cEef774869/6c76610f0fefe403.png",
              skuId: "100009576107",
              skuName: "曝光商品3",
              skuPrice: "10",
            },
            {
              skuImg:
                "//img10.360buyimg.com/imgzone/jfs/t1/172186/12/11435/45891/60ab4c55E10ef3f21/0e82116a42c2d58b.png",
              skuId: "曝光商品4",
              skuName: "10",
              skuPrice: "10",
            },
          ];
        }
      } else {
        // 曝光商品
        var taskType = "0";
        console.log(111111111);
        // 获取曝光商品
        getGoods(taskType, (initdatas) => {
          console.log(initdatas.data);
          if (initdatas.data) {
            this.exposureList = initdatas.data;
          }
          if (this.exposureList.length > 0) {
            this.isshow = true;
            console.log("aaaa");
          } else {
            this.isshow = false;
            console.log("bbbb");
          }
        });
      }
    },
    goToBuy(sku) {
      if (this.isTemplate) {
        this.$toast("活动预览，仅供查看");
        return;
      }
      goToSkuPage(sku);
    },
  },
};
</script>

<style lang="scss" scoped="scoped">
.draw-collect-list {
  padding: 0.3rem;
  display: flex;
  flex-wrap: wrap;
}
.draw-collect-list li {
  float: left;
  width: 49%;
  margin-bottom: 4%;
}
.draw-collect-list li .title {
  height: 0.7rem;
  line-height: 0.35rem;
  padding: 0 0.1rem;
  margin-top: 0.1rem;
  font-size: 0.26rem;
  overflow: hidden;
  text-align: left;
}
.draw-collect-list li .detail {
  padding: 0.1rem;
  font-size: 0.28rem;
  float: left;
}
.draw-collect-list li .attention {
  width: 0.88rem;
  height: 0.4rem;
  // background-color: #f56264;
  background-size: 100%;
  background-repeat: no-repeat;
  float: right;
  margin: 0.1rem;
  color: #fff;
  border-radius: 3px;
  font-size: 0.28rem;
}
.draw-collect-list li .detail .price {
  color: #f23c3c;
}
.draw-collect-list li:nth-child(even) {
  margin-left: 2%;
}
.titleSpan {
  overflow: hidden;
  -webkit-line-clamp: 2;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
}
.goodbg {
  position: relative;
}
</style>
