 <template>
  <div class="exposureNew1BoxC" :style="styleData.goumaiBigbox" ref="exposureNew1"
    @click="styleClick('click', 'exposureNew1')" @mousemove="styleClick('mousemove', 'exposureNew1')"
    @mouseout="styleClick('mouseout')">
    <div v-if="isshow" :style="styleData.goodbg">
      <div :style="styleData.goodTitleStyle" v-if="isShowTitle">
        <img :style="styleData.img" :src="styleData.img.imageUrl" />
      </div>
      <div :style="styleData.goodTitleStyle" style="text-align: center" v-if="isShowTitleByWords">
        店长推荐
      </div>
      <div :style="styleData.goodulbox">
        <div v-for="(item, index) in exposureList" :key="index" :style="styleData.goodlibox">
          <div :style="styleData.goodulboxInner" v-lz-click="'5'" v-lz-skuid="item.skuId" @click="goToBuy(item)">
            <a :style="styleData.shopImage" href="javascript:;" style="display: block; width: 3.4rem; height: 3.4rem"><img alt=""
                :src="item.imagePath ? item.imagePath : item.skuImg" style="width: 100%; height: 100%" />
            </a>
            <div class="title" v-if="titleShow">
              <span class="titleSpan">{{
                item.name ? item.name : item.skuName
              }}</span>
            </div>
            <div class="detail" :style="styleData.detailBackground" v-if="titleShow">
              <!---->
              <div class="price">
                <span class="price1">￥</span>{{ item.price ? item.price : item.skuPrice }}
              </div>
            </div>
          </div>
          <div v-if="isgoumaiShow" class="attention2" v-lz-click="'5'" v-lz-skuid="item.skuId"
            @click="goToBuy(item)" :style="styleData.goumai"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { newToSkuPage } from "../../../util/tools.js";
import apis1 from "../../../util/apis1.js";
let { getGoods, storeGoodsPoint } = apis1;
export default {
  props: [
    "datas",
    "keyData",
    "styleData",
    "isTemplate",
    "templateData",
    "modifyContent",
    "isWebClick",
  ],
  data() {
    return {
      goumaiBigbox: "",
      goodbg: "",
      goodulbox: "",
      goodlibox: "",
      goumai: "", //购买按钮图片
      isgoumaiShow: false, //是否显示购买按钮图片形式
      titleImg: "",
      isShowTitle: false, //是否显示title
      isShowTitleByWords: false, //是否显示title文字
      goodTitleStyle: "",
      exposureList: [],
      isshow: false, //没有曝光商品页面不显示
      titleShow: true,
      styleDataOld: {},
    };
  },
  created() {
    //深拷贝重置需要
    this.styleDataOld = JSON.parse(JSON.stringify(this.styleData));
    this.goumaiBigbox = this.styleData.goumaiBigbox;
    this.goodbg = this.styleData.goodbg;
    this.goodulbox = this.styleData.goodulbox;
    this.goodlibox = this.styleData.goodlibox;
    this.goumai = this.styleData.goumai;
    this.isgoumaiShow = this.datas.isgoumaiShow;
    this.isShowTitle = this.datas.isShowTitle;
    this.isShowTitleByWords = this.datas.isShowTitleByWords;
    this.titleImg = this.datas.titleImg;
    this.titleShow =
      this.datas.titleShow == false ? this.datas.titleShow : true;
    this.goodTitleStyle = this.styleData.goodTitleStyle;
    // this.exposureList = [
    //     {img:'//img10.360buyimg.com/imgzone/jfs/t1/187416/31/4714/49523/60ab4c4cE3a8eca46/c49d115666efe94f.png',sku:'1336052'},
    //     {img:'//img10.360buyimg.com/imgzone/jfs/t1/183810/37/5745/49914/60ab4c4cE278180de/a793c8be0d03673c.png',sku:'100015054036'},
    //     {img:'//img10.360buyimg.com/imgzone/jfs/t1/190444/40/4785/42939/60ab4c4cEef774869/6c76610f0fefe403.png',sku:'100009576107'},
    //     {img:'//img10.360buyimg.com/imgzone/jfs/t1/172186/12/11435/45891/60ab4c55E10ef3f21/0e82116a42c2d58b.png',sku:'100018955242'},
    // ],
    this.initData();
  },

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

  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 {
          this.isshow = true;
          if (this.isWebClick) {
            this.exposureList = [
              {
                skuImg:
                  "http://img12.360buyimg.com/n0/jfs/t1/130255/37/10086/97127/5f6077a7E06be6368/2afbe833d5afe737.jpg",
                skuId: "1336052",
                skuName: "曝光商品1",
                skuPrice: "10.00",
              },
              {
                skuImg:
                  "http://img12.360buyimg.com/n0/jfs/t1/141102/16/8423/287508/5f608040E577b0a23/638bfa81fa424117.jpg",
                skuId: "100015054036",
                skuName: "曝光商品2",
                skuPrice: "10.00",
              },
            ];
          } else {
            this.exposureList = [
              {
                skuImg:
                  "http://img12.360buyimg.com/n0/jfs/t1/130255/37/10086/97127/5f6077a7E06be6368/2afbe833d5afe737.jpg",
                skuId: "1336052",
                skuName: "曝光商品1",
                skuPrice: "10.00",
              },
              {
                skuImg:
                  "http://img12.360buyimg.com/n0/jfs/t1/141102/16/8423/287508/5f608040E577b0a23/638bfa81fa424117.jpg",
                skuId: "100015054036",
                skuName: "曝光商品2",
                skuPrice: "10.00",
              },
              {
                skuImg:
                  "http://img12.360buyimg.com/n0/jfs/t1/167608/21/7415/451777/60346cbeEaae2f79d/2815887ab843c948.jpg",
                skuId: "100009576107",
                skuName: "曝光商品3",
                skuPrice: "10.00",
              },
              {
                skuImg:
                  "http://img12.360buyimg.com/n0/jfs/t1/168189/25/7104/81216/60346f93Eac0261a6/0908ab7b97a02906.jpg",
                skuId: "曝光商品4",
                skuName: "曝光商品4",
                skuPrice: "10.00",
              },
            ];
          }
        }
      } else {
        // 曝光商品
        var taskType = "0";
        // 获取曝光商品
        getGoods(taskType, (initdatas) => {
          console.log(initdatas.data);
          if (initdatas.data) {
            this.exposureList = initdatas.data;
            this.exposureList.map(item => {
              if (item.skuPrice) {
                var value = Math.round(parseFloat(item.skuPrice) * 100) / 100;
                var xsd = value.toString().split(".");
                if (xsd.length == 1) {
                  item.skuPrice = value.toString() + ".00";
                }
                if (xsd.length > 1) {
                  if (xsd[1].length < 2) {
                    item.skuPrice = value.toString() + "0";
                  }
                }
                console.log(item.skuPrice, "value")
              }else{
                item.skuPrice = '暂无'
              }

            })
          }
          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) {
        // this.$toast("活动预览，仅供查看");
        return;
      }
      if (this.isWebClick) { return }
      console.log(sku);
      storeGoodsPoint(5)
      this.doFrontBuryPoint({code: 'spq-cksp1',value: '',event: 'click'})
      newToSkuPage(sku);
    },
  },
};
</script>

<style lang="scss" scoped="scoped">
.exposureNew1BoxC {
  .titleSpan {
    overflow: hidden;
    -webkit-line-clamp: 2;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    font-size: 0.3rem;
    color: #262626;
    padding: 0 0.2rem;
    margin: 0.2rem 0 0.43rem;
    box-sizing: border-box;
  }
  .detail {
    width: 3rem;
    height: 0.6rem;
    display: flex;
    background-image: url(//img10.360buyimg.com/imgzone/jfs/t1/159308/25/21187/7832/619b8d96Ee8b26a4f/a4dd481902c8e6e6.png);
    background-size: 100%;
    margin: 0 auto 0.2rem;
    .price {
      width: 2.05rem;
      height: 0.6rem;
      line-height: 0.6rem;
      font-size: 0.3rem;
      color: black;
      margin-left: -2rem;
      padding-left: 0.2rem;
      box-sizing: border-box;
      .price1 {
        font-size: 0.2rem;
      }
    }
    .attention {
      width: 0.95rem;
      height: 0.6rem;
      line-height: 0.6rem;
      font-size: 0.3rem;
      color: #df006e;
      text-align: center;
    }
  }
}
</style>
