<template>
  <div
    :style="styleData.activeGifts"
    ref="acivityPrize"
    @click="styleClick('click', 'acivityPrize')"
    @mousemove="styleClick('mousemove', 'acivityPrize')"
    @mouseout="styleClick('mouseout')"
  >
    <div @click="goToBuy" :style="styleData.ordBtn" />
    <div :style="styleData.prizeContainer">
      <prize-Header
        :amount="monetary"
        :differ="needAmount"
        :show-progress="prizeList.length > 0"
      />
      <prize-item
        @receive="goToOrderPop"
        v-for="(prize, idx) in prizeList"
        :key="prize.prizeId"
        :show-progress="!isLastPrize(idx)"
        :prize="prize"
      />
    </div>
  </div>
</template>
<script>
import apis1 from "../../../util/apis1.js";
import PrizeItem from "./components/PrizeItem";
import PrizeHeader from "./components/PrizeHeader";
import {
  OrderGiftPopComService,
  StepOrdSuccessPopService,
  OrderAddressPopService,
  AddressPopComService
} from "../../../util/comCreate.js";
import { OrderGiftFollowShopPopService } from "../../../util/comCreate.js";
import { activityGoodsService } from "../../../util/hdzxtcomCreate.js";
import store from "@/store/store";

let { breakThroughActivity, breakThroughOrdCheck, storeGoodsPoint } = apis1;
export default {
  components: {
    PrizeItem,
    PrizeHeader
  },
  props: [
    "datas",
    "keyData",
    "styleData",
    "isTemplate",
    "templateData",
    "isWebClick",
    "modifyContent"
  ],
  data() {
    return {
      prizeList: [],
      orderShopList: [],
      totalOrderAmount: 0, //订单总金额
      orderCnt: 0, //订单笔数
      lackOrderCnt: 0, //不足订单笔数
      lackOrderAmount: 0, //不足订单金额
      shopId: "",
      styleDataOld: {},
      isCustomSwitching: "",
      buttonFlag: true,
      orderCntFlag: 0,
      assignGoodsFlag: 0,
      addressPrize: 0,
      isEditAddress: true,
      isAlLookAddress: true,
      monetary: 0,
      needAmount: 0,
      resMap: {
        1: "不满足条件领取条件哦~",
        2: "已经领取过~",
        3: "手慢了，奖品已领光~"
      }
    };
  },

  created() {
    //深拷贝重置需要
    this.styleDataOld = JSON.parse(JSON.stringify(this.styleData));
    this.initData();
  },
  mounted() {},
  methods: {
    // 去下单
    goToBuy() {
      if (sessionStorage.getItem("actStatus") == 1) {
        this.$toast("活动尚未开始");
        return;
      }
      if (this.assignGoodsFlag === 0) {
        this.goShop();
      } else {
        this.stopScroll();
        activityGoodsService.create(() => {
          this.canScroll();
          activityGoodsService.close();
        }, this.styleData);
      }
    },

    goShop() {
      if (this.isTemplate == true) {
        // this.$toast('活动预览，仅供查看');
        return;
      }
      let shopId = store.state.shopId;
      storeGoodsPoint(4);
      goToShopPage(shopId);
    },

    styleClick(type, refName) {
      if (this.isWebClick) {
        //传值给B端
        let byValue = {
          modifyContent: this.modifyContent,
          refName: refName,
          styleData: this.styleData,
          c_this: this,
          isCustomSwitching: this.isCustomSwitching,
          styleDataOld: this.styleDataOld
        };
        this.$emit("opertaionCom", type, byValue);
      }
    },
    initData() {
      const datasAll = this.templateData;
      if (this.isTemplate) {
        // 活动预览
        // this.$toast("活动预览，仅供查看");
        if (datasAll) {
          this.prizeList = datasAll.breakThrough.prizeList.map(item => ({
            ...item,
            prizeImg: item.showImg
          }));
          // 没有模板的数据-创建之后
          this.orderShopList = {
            prizeName: this.prizeList[0].prizeName,
            prizeSurplusCnt: this.prizeList[0].totalPrizeNum,
            prizeImg: this.prizeList[0].showImg
          };
        } else {
          // 没有模板的数据-创建之前
          this.orderShopList = {
            prizeName: "京豆",
            prizeSurplusCnt: "10",
            prizeImg:
              "//img10.360buyimg.com/imgzone/jfs/t1/176585/24/10488/6916/60a4cb50E562734ab/f9ab956ec09a4146.png"
          };
        }
      } else {
        this.initDataPrize();
      }
    },
    initDataPrize() {
      breakThroughActivity(data => {
        this.prizeList = data.data.taskBreakThroughPrizeDTO;
        this.orderShopList = data.data;
        this.totalOrderAmount = data.data.totalOrderAmount;
        this.orderCnt = data.data.orderCnt;
        this.lackOrderCnt = data.data.lackOrderCnt;
        this.lackOrderAmount = data.data.lackOrderAmount;
        this.shopId = data.data.shopId;
        this.orderCntFlag = data.data.orderCntFlag;
        this.addressPrize = data.data.address;
        this.assignGoodsFlag = data.data.assignGoodsFlag;
        this.monetary = data.data.monetary;
        this.needAmount = data.data.needAmount;

        // 是否显示关注弹窗
        if (data.data.followStoreFlag == 1) {
          OrderGiftFollowShopPopService.create(data.data.shopLogoUrl, () => {
            OrderGiftFollowShopPopService.close();
          });
        }

        if (this.addressPrize > 0) {
          sessionStorage.setItem("addressId", data.data.addressId);
          sessionStorage.setItem("prizeGrantId", data.data.grantId);

          this.datas.isEditAddress = this.isEditAddress;
          this.datas.isAlLookAddress = this.isAlLookAddress;

          if (this.addressPrize == 1) {
            OrderAddressPopService.create(submit => {
              OrderAddressPopService.close();
            });
          } else if (this.addressPrize == 2) {
            AddressPopComService.create(this.datas, submit => {
              AddressPopComService.close();
            });
          }
        }
      });
    },
    goToOrderPop(prize) {
      if (this.isTemplate) {
        return;
      }
      let actStatus = sessionStorage.getItem("actStatus");

      if (actStatus == 2) {
        this.$toast("活动已结束");
        return;
      }
      if (actStatus == 1) {
        this.$toast("活动尚未开始");
        return;
      }

      breakThroughOrdCheck(prize.prizeId, data => {
        if (data.data !== 0) {
          this.$toast(this.resMap[data.data]);
        } else {
          this.orderShopList.prizeSurplusCnt =
            this.orderShopList.prizeSurplusCnt - 1;
          StepOrdSuccessPopService.create(prize, () => {
            this.initDataPrize();
            StepOrdSuccessPopService.close();
          });
        }
      });
    },
    isLastPrize(idx) {
      return this.prizeList.length === idx + 1;
    }
  }
};
</script>
<style lang="scss" scoped></style>
