<template name="addShop">
  <div
    :style="styleData.addShopAll"
    ref="addShop"
    @click="styleClick('click', 'addShop')"
    @mousemove="styleClick('mousemove', 'addShop')"
    @mouseout="styleClick('mouseout')"
  >
    <div :style="styleData.mainStyle">
      加购
      <span :style="styleData.bannerName"> {{ finishNum }}</span
      >宝贝可领取礼品
    </div>
    <div class="f-tac" v-if="showPrize == '1'">
      <div class="draw-detail-sku" :style="styleData.prizeDetail">
        <div class="draw-tag"></div>
        <div class="f-ib">
          <img class="draw-show-yhq" :src="prizeImg" />
        </div>
        <div class="f-ib f-tal f-font">
          <div class="f-tac f-font-color">
            <div :style="styleData.fib1">{{ prizeNum }}</div>
            <div :style="styleData.fib2">
              {{ prizeName }}
            </div>
          </div>
        </div>
      </div>
    </div>

    <div style="min-height:7.5rem;">
      <ul class="draw-collect-list">
        <li v-for="(item, index) in skuList" :key="index" style="z-index: 2">
          <div v-if="isWebClick">
            <div class="pic" style="height: 3.3809rem">
              <a href="javascript:;" style="display: block; height: 100%"
                ><img
                  alt=""
                  :src="item.skuImg ? item.skuImg : item.imagePath"
                  style="width: 100%; max-height: 100%"
                />
              </a>
            </div>
            <div class="title">
              <span class="titleSpan">{{
                item.skuName ? item.skuName : item.name
              }}</span>
            </div>
            <div class="detail">
              <!---->
              <div class="price">
                ￥{{ item.skuPrice ? item.skuPrice : item.price }}
              </div>
            </div>
          </div>

          <div v-lz-click="'4'" @click="enterstore" v-else>
            <div class="pic" style="height: 3.3809rem">
              <a href="javascript:;" style="display: block; height: 100%"
                ><img
                  alt=""
                  :src="item.skuImg ? item.skuImg : item.imagePath"
                  style="width: 100%; max-height: 100%"
                />
              </a>
            </div>
            <div class="title">
              <span class="titleSpan">{{
                item.skuName ? item.skuName : item.name
              }}</span>
            </div>
            <div class="detail">
              <!---->
              <div class="price">
                ￥{{ item.skuPrice ? item.skuPrice : item.price }}
              </div>
            </div>
          </div>

          <div v-if="isWebClick">
            <div
              class="attention"
              v-if="item.status != 1 && oneClickPurchase != 0"
            ></div>
            <div
              class="attention1"
              v-if="item.status == 1 && oneClickPurchase != 0"
            ></div>
          </div>

          <div v-else>
            <div
              class="attention"
              v-if="item.status != 1 && oneClickPurchase != 0"
              v-lz-click="'9'"
              @click="addSku(item)"
            ></div>
            <div
              class="attention1"
              v-if="item.status == 1 && oneClickPurchase != 0"
            ></div>
          </div>
        </li>
      </ul>
    </div>
      <div
        v-if="oneClickPurchase == 0 && status != 1 && isWebClick"
        class="onebtndotask"
        :style="styleData.onebtndotask1"
        style="z-index: 12"
      >
        一键加购
      </div>
       <div
        v-if="oneClickPurchase == 0 && status != 1 && !isWebClick"
        class="onebtndotask"
        :style="styleData.onebtndotask1"
        v-lz-click="'9'"
        @click="addSku()"
        style="z-index: 12"
      >
        一键加购
      </div>


    <div
      :style="styleData.onebtndotask2"
      class="onebtndotask"
      v-if="oneClickPurchase == 0 && status == 1"
    >
      已加购
    </div>

    <div :class="isWebClick ? 'collect-fd1' : 'collect-fd'" style="z-index: 100">
      <div v-if="isWebClick" :style="styleData.goToShop" class="item f-fl">
        进店逛逛
      </div>

      <div
        v-else
        :style="styleData.goToShop"
        class="item f-fl"
        @click="enterstore"
        v-lz-click="'4'"
      >
        进店逛逛
      </div>

      <div v-if="isWebClick" :style="styleData.share" class="item f-fl">
        分享
      </div>

      <div
        v-else
        :style="styleData.share"
        class="item f-fl"
        v-lz-click="'2'"
        @click="shareButton"
      >
        分享
      </div>
    </div>
  </div>
</template>
<script>
import store from "../../../store/store";
import { goToShopPage } from "../../../util/tools.js";
import { allShare } from "../../../js/share.js";
import apis1 from "../../../util/apis1.js";
import {
  AddBuyErrDialogService,
  PrizeResultPopComService,
  FollowShopFirstPopComService,
} from "../../../util/comCreate.js";
let { drawPrize, addSkuTask, addSkuTaskTodo, followShop,storeGoodsPoint } = apis1;
export default {
  props: [
    "isTemplate",
    "datas",
    "styleData",
    "keyData",
    "templateData",
    "isWebClick",
    "modifyContent",
  ],
  data() {
    return {
      skuList: [], //加购商品列表
      finishNum: "", // 加购几个机会获得奖品
      taskId: "",
      prizeImg: "", //奖品图片
      prizeName: "", //奖品名字
      prizeNum: "", //奖品数量
      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切换时
    };
  },
  created() {
    this.initData();
    //深拷贝重置需要
    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 + "个";
          }
          // if (datasAll.activeConditions) {
          //   if (datasAll.activeConditions.involvementFlag == 1) {
          //     FollowShopFirstPopComService.create(
          //       "XXX京东自营官方旗舰店",
          //       1,
          //       (submit) => {
          //         FollowShopFirstPopComService.close();
          //       }
          //     );
          //   }
          // }
          this.showPrize = datasAll.activeConditions.showPrize;
          if (this.showPrize == "1") {
            var prizeList = datasAll.draw.prizeList;
            this.prizeNum = prizeList[0].beanNum;
            this.prizeImg = prizeList[0].showImg;
            if (prizeList[0].prizeType == 1) {
              this.prizeName = "京豆";
            } else if (prizeList[0].prizeType == 4) {
              this.prizeName = "积分";
            } else if (prizeList[0].prizeType == 2) {
              this.prizeName = "优惠券";
              if (prizeList[0].couponData) {
                this.prizeNum = "￥" + prizeList[0].couponData.couponDiscount;
              } else {
                this.prizeNum = "￥" + prizeList[0].priceInfo;
              }
            } else if (prizeList[0].prizeType == 3) {
              this.prizeName = "实物";
              this.prizeNum = "";
            } else if (prizeList[0].prizeType == 6) {
              this.prizeName = "红包";
              this.prizeNum = "";
            } else if (prizeList[0].prizeType == 8) {
              this.prizeName = "京东E卡";
              this.prizeNum = "";
            } else if (prizeList[0].prizeType == 9) {
              this.prizeName = "京东plus会员卡";
              this.prizeNum = "";
            } else {
              this.prizeName = "爱奇艺会员卡";
              this.prizeNum = "";
            }
          }
        } else {
          this.finishNum = "全部";
          this.prizeName = "京豆";
          this.prizeImg =
            "https://img10.360buyimg.com/imgzone/jfs/t19219/251/365012456/7582/eb87eb26/5a7157c2Nc90e7679.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: "加购商品31",
              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((initdatas) => {
          this.prizeListData = initdatas.data;
          console.log(initdatas.data,"傻蛋");
          //请求接口
          addSkuTask((initdatas) => {
            console.log(initdatas);
            if (initdatas.data.addWares.finishType == 0) {
              this.finishNum = "全部";
            } else {
              this.finishNum = initdatas.data.addWares.finishNum + "个";
            }
            console.log(initdatas.data.addWares.followShopStatus);
            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;
                if (prizeList[0].prizeType == 1) {
                  this.prizeName = "京豆";
                } else if (prizeList[0].prizeType == 4) {
                  this.prizeName = "积分";
                } else if (prizeList[0].prizeType == 2) {
                  this.prizeName = "优惠券";
                  if (prizeList[0].couponData) {
                    this.prizeNum =
                      "￥" + prizeList[0].couponData.couponDiscount;
                  } else {
                    this.prizeNum = "￥" + prizeList[0].priceInfo;
                  }
                } else if (prizeList[0].prizeType == 3) {
                  this.prizeName = "实物";
                  this.prizeNum = "";
                } else if (prizeList[0].prizeType == 6) {
                  this.prizeName = "红包";
                  this.prizeNum = "";
                } else if (prizeList[0].prizeType == 8) {
                  this.prizeName = "京东E卡";
                  this.prizeNum = "";
                } else if (prizeList[0].prizeType == 9) {
                  this.prizeName = "京东plus会员卡";
                  this.prizeNum = "";
                } else {
                  this.prizeName = "爱奇艺会员卡";
                  this.prizeNum = "";
                }
              } else {
                this.showPrize = "1";
              }
            } else {
              this.showPrize = "0";
            }
            console.log(this.skuList);
          });
        });
      }
    },

    addSku(item) {
      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 (item) {
        addSkuTaskTodo(this.taskId, item.skuId, (data) => {
          const self = this;
          console.log(data.data,'111');
          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) {
      if (this.isTemplate) {
        this.$toast("活动预览，仅供查看");
        return;
      }
      console.log(sku);
      storeGoodsPoint(5)
    },
    //邀请好友
    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,
        (submit) => {
          PrizeResultPopComService.close();
        }
      );
    },
  },
};
</script>
<style lang="scss" scoped>
.draw-banner-name span {
  color: #f23c3c !important;
}
.banner-name {
  font-weight: bold;
  color: #fff500;
}
.collect-fd {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 0.9rem;
}
.collect-fd .item {
  width: 50%;
  line-height: 0.9rem;
  color: #fff;
  text-align: center;
  font-size: 0.3rem;
}
.collect-fd1 {
  position: sticky;
  bottom: 0;
  left: 0;
  right: 0;
  height: 0.9rem;
}
.collect-fd1 .item {
  width: 50%;
  line-height: 0.9rem;
  color: #fff;
  text-align: center;
  font-size: 0.3rem;
}
.f-fl {
  float: left;
}
.draw-collect-list {
  padding: 0.3rem 0.3rem 0.9rem;
  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;
}
.titleSpan {
  overflow: hidden;
  -webkit-line-clamp: 2;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
}
.draw-collect-list li .detail {
  padding: 0.1rem;
  font-size: 0.28rem;
  float: left;
}
.draw-collect-list li .attention {
  width: 0.88rem;
  height: 0.4rem;
  background-color: #fff;
  background-image: url(https://img10.360buyimg.com/imgzone/jfs/t1/11403/13/5506/2722/5c359368E1a0e1c04/6244da2a540b1e2a.png);
  background-size: 100%;
  background-repeat: no-repeat;
  float: right;
  margin: 0.1rem;
}
.draw-collect-list li .attention1 {
  width: 0.88rem;
  height: 0.4rem;
  background-color: #fff;
  background-image: url(https://img10.360buyimg.com/imgzone/jfs/t1/11403/13/5506/2722/5c359368E1a0e1c04/6244da2a540b1e2a.png);
  background-size: 100%;
  background-repeat: no-repeat;
  float: right;
  margin: 0.1rem;
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter: grayscale(100%);
  filter: gray;
}
.draw-collect-list li .detail .price {
  color: #f23c3c;
}
.draw-collect-list li:nth-child(even) {
  margin-left: 2%;
}

.f-tac {
  margin-top: 0.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.fac {
  text-align: center;
  margin-top: 0.5rem;
}
.img {
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.draw-detail-sku {
  width: 6.7rem;
  height: 2.4rem;
  background-size: 100%;
  padding: 0.2rem;
  display: inline-block;
  border-radius: 0.1rem;
  position: relative;
  overflow: hidden;
  margin-top: 0.5rem;
}
.draw-detail-sku .draw-tag {
  position: absolute;
  top: 0;
  left: 0;
  width: 0.95rem;
  height: 0.95rem;
  background-image: url(https://img10.360buyimg.com/imgzone/jfs/t16000/116/2077686384/721/713bed7b/5a7157c2N44e0002b.png);
  background-repeat: no-repeat;
  background-size: 100%;
}
.draw-detail-sku .draw-show-yhq {
  width: 2rem;
  height: 2rem;
  display: inline-block;
  background-repeat: no-repeat;
  background-size: 100%;
}
.f-tal {
  text-align: left;
}
.f-ib {
  display: inline-block;
  vertical-align: middle;
}
.f-tac {
  margin-top: 0.2rem !important;
  text-align: center;
}
// .draw-detail-sku .f-tal .f-tac div:last-of-type {
//   color: #fff !important;
// }
.f-font {
  width: 3.1rem;
  margin-left: 0.1rem;
}
// .f-font-color {
//   color: rgb(242, 60, 60);
// }
.onebtndotask {
  width: 4rem;
  position: sticky;
  bottom: 1.1rem;
  height: 0.6rem;
  line-height: 0.6rem;
  font-size: 0.3rem;
  text-align: center;
  left: 50%;
  transform: translateX(-50%);
  color: #fff;
  background: red;
  z-index: 2;
  cursor: pointer;
  border-radius: 0.3rem;
}
</style>