<template>
  <div
    class="repeatBuyPrize"
    :style="styleData.repeatBuyPrizeStyle"
    ref="repeatBuyTop"
    @click="styleClick('click', 'repeatBuyTop')"
    @mousemove="styleClick('mousemove', 'repeatBuyTop')"
    @mouseout="styleClick('mouseout')"
  >
    <div :style="styleData.prizeTips">多奖品时，只可任选其一领取。</div>
    <div class="lz-box" :style="styleData.lzBox">
      <div v-for="item in prizeList" :key="item" style="margin-bottom:0.22rem">
        <div :style="styleData.prizeBox" class="prize-box">
          <div :style="styleData.prizeTitle">
            <div class="prizeTitle">{{ item.prizeName }}</div>
          </div>
          <img :src="item.showImg" alt="" />
          <div class="prize-num" :style="styleData.prizeNumText">
            剩余数量:{{ item.stock }}份
          </div>
        </div>
        <!-- <div
          :style="styleData.repeatBuyPrizeBtn"
          v-if="item.stock != '0' && status != 3 && status != 2"
          @click="getPrize(item)"
        ></div> -->
        <!-- 无参与资格  -->
        <div
          :style="styleData.repeatBuyPrizeBtn6"
          v-if="item.stock != '0' && status == 4"
        >无参与资格</div>
        <!-- 立即领取 -->
         <div
          :style="styleData.repeatBuyPrizeBtn5"
          v-if="item.stock != '0' && status == 0"
          @click="getPrize(item)"
        >立即领奖</div>
         <div
          :style="styleData.repeatBuyPrizeBtn"
          v-if="item.stock != '0' && status == 1"
          @click="getPrize(item)"
        ></div>
        <div
          :style="styleData.repeatBuyPrizeBtn3"
          v-if="(status == 3 || status == 2) && item.drawStatus"
        ></div>
        <div
          :style="styleData.repeatBuyPrizeBtn4"
          v-if="(status == 3 || status == 2) && !item.drawStatus"
        ></div>

        <div
          :style="styleData.repeatBuyPrizeBtn2"
          v-if="item.stock == '0' && status != 3 && status != 2"
        ></div>
      </div>
    </div>
  </div>
</template>

<script>
import apis1 from "../../../util/apis1.js";
import { RepeatPrizeResultPopComService } from "../../../util/hdzxtcomCreate.js";
import {
  RepeatOrderGiftPopComService,
  RepeatOrderGiftPopFailComService
} from "../../../util/comCreate";
let { getbuyAct, getbuyOrder } = apis1;
import dateUtil from "../../../util/dateUtil.js";
export default {
  props: [
    "datas",
    "keyData",
    "styleData",
    "isTemplate",
    "templateData",
    "modifyContent",
    "isWebClick"
  ],
  data() {
    return {
      styleDataOld: {},
      preventClick: false,
      prizeList: [],
      status: 0
    };
  },
  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,
          styleDataOld: this.styleDataOld,
          c_this: this
        };
        this.$emit("opertaionCom", type, byValue);
      }
    },
    initData() {
      console.log(this.isTemplate, "0000");
      if (this.isTemplate) {
        var datasAll = this.templateData;
        if (datasAll) {
          if (datasAll.draw) {
            this.prizeList = datasAll.draw.prizeList;
            this.prizeList.forEach(item => {
              item.stock = item.totalPrizeNum;
            });
          }
        } else {
          this.prizeList = [
            {
              prizeType: "3",
              showImg:
                "//img10.360buyimg.com/imgzone/jfs/t1/217563/36/29810/10142/645c58e2Fed091029/8612de57aebb8804.png",
              prizeNumText: 10,
              stock: "0"
            },
            {
              prizeType: "3",
              showImg:
                "//img10.360buyimg.com/imgzone/jfs/t1/217563/36/29810/10142/645c58e2Fed091029/8612de57aebb8804.png",
              prizeNumText: 100,
              stock: "0"
            },
            {
              prizeType: "3",
              showImg:
                "//img10.360buyimg.com/imgzone/jfs/t1/217563/36/29810/10142/645c58e2Fed091029/8612de57aebb8804.png",
              prizeNumText: 100,
              stock: "0"
            },
            {
              prizeType: "3",
              showImg:
                "//img10.360buyimg.com/imgzone/jfs/t1/217563/36/29810/10142/645c58e2Fed091029/8612de57aebb8804.png",
              prizeNumText: 100,
              stock: "0"
            }
          ];
        }
      } else {
        getbuyAct(initdatas => {
          if (initdatas.data) {
            this.prizeList = initdatas.data.prizeInfos;
            this.status = initdatas.data.status;
            this.prizeList.forEach(item => {
              if (
                initdatas.data.reserveSuccessPrize &&
                item.id == initdatas.data.reserveSuccessPrize.id
              ) {
                item.drawStatus = true;
              }
            });
          }
        });
      }
    },
    getPrize(itemData) {
      let actStatus = sessionStorage.getItem("actStatus");
      if (this.isTemplate) {
        this.$toast("活动预览，仅供查看");
        return;
      }
      if (actStatus == 1) {
        this.$toast("活动尚未开始");
        return;
      } else if (actStatus == 2) {
        this.$toast("活动已结束");
        return;
      }

      // 防连点
      if (this.preventClick) {
        return;
      }
      this.preventClick = true;
      // 未进行复购下单用户，点击好礼位置【未达到领取门槛】按钮， 新写的弹窗
      let params = {
        orderIds: "",
        prizeId: itemData.id
      };
      getbuyOrder(params, data => {
        this.preventClick = false;
        if (data.data.status == 2 || data.data.status == 3) {
          console.log(
            data.data.reserveSuccessPrize,
            "data.data.reserveSuccessPrize"
          );
          RepeatPrizeResultPopComService.create(
            data.data.reserveSuccessPrize,
            data.data,
            this.styleData,
            prizeRecordDetilClick => {
              RepeatPrizeResultPopComService.close();
              this.initData();
            }
          );
        } else if (data.data.status == 1 || data.data.status == 4) {
          let startTime = dateUtil.dateChangeYYYY(
            new Date(data.data.secondBuyStartTime),
            1
          );
          let endTime = dateUtil.dateChangeYYYY(
            new Date(data.data.secondBuyEndTime - 1000),
            1
          );
          RepeatOrderGiftPopFailComService.create(
            startTime,
            endTime,
            data.data,
            prizeRecordDetilClick => {
              RepeatOrderGiftPopFailComService.close();
              // this.initData();
            }
          );
        } else if (data.data.status == 3) {
          this.$toast("已报名");
        } else if (data.data.status == 5) {
          this.$toast("奖品已发完");
          this.initData();
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped="scoped">
.lz-box {
  width: 100%;
  height: 96%;
  display: flex;
  flex-wrap: wrap;
  overflow: auto;
  justify-content: space-between;
  list-style: none;
  .prize-box {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    img {
      width: 1.15rem;
      height: 1.15rem;
    }
    .prize-num {
      position: absolute;
      width: 2rem;
      bottom: 0.3rem;
      left: 50%;
      transform: translateX(-50%);
    }
  }
}
.prizeTitle {
  width: 1.7rem;
  margin: 0 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>
