<template>
  <div
    :key="timer"
    class="signPrizeDiv"
    :style="styleDataNew[keyData.signPrizeDiv]"
    ref="signPrize"
    @click.stop="styleClick('click', 'signPrize')"
    @mousemove.stop="styleClick('mousemove', 'signPrize')"
    @mouseout.stop="styleClick('mouseout')"
  >
    <div
      v-if="isWebClick"
      class="signDiv"
      :style="styleDataNew[keyData.signDiv]"
    >
      <img
        :style="styleDataNew.imageSignStyle"
        :src="styleDataNew.imageSignStyle.imageUrl"
        v-if="isShowImg"
      />
      <span v-if="datas.signTitle">{{ datas.signTitle }}</span>
    </div>
    <div
      v-else
      class="signDiv"
      :style="styleDataNew[keyData.signDiv]"
      v-lz-click="'18'"
      @click="operClick(1)"
    >
      <img
        :style="styleDataNew.imageSignStyle"
        :src="styleDataNew.imageSignStyle.imageUrl"
        v-if="isShowImg"
      />
      <span v-if="datas.signTitle">{{ datas.signTitle }}</span>
    </div>

    <div
      class="prizeDiv"
      :style="styleDataNew[keyData.prizeDiv]"
      v-if="isShow && isWebClick"
    >
      <img
        :style="styleDataNew.imagePrizeStyle"
        :src="styleDataNew.imagePrizeStyle.imageUrl"
        v-if="isShowImg2"
      />
      <span v-if="datas.prizeText">{{ datas.prizeText }}</span>
      <template v-else>
        <span v-if="styleDataNew[keyData.prizeDiv]">我的奖品</span>
      </template>
    </div>

    <div
      class="prizeDiv"
      :style="styleDataNew[keyData.prizeDiv]"
      @click="operClick(2)"
      v-lz-click="'19'"
      v-if="isShow && !isWebClick"
    >
      <img
        :style="styleDataNew.imagePrizeStyle"
        :src="styleDataNew.imagePrizeStyle.imageUrl"
        v-if="isShowImg2"
      />
      <span v-if="datas.prizeText">{{ datas.prizeText }}</span>
      <template v-else>
        <span v-if="styleDataNew[keyData.prizeDiv]">我的奖品</span>
      </template>
    </div>

    <div
      class="luckDrawRecord"
      :style="styleDataNew[keyData.luckDrawRecordDiv]"
      @click="operClick(3)"
      v-if="isShowLuckDrawRecord"
    >
      <template> 游戏记录 </template>
    </div>
  </div>
</template>

<script>
import styleJson from "./signPrize.json";
import {
  MyPrizePopComService,
  AcRulePopComService,
  LuckDrawRecordPopComService,
  MyOrderPrizePopComService,
  GiftPopComService,
} from "../../../util/comCreate.js";
export default {
  props: [
    "datas",
    "styleData",
    "keyData",
    "isTemplate",
    "templateData",
    "modifyContent",
    "isWebClick",
  ],
  data() {
    return {
      timer: new Date().getTime(),
      isShowImg: true, // 活动规则是 按钮图片 false 不显示图片
      isShow: true,
      isShowImg2: false,
      isEditAddress: true, //是否可以编辑地址 默认可以编辑地址
      isAlLookAddress: false, //是否可以一直查看地址 默认不可以一直查看
      isShowLuckDrawRecord: false, // 积分猜大小 游戏记录
      styleDataNew: {},
      styleDataOld: {},
      myPrizePopComData: {
        styleData: {},
        datas: {},
        keyData: {
          prizeType: "prizeType",
          prizeUrl: "showImg",
          prizeName: "prizeName",
          prizeDate: "dayTime",
          prizeStatus: "activityType",
          realName: "realName",
          recevierPhone: "mobile",
          logisticsJson: "logisticsJson",
          nickName: "nickName",
        },
      },
      acRulePopComData: {
        styleData: {},
        datas: {},
        keyData: {},
      },
    };
  },

  created() {
    console.log(123333, this.styleData);
    //深拷贝重置需要
    this.styleDataOld = JSON.parse(JSON.stringify(this.styleData));
    //如果父组件传递过来的样式数据则使用样式数据否则使用默认数据
    this.styleDataNew = this.styleData; //父组件传递过来的样式数据
    console.log(this.datas, "this.styleDataNew");
    this.styleDataNew.imageSignStyle.imageUrl = this.styleDataNew.imageSignStyle
      .imageUrl
      ? this.styleDataNew.imageSignStyle.imageUrl
      : this.datas.signIcon;
    this.styleDataNew.imagePrizeStyle.imageUrl = this.styleDataNew
      .imagePrizeStyle.imageUrl
      ? this.styleDataNew.imagePrizeStyle.imageUrl
      : this.datas.prizeIcon;
    this.isShow = this.datas.isShowPrize;
    this.isShowImg = this.datas.isShowImg == false ? false : true;
    this.isShowImg2 = this.datas.isShowImg2 == false ? false : true;
    this.isEditAddress = this.datas.isEditAddress == false ? false : true;
    this.isAlLookAddress = this.datas.isAlLookAddress == true ? true : false;
    this.isShowLuckDrawRecord =
      this.datas.isShowLuckDrawRecord == true ? true : false;
    this.publicData.$on("showMyPrize", (datas) => {
      if (datas == true) {
        //显示我的奖品组件
        this.isShow = true;
        if (this.isTemplate == true) {
          this.initData(this.templateData);
        } else {
          this.initData();
        }
      } else {
        this.isShow = false;
      }
    });
    this.initData();
  },

  methods: {
    //点击可修改位置的方法
    styleClick(type, refName) {
      if (this.isWebClick) {
        //传值给B端
        let byValue = {
          modifyContent: this.modifyContent,
          refName: refName,
          styleData: this.styleDataNew,
          styleDataOld: this.styleDataOld,
          c_this: this,
        };
        this.$emit("opertaionCom", type, byValue);
      }
    },
    initData() {
      var datas = this.templateData;
      if (this.isTemplate == true) {
        this.templateData = datas;
      }
      this.isShow = this.datas.isShowPrize;
      this.timer = new Date().getTime();
      // this.publicData.$emit("isNotyFiceWinnerReorrd",true,this.isTemplate)
    },

    //type 1 签到规则 2 我的奖品 3、积分抽奖记录
    operClick(type) {
      console.log(123333, type);
      if (this.isWebClick) {
        return;
      } else {
        switch (type) {
          case 1:
            // this.$emit('operClick', 1);
            console.log("签到规则1", this.acRulePopComData);
            console.log("签到规则2", this.templateData);
            AcRulePopComService.create(
              this.acRulePopComData,
              this.isTemplate,
              this.templateData,
              (prizeRecordDetilClick) => {
                AcRulePopComService.close();
              }
            );
            break;
          case 2:
            let actStatus = sessionStorage.getItem("actStatus");
            let activityType = sessionStorage.getItem("activityType");

            if (actStatus == 1) {
              this.$toast("活动尚未开始");
              return;
            }
            // this.$emit('operClick', 2);

            this.myPrizePopComData.datas.isEditAddress = this.isEditAddress;
            this.myPrizePopComData.datas.isAlLookAddress = this.isAlLookAddress;
            console.log("我的奖品", this.myPrizePopComData);
            if (activityType == 10030) {
              MyOrderPrizePopComService.create(
                this.myPrizePopComData,
                this.isTemplate,
                (prizeRecordDetilClick) => {
                  MyOrderPrizePopComService.close();
                }
              );
            } else {
              MyPrizePopComService.create(
                this.myPrizePopComData,
                this.isTemplate,
                (prizeRecordDetilClick) => {
                  MyPrizePopComService.close();
                }
              );
            }
            break;
          case 3:
            let actStatus1 = sessionStorage.getItem("actStatus");
            if (actStatus1 == 1) {
              this.$toast("活动尚未开始");
              return;
            }
            LuckDrawRecordPopComService.create(
              this.myPrizePopComData,
              this.isTemplate,
              (prizeRecordDetilClick) => {
                LuckDrawRecordPopComService.close();
              }
            );
            break;
        }
      }
    },
  },
};
</script>

<style lang="scss"></style>
