<template>
  <div
    class="exposureBoxC"
    :style="goumaiBigbox"
    ref="exposure"
    @click="styleClick('click', 'exposure')"
    @mousemove="styleClick('mousemove', 'exposure')"
    @mouseout="styleClick('mouseout')"
  >
    <div v-if="isshow" :style="goodbg">
      <div :style="styleData.goodTitleStyle" v-if="isShowTitle">
        <img :style="styleData.img" :src="styleData.img.imageUrl" />
      </div>
       <img :style="styleData.goodsTitle" :src="styleData.goodsTitle.imageUrl" />
      <div
        :style="goodTitleStyle"
        style="text-align: center"
        v-if="isShowTitleByWords"
      >
        店长推荐
      </div>
      <ul v-if="isWebClick" class="draw-collect-list f-cb" :style="goodulbox">
        <li
          v-for="(item, index) in exposureList"
          :key="index"
          :style="goodlibox"
        >
          <div>
            <div
              class="pic"
              style="height: 3.3809rem"
              :style="styleData.liBoxImgStyle"
            >
              <a href="javascript:;" style="display: block; height: 100%"
                ><img
                  alt=""
                  :src="item.imagePath ? item.imagePath : item.skuImg"
                  style="max-width: 100%; max-height: 100%;"
                  :style="styleData.liImgStyle"
                />
              </a>
            </div>
            <div class="title" v-if="titleShow">
              <span class="titleSpan">{{
                item.name ? item.name : item.skuName
              }}</span>
            </div>
            <div class="detail f-cb" v-if="titleShow">
              <!---->
              <div class="price">
                ￥{{ item.price ? item.price : item.skuPrice }}
              </div>
            </div>
          </div>
          <div v-if="isgoumaiShow" class="attention2" :style="goumai"></div>
          <div v-else class="attention">购买</div>
        </li>
      </ul>
      <ul v-else class="draw-collect-list f-cb" :style="goodulbox">
        <li
          v-for="(item, index) in exposureList"
          :key="index"
          :style="goodlibox"
        >
          <div>
            <div
              class="pic"
              style="height: 3.3809rem"
              :style="styleData.liBoxImgStyle"
            >
              <a href="javascript:;" style="display: block; height: 100%"
                ><img
                  alt=""
                  :src="item.imagePath ? item.imagePath : item.skuImg"
                  style="max-width: 100%; max-height: 100%;"
                  :style="styleData.liImgStyle"
                />
              </a>
            </div>
            <div class="title" v-if="titleShow">
              <span class="titleSpan">{{
                item.name ? item.name : item.skuName
              }}</span>
            </div>
            <div class="detail f-cb" v-if="titleShow">
              <!---->
              <div class="price">
                ￥{{ item.price ? item.price : item.skuPrice }}
              </div>
            </div>
          </div>
          <div
            v-if="isgoumaiShow"
            class="attention2"
            v-lz-click="'9'"
            @click="goToBuy(item.skuId)"
            :style="goumai"
          ></div>
          <div
            v-else
            class="attention"
            v-lz-click="'9'"
            @click="goToBuy(item.skuId)"
          >
            购买
          </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 {
      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();
  },

  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",
              },
              {
                skuImg:
                  "http://img12.360buyimg.com/n0/jfs/t1/141102/16/8423/287508/5f608040E577b0a23/638bfa81fa424117.jpg",
                skuId: "100015054036",
                skuName: "曝光商品2",
                skuPrice: "10",
              },
            ];
          } else {
            this.exposureList = [
              {
                skuImg:
                  "http://img12.360buyimg.com/n0/jfs/t1/130255/37/10086/97127/5f6077a7E06be6368/2afbe833d5afe737.jpg",
                skuId: "1336052",
                skuName: "曝光商品1",
                skuPrice: "10",
              },
              {
                skuImg:
                  "http://img12.360buyimg.com/n0/jfs/t1/141102/16/8423/287508/5f608040E577b0a23/638bfa81fa424117.jpg",
                skuId: "100015054036",
                skuName: "曝光商品2",
                skuPrice: "10",
              },
              {
                skuImg:
                  "http://img12.360buyimg.com/n0/jfs/t1/167608/21/7415/451777/60346cbeEaae2f79d/2815887ab843c948.jpg",
                skuId: "100009576107",
                skuName: "曝光商品3",
                skuPrice: "10",
              },
              {
                skuImg:
                  "http://img12.360buyimg.com/n0/jfs/t1/168189/25/7104/81216/60346f93Eac0261a6/0908ab7b97a02906.jpg",
                skuId: "曝光商品4",
                skuName: "曝光商品4",
                skuPrice: "10",
              },
            ];
          }
        }
      } else {
        // 曝光商品
        var taskType = "0";
        // 获取曝光商品
        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;
      }
      console.log(sku);
      goToSkuPage(sku);
    },
  },
};
</script>

<style lang="scss" scoped="scoped">
.exposureBoxC {
  .draw-collect-list {
    padding: 0.3rem;
    display: flex;
    flex-wrap: wrap;
  }
  .draw-collect-list li {
    float: left;
    width: 49%;
    margin-bottom: 4%;
    background: #fff;
  }
  .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 {
    font-size: 0.28rem;
  }
  .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;
    text-align: center;
  }
  .draw-collect-list li .attention2 {
    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;
  }
}
</style>
