<template>
  <div
    v-if="showList"
    :style="styleData.container"
    ref="exposureStepOrd"
    @click="styleClick('click', 'exposureStepOrd')"
    @mousemove="styleClick('mousemove', 'exposureStepOrd')"
    @mouseout="styleClick('mouseout')"
  >
    <div class="exposureStepOrdBoxC">
      <exposure-item
        @click.native="() => goToBuy(item)"
        v-lz-click="'5'"
        v-for="(item, index) in exposureList"
        :key="index"
        :exposure="item"
      />
      <div class="bottom-line">—— 没有更多了 ——</div>
    </div>
  </div>
</template>

<script>
import { newToSkuPage } from "../../../../util/tools.js";
import apis1 from "../../../../util/apis1.js";
import exposureItem from "./components/exposureItem.vue";
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.initData();
  },
  components: {
    exposureItem
  },
  filters: {
    toFixed: function(value) {
      console.log(32, value);
      if (!value) {
        return "";
      } else {
        return Number(value).toFixed(2);
      }
    }
  },
  computed: {
    showList() {
      return this.exposureList.length > 0;
    }
  },
  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) {
        return;
      }
      if (this.isWebClick) {
        return;
      }
      storeGoodsPoint(5);
      newToSkuPage(sku);
    }
  }
};
</script>

<style lang="scss" scoped="scoped">
.exposureStepOrdBoxC {
  display: grid;
  grid-gap: 0.1rem;
  grid-template-columns: repeat(2, 1fr);
  overflow: auto;
  height: 100%;

  .bottom-line {
    font-size: 0.24rem;
    color: rgb(150, 150, 150);
    text-align: center;
    grid-column-start: span 2;
    margin: 0.3rem 0;
  }
}
</style>
