<template>
  <div :style="styleData[keyData.cartGoodDivAllC]" class="cartGoodContainer"
    ref="cartGoodContainer"
    @click="styleClick('click', 'cartGoodContainer')"
    @mousemove="styleClick('mousemove', 'cartGoodContainer')"
    @mouseout="styleClick('mouseout')">
    <!-- <div v-if="drawFlag == false">
      <img :style="styleData.cartGoodDivMainBtn1" v-lz-click="'9'" @click="cartGoods(add999)"
        :src="styleData.cartGoodDivMainBtn1Background ? styleData.cartGoodDivMainBtn1Background:'//img10.360buyimg.com/imgzone/jfs/t1/220340/40/6804/62076/61aed0d0Ef010cc65/4d146c5c4c17f7f6.png'"
        alt="" />
    </div> -->
    <div v-if="drawFlag">
      <img :style="styleData.cartGoodDivMainBtn1" @click="openDialog()"
        :src="styleData.cartGoodDivMainBtnBackground ?styleData.cartGoodDivMainBtnBackground:'//img10.360buyimg.com/imgzone/jfs/t1/162008/36/28230/49167/61aecbcdEf1db3ae8/4b329c1ee17d4595.png'"
        alt="" />
    </div>

    <div :style="styleData.goodbg">
      <div :style="styleData.goodTitleStyle">
        <img :style="styleData.img" :src="styleData.img.imageUrl" />
      </div>
      <div :style="styleData.goodulbox">
        <div v-for="(item, index) in skuInfoList" :key="index" :style="styleData.goodlibox">
          <div style="position: relative">
            <a href="javascript:;" style="display: block; width: 3.4rem; height: 3.4rem"><img
                @click="clickFollowDetail(item)"  v-lz-click="'5'" v-lz-skuid="item.skuId" alt="" :src="item.skuImg" style="width: 100%; height: 100%" />
            </a>
            <div class="title">
              <span class="titleSpan">{{ item.skuName }}</span>
            </div>
            <div class="detail"
              :style="styleData.resetDeial?`background-image: url(${styleData.resetDeial.detailBackground})`:''"
              v-show="item.status != 1">
              <div class="price" :style="styleData.detailColor"
              >
                <span class="price1">￥</span>{{ item.skuPrice | toFixed }}
              </div>
              <div class="attention" 
              :style="styleData.txt"
              :id="index" @click="cartGoods(item)" v-lz-click="'9'">
                加购
              </div>
            </div>
            <div class="detail1"
              :style="styleData.resetDeial?`background-image: url(${styleData.resetDeial.detail1Background})`:''"
              v-show="item.status == 1">
              <div class="price" :style="styleData.detailColor">
                <span class="price1">￥</span>{{ item.skuPrice | toFixed }}
              </div>
              <div class="attention" :style="styleData.txt1" :id="index + 'x'">已加购</div>
            </div>
            <div :style="styleData[keyData.lockBg]" v-if="index >= skuNumberCount + shareCount"
              @click="shareActivity()">
              <div style="
                  width: 3.4rem;
                  height: 3.4rem;
                  display: flex;
                  justify-content: center;
                  align-items: center;
                ">
                <div style="
                    width: 1.6rem;
                    height: 1.6rem;
                    background: #000000;
                    opacity: 0.4;
                    border-radius: 50%;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                  ">
                  <img
                    src="//img10.360buyimg.com/imgzone/jfs/t1/137944/8/22945/767/61aec6edE5153c4cd/1b9d8267e72a3169.png"
                    alt="" :style="styleData[keyData.lockBgImage]" />
                </div>
              </div>
              <div style="
                  width: 100%;
                  height: 2.23rem;
                  background: rgba(0, 0, 0, 0.4);
                  display: flex;
                  justify-content: center;
                  align-items: center;
                ">
                <img
                  :src="styleData.lockBtnSrc?styleData.lockBtnSrc:'//img10.360buyimg.com/imgzone/jfs/t1/173509/10/21564/13130/61aecf05E901527c7/706f77f1dde4c468.png'"
                  alt="" :style="styleData.lockBtn" />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- <div :style="styleData[keyData.cartGoodsContainer]">
      <div
        :style="styleData[keyData.cartGoodsContainerGoods]"
        v-for="(it, index) in skuInfoList"
        @click="clickFollowDetail(it.skuId)"
        :key="index"
      >
        <img :style="styleData[keyData.goodsImage]" :src="it.skuImg" alt="" />
        <div :style="styleData[keyData.goodsDescribe]">{{ it.skuName }}</div>
        <div
          :style="styleData[keyData.cartSkuBtn]"
          :id="index"
          v-show="it.status != 1"
          @click="cartGoods(it)"
          v-lz-click="'9'"
        >
          加购
        </div>
        <div
          :style="styleData[keyData.cartSkuBtnGray100]"
          :id="index + 'x'"
          v-show="it.status == 1"
        >
          已加购
        </div>
        <div
          :style="styleData[keyData.lockBg]"
          v-if="index >= skuNumberCount + shareCount"
          @click="shareActivity()"
        >
          <img
            src="https://img10.360buyimg.com/imgzone/jfs/t1/92729/37/18883/3405/5e99486fE410c06e0/36389014f8e56625.png"
            alt=""
            :style="styleData[keyData.lockBgImage]"
          />
        </div>
      </div>
    </div> -->
  </div>
</template>

<script>
import apis1 from "../../../util/apis1.js";
import { allShare } from "../../../js/share.js";
import { goToShopPage, newToSkuPage } from "../../../util/tools.js";
let { addSkuDraw, drawPrize,storeGoodsPoint } = apis1;
import {
  PrizeResultPopComService,
  NoPrizeResultPopComService,
} from "../../../util/hdzxtcomCreate.js";
import Vue from "vue";

export default {
  props: ["datas", "keyData", "styleData", "isTemplate", "templateData",'isWebClick','modifyContent'],
  data() {
    return {
      shoppingCard1: [],
      addSkuStartTime: "",
      addSkuEndTime: "",
      priceTime: "",
      userSkuCount: "",
      skuNumber: "",
      skuNumberCount: "",
      drawFlag: false,
      skuInfoList: [],
      addSku: [],
      userAddSkuRecord: [],
      skuStatu: false,
      addSkuDraw: [],
      drawNull: false,
      skuFlag: false,
      shareCount: 0,
      draw: [],
      add999: "999",
      prizeListData: [
        {
          position: 1,
          showImg:
            "//img10.360buyimg.com/imgzone/jfs/t28501/166/1548277010/2761/aa567cad/5ce4dfd3Na6d534e4.png",
          angle: 0,
          prizeName: "谢谢参与",
        },
        {
          position: 2,
          showImg:
            "//img10.360buyimg.com/imgzone/jfs/t28501/166/1548277010/2761/aa567cad/5ce4dfd3Na6d534e4.png",
          angle: 0,
          prizeName: "谢谢参与",
        },
        {
          position: 3,
          showImg:
            "//img10.360buyimg.com/imgzone/jfs/t28501/166/1548277010/2761/aa567cad/5ce4dfd3Na6d534e4.png",
          angle: 0,
          prizeName: "谢谢参与",
        },
        {
          position: 4,
          showImg:
            "//img10.360buyimg.com/imgzone/jfs/t28501/166/1548277010/2761/aa567cad/5ce4dfd3Na6d534e4.png",
          angle: 0,
          prizeName: "谢谢参与",
        },
        {
          position: 5,
          showImg:
            "//img10.360buyimg.com/imgzone/jfs/t28501/166/1548277010/2761/aa567cad/5ce4dfd3Na6d534e4.png",
          angle: 0,
          prizeName: "谢谢参与",
        },
        {
          position: 6,
          showImg:
            "//img10.360buyimg.com/imgzone/jfs/t28501/166/1548277010/2761/aa567cad/5ce4dfd3Na6d534e4.png",
          angle: 0,
          prizeName: "谢谢参与",
        },
        {
          position: 7,
          showImg:
            "//img10.360buyimg.com/imgzone/jfs/t28501/166/1548277010/2761/aa567cad/5ce4dfd3Na6d534e4.png",
          angle: 0,
          prizeName: "谢谢参与",
        },
        {
          position: 8,
          showImg:
            "//img10.360buyimg.com/imgzone/jfs/t28501/166/1548277010/2761/aa567cad/5ce4dfd3Na6d534e4.png",
          angle: 0,
          prizeName: "谢谢参与",
        },
      ],
      prizeResultData: {
        styleData: {},
        datas: {},
        keyData: {
          prizeUrl: "showImg",
          prizeName: "prizeName",
          prizeType: "prizeType",
          priceInfo: "priceInfo",
          discountType: "discountType",
          couponType: "couponType",
        },
      },
    };
  },
  filters: {
    toFixed: function (value) {
      console.log(32, value);
      if (!value) {
        return "";
      } else {
        return Number(value).toFixed(2);
      }
    },
  },
  mounted() { },
  created() {
    //深拷贝重置需要
    this.styleDataOld = JSON.parse(JSON.stringify(this.styleData));
    this.initData();
  },
  methods: {
    styleClick(type, refName) {
      if (this.isWebClick) {
        //传值给B端
        let byValue = {
          modifyContent: this.modifyContent,
          refName: refName,
          styleData: this.styleData,
          isCustomSwitching: this.isCustomSwitching, //有tab切换时
          c_this: this,
          styleDataOld: this.styleDataOld,
        };
        this.$emit("opertaionCom", type, byValue);
      }
    },
    initData() {
      var datasAll = this.templateData;
      if (this.isTemplate == true) {
        // this.$toast("活动预览，仅供查看");
        if (datasAll) {
          this.skuInfoList = datasAll.goodsData.exposedGoods;
          for (var i = 0; i <= this.skuInfoList.length; i++) {
            this.skuInfoList[i].skuImg =
              datasAll.goodsData.exposedGoods[i].imagePath;
            this.skuInfoList[i].skuName =
              datasAll.goodsData.exposedGoods[i].name;
          }
        } else {
        }
      } else {
        this.getShoppingCard1();
      }
    },
    //点击商品进入详情页面
    clickFollowDetail(sku) {
      console.log("点击商品进入详情页面", sku);
      if (!this.isTemplate) {
        if (this.isTemplate == true) {
          // this.$toast("活动预览，仅供查看");
          return;
        }
        storeGoodsPoint(5)
        newToSkuPage(sku);
      }
    },
    getShoppingCard1() {
      let shoppingCard1 = apis1[this.datas.shoppingCard1];
      shoppingCard1((data) => {
        var that = this;
        that.shoppingCard1 = data.data;
        that.addSkuStartTime = data.data.addSkuStartTime;
        that.addSkuEndTime = data.data.addSkuEndTime;
        that.priceTime = data.data.priceTime;
        that.userSkuCount = data.data.userSkuCount;
        that.skuNumber = data.data.skuNumber;
        that.drawFlag = data.data.drawFlag;
        that.skuInfoList = data.data.skuInfoList;
        that.userAddSkuRecord = data.data.userAddSkuRecord;
        // debugger
        that.skuNumberCount = data.data.unlockSkuNumber;
        that.shareCount = data.data.shareCount;
        if (that.skuInfoList) {
          for (var i = 0; i < that.skuInfoList.length; i++) {
            for (var j = 0; j < that.userAddSkuRecord.length; j++) {
              if (that.skuInfoList[i].skuId == that.userAddSkuRecord[j].skuId) {
                that.skuInfoList[i].status = 1;
              }
            }
          }
        }
      });
      if (!this.isTemplate) {
        //获取奖品信息接口
        drawPrize((initdatas) => {
          this.prizeListData = initdatas.data.prizeInfo;
        });
      }
    },

    shareActivity() {
      let actStatus = sessionStorage.getItem("actStatus");
      if (!this.isTemplate) {
        if (actStatus == 2) {
          // Toast
          this.$toast("活动已结束");
          return;
        }
        if (actStatus == 1) {
          this.$toast("活动尚未开始");
          // Toast('活动尚未开始');
          return;
        }
        if (actStatus == 3) {
          if (
            new Date().getTime() < new Date(this.addSkuStartTime).getTime() ||
            new Date().getTime() > new Date(this.addSkuEndTime).getTime()
          ) {
            this.$toast("未在加购时间内，无法邀请好友助力");
            return;
          }
          // Toast('活动正在惊醒中');
          // this.share = 1
          allShare(this.isTemplate, this, (callBackData) => {
            console.log(callBackData, "callBackData");
          });
        }
      } else {
        this.$toast("活动预览，仅供查看");
      }
    },
    cartGoods(it) {
      if (this.isTemplate == true) {
        // this.$toast("活动预览，仅供查看");
        return;
      }
      let actStatus = sessionStorage.getItem("actStatus");
      if (actStatus == 2) {
        this.$toast("活动已结束");
        return;
      }
      if (actStatus == 1) {
        this.$toast("活动未开始");
        return;
      }
      if (
        new Date().getTime() < new Date(this.addSkuStartTime).getTime() ||
        new Date().getTime() > new Date(this.addSkuEndTime).getTime()
      ) {
        this.$toast("未在加购时间内，无法加购商品");
        return;
      }
      let addSku = apis1[this.datas.addSku];
      if (it.skuId == null) {
        // debugger
        // 一键加购
        addSku(this.add999, (data) => {
          console.log(data);
          var that = this;
          that.addSku = data.data;
          if (!that.addSku.skuFlag) {
            // 加购失败
            if (that.addSku.messageFlag == 1) {
              this.$toast("未在加购时间内，无法加购商品");
            } else if (that.addSku.messageFlag == 2) {
              this.$toast("当前商品已加购");
            } else if (that.addSku.messageFlag == 3) {
              this.$toast("当前商品已全部加购");
            } else if (that.addSku.messageFlag == 4) {
              this.$toast("没有加购资格");
            }
            return;
          }
          this.$toast("加购成功");
          for (var i = 0; i < that.skuInfoList.length; i++) {
            if (i < that.skuNumberCount + that.shareCount) {
              let element = that.skuInfoList[i];
              element.status = 1;
              // document.getElementById(i).style.display = "block";
              // document.getElementById(i + "x").style.display = "none";
              this.$set(that.skuInfoList, i, element);
            }
          }
          this.publicData.$emit("cartGoodsJinli", 9999);
        });
      } else {
        // 加购
        addSku(it.skuId, (data) => {
          console.log(data);
          var that = this;
          that.addSku = data.data;
          if (!that.addSku.skuFlag) {
            // 加购失败
            if (that.addSku.messageFlag == 1) {
              this.$toast("未在加购时间内，无法加购商品");
            } else if (that.addSku.messageFlag == 2) {
              this.$toast("当前商品已加购");
            } else if (that.addSku.messageFlag == 3) {
              this.$toast("当前商品已全部加购");
            } else if (that.addSku.messageFlag == 4) {
              this.$toast("没有加购资格");
            }
            return;
          }
          this.$toast("加购成功");
          for (var i = 0; i < that.skuInfoList.length; i++) {
            if (that.skuInfoList[i].skuId == it.skuId) {
              let element = that.skuInfoList[i];
              element.status = 1;
              // document.getElementById(i).style.display = "block";
              // document.getElementById(i + "x").style.display = "none";
              this.$set(that.skuInfoList, i, element);
            }
          }
          this.publicData.$emit("cartGoodsJinli", that.skuNumberCount);
        });
      }
    },
    openDialog() {
      if (this.isTemplate) {
        // this.$toast("活动预览，仅供查看");
        return;
      }
      const self = this;

      let actStatus = sessionStorage.getItem("actStatus");
      if (actStatus == 2) {
        this.$toast("活动已结束");
        return;
      }
      if (actStatus == 1) {
        this.$toast("活动未开始");
        return;
      }
      this.isStartPlay = true;
      addSkuDraw((initDatas) => {
        if (initDatas.resp_code == 50009) {
          this.$toast("活动已结束");
          this.isStartPlay = false;
          return;
        }

        if (initDatas.resp_code != 0) {
          this.isStartPlay = false;
        }

        // sgx 判断您加购的商品数量不满足抽奖所需的数量
        if (initDatas.data.skuFlag) {
          this.$toast("您加购的商品数量不满足抽奖所需的数量");
          this.isStartPlay = false;
          return;
        }

        if (initDatas.data.drawNull) {
          for (var i = 0; i < this.prizeListData.length; i++) {
            // 只能有一条中奖记录
            if (this.prizeListData[i].id == initDatas.data.draw.prizeInfoId) {
              self.pIndex = i;
              // 拿到相应的角度调旋转接口
              self.fulfillHandle(
                self.prizeListData[self.pIndex],
                initDatas.data
              );
              this.isStartPlay = false;
              this.publicData.$emit(
                "isNotyFiceWinnerReorrd",
                true,
                this.isTemplate
              );
              break;
            }
          }
        } else {
          self.fulfillHandle("未中奖");
          this.isStartPlay = false;
        }
      });
    },
    //得奖后的处理
    fulfillHandle(prizeData, initDatas) {
      this.isStartPlay = false;
      console.log(initDatas);
      var activityType = sessionStorage.getItem("activityType");
      this.isShowRotary = this.datas.isShowRotary == true ? true : false;

      if (prizeData == "未中奖") {
        NoPrizeResultPopComService.create(
         this.styleData,
          (submit) => {
            NoPrizeResultPopComService.close();
          }
        );
      } else {
        //中奖
        this.prizeResultData.datas = prizeData;
        PrizeResultPopComService.create(
          this.prizeResultData,
          initDatas,
          this.styleData,
          (submit) => {
            PrizeResultPopComService.close();
          }
        );
      }
    },
  },
};
</script>
<style lang="scss" scoped="scoped">
.cartGoodContainer {
  .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.62rem;
    display: flex;
    background-image: url(//img10.360buyimg.com/imgzone/jfs/t1/214288/26/6921/1028/61aec77aEc08dad40/a0afc75d114d7956.png);
    background-size: 100%;
    margin: 0 auto 0.2rem;
  }
  .detail1 {
    width: 3rem;
    height: 0.62rem;
    display: flex;
    background-image: url(//img10.360buyimg.com/imgzone/jfs/t1/158280/12/22544/1019/61aec61eE400b5bfe/6d9039133c2bb139.png);
    background-size: 100%;
    margin: 0 auto 0.2rem;
  }
  .price {
    width: 1.95rem;
    height: 0.6rem;
    line-height: 0.6rem;
    font-size: 0.3rem;
    color: #ff275a;
    text-align: left;
    padding-left: 0.2rem;
    box-sizing: border-box;
    .price1 {
      font-size: 0.2rem;
    }
  }
  .attention {
    width: 1.05rem;
    height: 0.6rem;
    line-height: 0.6rem;
    font-size: 0.3rem;
    color: #fff;
    text-align: center;
  }
}
</style>
