<template name="addShopNew">
  <div :style="styleData.addShopAll" ref="addShopNew" @click="styleClick('click', 'addShopNew')"
    @mousemove="styleClick('mousemove', 'addShopNew')" @mouseout="styleClick('mouseout')">
    <div :style="styleData.prizeBack" class="prizeBack" v-if="showPrize == '1'">
      <div :style="styleData.prizeDetail" class="prizeBox">
        <div class="drawShowYhq">
          <img class="drawShowYhq1" :src="prizeImg" />
          <div class="back">
          </div>
        </div>
        <div style="width: 66%">
          <div class="addShopNewContent">
            <div class="addShopNewJifen">
              <div :style="styleData.fib2">{{ prizeInfoName }}</div>
              <!-- <div :style="styleData.fib2">{{ prizeNum }}</div>
              <div :style="styleData.fib2">{{ prizeName }}</div> -->
            </div>
          </div>
          <div :style="styleData.remain">奖品剩余：{{ prizeResultNum }} 份</div>
        </div>
      </div>
    </div>
    <div class="goods">
      <div :style="styleData.mainStyle">
        <img v-if="styleData.tixingImageStyle" :style="styleData.tixingImageStyle"
          :src="styleData.tixingImageStyle.imageUrl" alt="" />
        加购
        <span v-if="oneClickPurchase == 1" :style="styleData.bannerName">{{ finishNum }}</span>
        <span v-else :style="styleData.bannerName">全部</span>
        宝贝可领取礼品
      </div>
      <div :style="styleData.instruction">本活动暂不支持百亿补贴的商品参与～</div>
      <div v-if="oneClickPurchase == 0 && status != 1" :style="styleData.onebtndotask1" v-lz-click="'9'"
        @click="addSku()" style="z-index: 12"></div>

      <div v-if="oneClickPurchase == 0 && status == 1" :style="styleData.onebtndotask2"></div>
      <div class="addShopNewGoods">
        <div v-for="(item, index) in skuList" :key="index" class="goodsBack">
          <div v-lz-click="'5'" v-lz-skuid="item.skuId" @click="goToBuy(item)">
            <div class="pic">
              <img alt="" :src="item.skuImg ? item.skuImg : item.imagePath" />
            </div>
          </div>

          <div class="title">
            <div class="titleSpan">{{ item.skuName ? item.skuName : item.name }}</div>
            <div :style="styleData.detail" v-if="item.status != 1 && oneClickPurchase != 0" v-lz-click="'9'"
              @click="addSku(item, index)">
              <span style="font-size: 0.12rem">￥</span>
              {{ item.skuPrice ? item.skuPrice : item.price }}
            </div>
            <div :style="styleData.notDetail" v-if="item.status == 1 && oneClickPurchase != 0">
              <span style="font-size: 0.12rem">￥</span>
              {{ item.skuPrice ? item.skuPrice : item.price }}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import store from '../../../store/store';
import { goToShopPage, newToSkuPage, prizeTypeCheck } from '../../../util/tools.js';
import { allShare } from '../../../js/share.js';
import apis1 from '../../../util/apis1.js';
import { FollowShopFirstPopComService, AddBuyErrDialogService } from '../../../util/comCreate.js';
import { PrizeResultPopComService } from '../../../util/hdzxtcomCreate.js';
import dateUtil from "../../../util/dateUtil.js";

let { drawPrize, addSkuTask, addSkuTaskTodo, followShop, storeGoodsPoint } = apis1;
export default {
  props: ['isTemplate', 'datas', 'styleData', 'keyData', 'templateData', 'isWebClick', 'modifyContent'],
  data() {
    return {
      skuList: [], //加购商品列表
      finishNum: '', // 加购几个机会获得奖品
      taskId: '',
      startTime: '',
      endTime: '',
      prizeImg: '', //奖品图片
      prizeName: '', //奖品名字
      prizeTypeName: '',
      prizeNum: '', //奖品数量
      prizeResultNum: '', //剩余奖品数量
      showPrize: '0', //是否显示奖品
      oneClickPurchase: 1, // 一键加购
      status: 0,
      shopName: '',
      prizeListData: [],
      prizeResultData: {
        styleData: {},
        datas: {},
        keyData: {
          prizeUrl: 'showImg',
          prizeName: 'prizeName',
          prizeType: 'prizeType',
          priceInfo: 'priceInfo',
          discountType: 'discountType',
          couponType: 'couponType'
        }
      },
      styleDataOld: {},
      isCustomSwitching: '', //有tab切换时
      prizeInfoName: ''
    };
  },
  created() {
    this.initData();
    //深拷贝重置需要
    console.log(this.styleData, 'styleData');

    this.styleDataOld = JSON.parse(JSON.stringify(this.styleData));
  },

  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);
      }
    },
    async initData() {
      if (this.isTemplate) {
        var datasAll = this.templateData;
        if (datasAll) {
          this.oneClickPurchase = datasAll.basicTask.taskList[0].rule.addSkuRule.oneClickPurchase;
          this.skuList = datasAll.basicTask.taskList[0].skuInfoVO;
          if (datasAll.basicTask.taskList[0].rule.addSkuRule.finishType == 0) {
            this.finishNum = '全部';
          } else {
            this.finishNum = datasAll.basicTask.taskList[0].rule.addSkuRule.finishNum + '个';
          }

          this.showPrize = datasAll.activeConditions.showPrize;
          if (this.showPrize == '1') {
            var prizeList = datasAll.draw.prizeList;
            this.prizeNum = prizeList[0].beanNum;
            this.prizeImg = prizeList[0].showImg;
            this.prizeResultNum = prizeList[0].totalPrizeNum;

            this.prizeName = prizeTypeCheck(prizeList[0].prizeType);
            this.prizeTypeName = prizeTypeCheck(prizeList[0].prizeType);
            this.prizeInfoName = prizeList[0].prizeName
            if (prizeList[0].prizeType == 2) {
              if (prizeList[0].couponData) {
                this.prizeNum = '￥' + prizeList[0].couponData.couponDiscount;
              } else {
                this.prizeNum = '￥' + prizeList[0].priceInfo;
              }
            } else {
              this.prizeNum = ''
            }
          }
        } else {
          this.oneClickPurchase = 0;
          this.status = 1;
          this.finishNum = '全部';
          this.prizeName = '积分';
          this.prizeResultNum = '1';
          this.prizeImg = 'https://img10.360buyimg.com/imgzone/jfs/t1/172629/8/10529/9649/60a4cb50Edc2ee40a/b53b1246de5f2089.png';
          this.prizeNum = '10';
          this.showPrize = '1';

          this.skuList = [
            {
              skuImg: '//img12.360buyimg.com/n0/jfs/t12832/246/1288857654/132524/7616c638/5a1e4ff8Ncd7cd478.jpg',
              skuId: '1336052',
              skuName: '加购商品1',
              skuPrice: '10',
              status: 0
            },
            {
              skuImg: '//img12.360buyimg.com/n0/jfs/t12832/246/1288857654/132524/7616c638/5a1e4ff8Ncd7cd478.jpg',
              skuId: '100015054036',
              skuName: '加购商品2',
              skuPrice: '10',
              status: 0
            },
            {
              skuImg: '//img12.360buyimg.com/n0/jfs/t12832/246/1288857654/132524/7616c638/5a1e4ff8Ncd7cd478.jpg',
              skuId: '100009576107',
              skuName: '加购商品3',
              skuPrice: '10',
              status: 0
            },
            {
              skuImg: '//img12.360buyimg.com/n0/jfs/t12832/246/1288857654/132524/7616c638/5a1e4ff8Ncd7cd478.jpg',
              skuId: '加购商品4',
              skuName: '10',
              skuPrice: '10',
              status: 0
            }
          ];
        }
        if (this.isWebClick) {
          this.oneClickPurchase = 0;
          this.status = 0;
          console.log(this.oneClickPurchase, this.status, 888888);
        }
      } else {
        drawPrize(initdatass => {
          this.prizeListData = initdatass.data;
          this.prizeInfoName = initdatass.data.prizeInfo[0].prizeName
          console.log(initdatass.data, '傻蛋');
          //请求接口
          addSkuTask(initdatas => {
            console.log(initdatas, 321);
            this.prizeResultNum = initdatas.data.prizeResultNum;
            this.startTime = initdatas.data.addWares.startTime;
            this.endTime = initdatas.data.addWares.endTime;
            if (initdatas.data.addWares.finishType == 0) {
              this.finishNum = '全部';
            } else {
              this.finishNum = initdatas.data.addWares.finishNum + '个';
            }
            if (initdatas.data.addWares.followShopStatus == 1) {
              FollowShopFirstPopComService.create(initdatas.data.addWares.shopName, 1, submit => {
                FollowShopFirstPopComService.close();
                if (submit == 1) {
                  followShop(initdatas => { });
                }
              });
            }

            this.status = initdatas.data.addWares.status;
            this.oneClickPurchase = initdatas.data.addWares.oneClickPurchase;
            this.skuList = initdatas.data.addWares.skuInfoVO;
            this.taskId = initdatas.data.addWares.taskId;
            if (initdatas.data.addWares.taskType) {
              if (initdatas.data.addWares.taskType == 1) {
                var prizeList = this.prizeListData.prizeInfo;
                this.showPrize = '1';
                this.prizeNum = prizeList[0].beanNum;
                this.prizeImg = prizeList[0].showImg;


                this.prizeName = prizeTypeCheck(prizeList[0].prizeType);
                this.prizeTypeName = prizeTypeCheck(prizeList[0].prizeType);
                if (prizeList[0].prizeType == 1) {
                  this.prizeName = "京豆";
                } else if (prizeList[0].prizeType == 4) {
                  this.prizeName = "积分";
                } else if (prizeList[0].prizeType == 2) {
                  if (prizeList[0].couponData) {
                    this.prizeNum = '￥' + prizeList[0].couponData.couponDiscount;
                  } else {
                    this.prizeNum = '￥' + prizeList[0].priceInfo;
                  }
                } else {
                  this.prizeNum = ''
                }

              } else {
                this.showPrize = '1';
              }
            } else {
              this.showPrize = '0';
            }
            console.log(this.skuList);
          });
        });
      }
    },

    addSku(item, index) {
      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;
      }
      if (new Date().getTime() < this.startTime || new Date().getTime() > this.endTime) {
        this.$toast(`${dateUtil.formatTime(this.startTime, "yyyy-MM-dd hh:mm:ss")}——${dateUtil.formatTime(this.endTime, "yyyy-MM-dd hh:mm:ss")}时间可以开始加购，请稍后再来`);
        return;
      }
      if (item) {
        addSkuTaskTodo(this.taskId, item.skuId, data => {
          const self = this;
          console.log(data.data);
          item.status = 1;
          if (data.data && data.data.status == 1) {
            self.fulfillHandle(self.prizeListData.prizeInfo[0], data.data);
          } else {
            AddBuyErrDialogService.create(
              this.prizeResultData,
              data.data,
              (submit) => {
                AddBuyErrDialogService.close();
              }
            );
          }
          setTimeout(() => {
            this.initData();
            this.doFrontBuryPoint({ code: `spq-jgsp${index + 1}`, value: item.skuId, event: 'click' })
          }, 1000)
        });
      } else {
        addSkuTaskTodo(this.taskId, '', data => {
          const self = this;
          // console.log(data.data);
          this.status = 1;
          if (data.data && data.data.status == 1) {
            self.fulfillHandle(self.prizeListData.prizeInfo[0], data.data);
          } else {
            AddBuyErrDialogService.create(
              this.prizeResultData,
              data.data,
              (submit) => {
                AddBuyErrDialogService.close();
              }
            );
          }
          setTimeout(() => {
            this.initData();
            this.doFrontBuryPoint({ code: 'spq-yjjg', value: '', event: 'click' })
          }, 1000)
        });
      }
    },
    enterstore() {
      if (this.isTemplate) {
        // this.$toast("活动预览，仅供查看");
        return;
      }
      -document.querySelector('body').removeAttribute('style');
      console.log('进入商店');
      let shopId = store.state.shopId;
      storeGoodsPoint(4);
      goToShopPage(shopId);
    },
    goToBuy(sku) {
      console.log(sku);
      if (this.isTemplate) {
        // this.$toast("活动预览，仅供查看");
        return;
      }
      storeGoodsPoint(5);
      newToSkuPage(sku);
    },
    //邀请好友
    shareButton() {
      if (this.isTemplate) {
        // this.$toast("活动预览，仅供查看");
        return;
      }
      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) {
          // Toast('活动正在惊醒中');
          // this.share = 1
          allShare(this.isTemplate, this, callBackData => {
            console.log(callBackData, 'callBackData');
          });
        }
      } else {
        // this.$toast("活动预览，仅供查看");
      }
    },
    //得奖后的处理
    fulfillHandle(prizeData, initDatas) {
      this.prizeResultData.datas = prizeData;
      console.log(this.prizeResultData.datas + 'this.prizeResultData.datas');
      PrizeResultPopComService.create(this.prizeResultData, initDatas, this.styleData, submit => {
        PrizeResultPopComService.close();
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.addShopNewGoods {
  width: 100%;
  height: 10.5rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 0 0.3rem 0rem;
  box-sizing: border-box;
  margin-top: 0.3rem;
  overflow-y: auto;

  .goodsBack {
    width: 3.4rem;
    box-sizing: border-box;
    background: #fff;
    margin-bottom: 0.1rem;
    border-radius: 0.2rem;

    .pic {
      width: 100%;
      height: 3.4rem;

      // border-top-left-radius: 0.2rem;
      // border-top-right-radius: 0.2rem;
      img {
        width: 100%;
        height: 100%;
        border-top-left-radius: 0.2rem;
        border-top-right-radius: 0.2rem;
      }
    }

    .titleSpan {
      overflow: hidden;
      -webkit-line-clamp: 2;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      font-size: 0.2rem;
      color: #262626;
      text-align: left;
    }

    .title {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-top: 0.13rem;
      padding: 0.2rem;
    }
  }
}

.collect-fd {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
}

.collect-fd .item {
  height: 0.88rem;
  width: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}



.addShopNewContent {
  margin-top: 0.41rem;
  margin-left: 0.43rem;

  .addShopNewJifen {
    text-align: left;
  }
}

.back {
  width: 0.95rem;
  height: 0.95rem;
  background-image: url(//img10.360buyimg.com/imgzone/jfs/t1/16458/32/20997/4740/668cd1d9F810a2488/0631a87108031bb7.png);
  background-size: 100%;
  background-repeat: no-repeat;
  position: absolute;
  left: 0;
  top: 0;
  text-align: center;
  font-size: 0.24rem;
  color: #fff;
  box-sizing: border-box;
}

.prizeBack {
  display: flex;
  justify-content: center;
  position: relative;

  .prizeBox {
    width: 6.39rem;
    height: 2.5rem;
    position: absolute;
    top: 1.7rem;
  }
}

.drawShowYhq {
  width: 2.5rem;
  height: 2.5rem;
  display: block;
  border-radius: 0.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.drawShowYhq1 {
  width: 2rem;
}

.goods {
  width: 7.5rem;
  height: 14.94rem;
  background-image: url(//img10.360buyimg.com/imgzone/jfs/t1/237999/6/20756/137540/668cd6a8F08f461f6/548a3561ce822278.png);
  background-size: 100%;
  background-repeat: no-repeat;
  margin-top: -1.5rem;
  padding-top: 2rem;
}
</style>
