<template>
  <div :style="styleData.activeGifts" ref="acivityPrize"
       @click="styleClick('click', 'acivityPrize')"
       @mousemove="styleClick('mousemove', 'acivityPrize')"
       @mouseout="styleClick('mouseout')">
    <div class="active-gifts-main">
      <div class="active-gifts-left">
        <img :src="orderShopList.prizeImg"
             alt="">
      </div>
      <div class="active-gifts-right">
        <div class="active-gifts-right-top">
          <div :style="styleData.activeRightName">{{ orderShopList.prizeName }}</div>
          <div :style="styleData.activeRightCount">奖品剩余:&nbsp;&nbsp;{{ orderShopList.prizeSurplusCnt }}份</div>
        </div>
        <div v-if="isWebClick" id="active-right-btn" :style="styleData.activeRightBtn"
             :class="{gray100:buttonFlag == false}">
          {{ title }}
        </div>
        <div v-else id="active-right-btn" :style="styleData.activeRightBtn" v-lz-click="'14'"
             :class="{gray100:buttonFlag == false}" @click="goToOrderPop()">
          {{ title }}
        </div>
      </div>
    </div>
  </div>
</template>
<script>

import apis1 from "../../../util/apis1.js";
import {OrderGiftPopComService, OrderSuccessPopService,OrderAddressPopService,AddressPopComService} from '../../../util/comCreate.js';
import {OrderGiftFollowShopPopService} from '../../../util/comCreate.js';
import dateUtils from "../../../util/dateUtil";

let {exposureList, orderCheckList,orderPrizeList} = apis1;
export default {
  props: ['datas', 'keyData', 'styleData', 'isTemplate', "templateData", "isWebClick", "modifyContent"],
  data() {
    return {
      orderShopList: [],
      totalOrderAmount: 0,//订单总金额
      orderCnt: 0,//订单笔数
      lackOrderCnt: 0,//不足订单笔数
      lackOrderAmount: 0,//不足订单金额
      shopId: "",
      styleDataOld: {},
      isCustomSwitching: "",
      buttonFlag: true,
      title: '待报名',
      orderCntFlag: 0,
      assignGoodsFlag:0,
      prizeListData: [ // 奖品信息
        {
          position: 1,
          showImg:
            "//img10.360buyimg.com/imgzone/jfs/t28501/166/1548277010/2761/aa567cad/5ce4dfd3Na6d534e4.png",
          angle: 0,
          prizeName: "谢谢参与",
        },
      ],
      addressPrize:0,
      isEditAddress:true,
      isAlLookAddress:true,
    };
  },

  created() {
    //深拷贝重置需要
    this.styleDataOld = JSON.parse(JSON.stringify(this.styleData));
    this.initData();
  },
  mounted() {
  },
  methods: {
    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() {
      var datasAll = this.templateData;
      if (this.isTemplate) {
        // 活动预览
        this.$toast("活动预览，仅供查看");
        if (datasAll) {
          this.prizeListData = datasAll.draw.prizeList;
          // 没有模板的数据-创建之后
          this.orderShopList = {
            prizeName: this.prizeListData[0].prizeName,
            prizeSurplusCnt: this.prizeListData[0].totalPrizeNum,
            prizeImg: this.prizeListData[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() {
      exposureList(data => {
        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;
        if (this.orderShopList.receivePrize) {
          this.title = '已报名';
          this.buttonFlag = false;
        } else if (this.orderShopList.prizeSurplusCnt == 0) {
          // bug21390
          this.title = '已领光';
          this.buttonFlag = false;
        } else {
          this.title = '待报名';
          this.buttonFlag = true;
        }

        // 是否显示关注弹窗
        if (data.data.followStoreFlag == 1) {
          OrderGiftFollowShopPopService.create(data.data.shopLogoUrl, prizeRecordDetilClick => {
            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() {
      if (this.isTemplate) {
        // 活动预览
        this.$toast("活动预览，仅供查看");
        return;
      }
      let actStatus = sessionStorage.getItem("actStatus");

      if (actStatus == 2) {
        this.$toast("活动已结束");
        return;
      }
      if (actStatus == 1) {
        this.$toast("活动尚未开始");
        return;
      }
      if (this.buttonFlag == true) {
        orderCheckList('', data => {
          if (data.data.receivePrize == false) {
            this.orderCnt = data.data.orderCnt;
            this.totalOrderAmount = data.data.totalOrderAmount;
            this.lackOrderCnt = data.data.lackOrderCnt;
            this.lackOrderAmount = data.data.lackOrderAmount;
            this.shopId = data.data.shopId;
            this.assignGoodsFlag = data.data.assignGoodsFlag;
            OrderGiftPopComService.create(this.totalOrderAmount, this.orderCnt, this.lackOrderCnt, this.lackOrderAmount, this.shopId,this.orderCntFlag,this.assignGoodsFlag, prizeRecordDetilClick => {
              OrderGiftPopComService.close();
              this.initDataPrize();
            });
          } else {
            this.buttonFlag = false;
            this.title = '已报名';
            // 修改奖品剩余份数bug21389
            this.orderShopList.prizeSurplusCnt = this.orderShopList.prizeSurplusCnt - 1;
            OrderSuccessPopService.create(data,prizeRecordDetilClick => {
              OrderSuccessPopService.close();
            });
          }
        });
      } else {
        this.$toast("您已报名参加活动奖励");
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.active-gifts-main {
  width: 6.4rem;
  height: 1.9rem;
  background-color: #ffffff;
  border-radius: .2rem;
  margin: .9rem auto .62rem auto;
  display: flex;
  align-items: center;
}

.active-gifts-left {
  width: 3rem;
  height: 1.74rem;
  padding: 0.1rem;
  margin: 0 0.32rem 0 .1rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

.active-gifts-left img {
  max-width: 100%;
  max-height: 100%;
}

.active-gifts-right {
  width: 3rem;
  height: 1.74rem;
  padding: 0 .1rem;
  position: relative;
}

.active-gifts-right-top {
  // width: 3rem;
  height: 1.2rem;
}

.active-right-count {
  /* width: 1.86rem; */
  font-size: .24rem;
  font-weight: normal;
  font-stretch: normal;
  letter-spacing: 0px;
  color: #333333;
}

.gray100 {
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
}
</style>
