<template>
  <div class="calendarNewLeijiC" :style="styleData.mainStyle" ref="calendarNewLeiji"
    @click="styleClick('click', 'calendarNewLeiji')" @mousemove="styleClick('mousemove', 'calendarNewLeiji')"
    @mouseout="styleClick('mouseout')">
    <div :style="styleData.signButton">
      <div style="
          display: flex;
          align-items: center;
          height: 100%;
          padding: 0 0.3rem;
        " v-if="todaySign">
        <img style="width: 1.4rem; height: 1.4rem"
          :src="styleData.SignLogoImg?styleData.SignLogoImg.backgroundImage:'//img10.360buyimg.com/imgzone/jfs/t1/223285/7/5167/15890/61b0271cE16dd7be9/b8f98b8011ac676f.png'"
          alt="" />
        <div style="text-align: left; margin-left: 0.26rem">
          <div style="font-size: 0.36rem; color: #f2270c; font-weight: bold"
            :style="{'color' : styleData.SignInfo ? styleData.SignInfo.SignColor : '#f2270c'}">
            今日未签到
          </div>
          <div style="font-size: 0.24rem; color: #8c8c8c; font-weight: 500">
            赶紧点击按钮签到哦~
          </div>
        </div>
        <div v-if="sign" :style="styleData.drawSignBtn" v-lz-click="'13'" @click="signClick">
          <!-- {{ isFocusShop == 1 ? "关注店铺 点我签到" : "点我签到" }} -->
        </div>
        <div v-else :style="styleData.drawSignBtn3"></div>
      </div>
      <div style="
          display: flex;
          align-items: center;
          height: 100%;
          padding: 0 0.3rem;
        " v-if="!todaySign">
        <img style="width: 1.4rem; height: 1.4rem"
          :src="styleData.SignLogoImg?styleData.SignLogoImg.backgroundImage:'//img10.360buyimg.com/imgzone/jfs/t1/223285/7/5167/15890/61b0271cE16dd7be9/b8f98b8011ac676f.png'"
          alt="" />
        <div style="text-align: left; margin-left: 0.26rem">
          <div style="font-size: 0.36rem; color: #8b85ff; font-weight: bold"
            :style="{'color' : styleData.SignInfo ? styleData.SignInfo.SignColor : '#8b85ff'}">
            今日已签到
          </div>
          <div style="font-size: 0.24rem; color: #8c8c8c; font-weight: 500">
            真棒！再接再励哦~
          </div>
        </div>
        <div :style="styleData.drawSignBtn2"></div>
      </div>
    </div>
    <div :style="styleData.drawSignCtn">
      <!-- <div :style="styleData.progressFont">
        连续签
        <span :style="styleData.progressDayFont">{{ continuityNum }}</span>
        天
      </div> -->
      <div :style="styleData.progressFont">
        {{ type == 1 ? "累计签" : "连续签" }}
        <span :style="styleData.progressDayFont">{{ signDays }}</span>
        天
      </div>
      <div :style="styleData.drawSignDate">
        {{ year }}年{{ month }}月{{ day }}日
      </div>
      <div :style="styleData.progressFont">

        <div v-if="!online">已完成签到任务</div>

        <div v-else :style="{'visibility': type == 1 ? 'visible': 'hidden'}">
          再签
          <span :style="styleData.progressDayFont">{{ leftNum }}</span>
          天可抽奖
        </div>

      </div>
    </div>
    <div class="calendar3DrawContentC">
      <div class="draw-plate">
        <div class="draw-sign-week f-cb">
          <span :style="styleData.drawSignWeek">日</span>
          <span :style="styleData.drawSignWeek">一</span>
          <span :style="styleData.drawSignWeek">二</span>
          <span :style="styleData.drawSignWeek">三</span>
          <span :style="styleData.drawSignWeek">四</span>
          <span :style="styleData.drawSignWeek">五</span>
          <span :style="styleData.drawSignWeek">六</span>
        </div>
        <div class="draw-sign-day">
          <span class="jinyongday" v-for="(item, indesx1) in weekDayArr" :key="indesx1 + 31">
            <!-- {{item.day}} -->
          </span>

          <!-- <span v-for="it in dayList" :style="{ isign: it.isSign }"> -->
          <span v-for="(it, i) in dayList" :style="it.isSign ? styleData.isSign : styleData.drawSignDay" :key="i">
            <span :style="it.isCurrentDay && !it.isSign && 'color: #8B85FF'">
              {{ it.day }}
            </span>
            <template v-if="it.isCurrentDay === true">
              <img :style="styleData.isCurDay" :src="styleData.isCurDay.imageUrl" alt="" />
            </template>
          </span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import dateUtil from "../../../util/dateUtil.js";
import apis1 from "../../../util/apis1.js";
import { Toast, Notify } from "vant";
Vue.use(Toast, Notify);
let { signMainRequest, signDayRequest } = apis1;
import {
  SignPromptComService,
  SignPromptComService1,
  PrizeResultPopComService,
} from "../../../util/comCreate.js";
import store from "../../../store/store";

export default {
  props: [
    "isTemplate",
    "datas",
    "styleData",
    "keyData",
    "templateData",
    "modifyContent",
    "isWebClick",
  ],
  components: {},
  data() {
    return {
      continuity: 0, // 连续签到天数
      cumulative: 0, //累计签到天数
      isFocusShop: 0, // 关注店铺
      year: 0, // 日期年
      month: 0, // 日期月
      day: 0, // 日期日
      week: ["日", "一", "二", "三", "四", "五", "六"], // 周固定
      monthList: [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31], // 每个月多少天
      weekDayArr: [], // 上个月日期
      lastWeekDay: 1, // 最后一天星期几
      preMonthSize: 30, // 上个月多少天
      leftNum: 0,
      signDays: 0,
      continuityNum: 0,
      basicData: {
        signDayArr2: [], // 签到时间
      },
      sign: true,
      todaySign: true,
      activityType: "",
      type: "",
      isSign: false, // 是否签到
      dayList: [], // 日历显示日期
      // 奖品弹窗用
      prizeResultData: {
        styleData: {},
        datas: {},
        keyData: {
          prizeUrl: "showImg",
          prizeName: "prizeName",
          prizeType: "prizeType",
          priceInfo: "priceInfo",
          discountType: "discountType",
          couponType: "couponType",
        },
      },
      isNotifyRotary: true, //是否通知抽奖组件刷新页面
      signButton: false, //显示今天是否签到
      styleDataOld: {},
      online: false //是否完成签到任务
    };
  },
  created() {
    this.activityType = sessionStorage.getItem("activityType");
    //深拷贝重置需要
    this.styleDataOld = JSON.parse(JSON.stringify(this.styleData));
    this.publicData.$on("upDataCalendar", () => {
      this.initData();
    });
    this.closeSignPrompt();
  },
  mounted() {
    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);
      }
    },
    //每次先关闭，防止叠加
    closeSignPrompt() {
      SignPromptComService.close();
      SignPromptComService1.close();
    },
    async initData() {
      this.closeSignPrompt();

      this.getCurrentDate();
      this.initDate();
      // 上一个月有多少天
      this.preMonthSize =
        this.month - 1 === 0 ? 31 : this.monthList[this.month - 2];

      if (this.isTemplate == true) {
        this.nowDate = 1613721651000;
        var mainDatasAll = {
          signStartTime: 1611208276000,
          signEndTime: 1613887436000,
          activityEndTime: 1616379869000,
        };
        this.signButton = true;
        //模板预览
        this.signDays = 0;
        this.continuityNum = 0;
        this.leftNum = 0;
        this.basicData.signDayArr2 = [];
        this.signPlus = 1;
        this.hasCumSignDay = 0;
        this.needCumSignDay =
          this.signPlus - (this.hasCumSignDay % this.signPlus);
        this.status = 0;
        this.signStartTime = mainDatasAll.signStartTime;
        this.signEndTime = mainDatasAll.signEndTime;
        this.activityEndTime = mainDatasAll.activityEndTime;
        this.online = true;
        var datasAll = this.templateData;
        if (datasAll) {
          this.isFocusShop = datasAll.signDraw.isFollow;
        }

        //抽奖活动一直显示我的奖品
        // this.isShow = true;
        this.publicData.$emit("showMyPrize", true);
      } else {
        this.nowDate = new Date().getTime();

        await signMainRequest((mainDatas) => {
          this.publicData.$emit("countdownPrize", mainDatas.data);
          //签到时间判断
          let mainDatasAll = mainDatas.data;
          this.signStartTime = mainDatasAll.signStartTime;
          this.signEndTime = mainDatasAll.signEndTime; //1609736010000 1614418856000;
          this.signDays = mainDatasAll.signNum;
          this.leftNum = mainDatasAll.leftNum;
          this.continuityNum = mainDatasAll.continuityNum;
          this.sign = mainDatasAll.sign;
          this.todaySign = mainDatasAll.todaySign;
          this.type = mainDatasAll.type;
          this.online = mainDatasAll.online;
          this.activityEndTime = mainDatasAll.activityEndTime; //活动结束时间
          var timeDiff = parseInt(this.signEndTime - new Date().getTime()) + "";

          if (timeDiff.length < 9 && timeDiff > 0) {
            //定时刷新判断签到时间是否结束
            var a = setInterval(() => {
              this.initData();
              clearInterval(a);
              // 2676401580
            }, parseInt(timeDiff));
          }

          if (!this.isShowCalendar) {
            //有礼活动签到期不显示我的奖品
            console.log("aaaaaaaaaaaaaaaaa");
            this.publicData.$emit("showMyPrize", false);
          } else {
            //抽奖活动一直显示我的奖品
            this.isShow = true;
            this.publicData.$emit("showMyPrize", true);
          }

          if (!this.isShowCalendar) {
            if (this.nowDate > this.activityEndTime) {
              //活动已结束
              console.log("aaaaaaaaaaaaaaaaa11111111111");
              this.isShow = false;
              this.publicData.$emit("showMyPrize", true);
              return;
            }

            if (
              this.nowDate >= this.signStartTime &&
              this.nowDate <= this.signEndTime
            ) {
              //处于签到时间
              this.isShow = true;
            } else if (this.nowDate > this.signEndTime) {
              //签到日期结束 显示领奖状态
              console.log("签到日期结束 显示领奖状态");
              this.publicData.$emit("showPrizePreview", null, true);
              this.isShow = false;
            } else {
              //活动未开始
              console.log("活动未开始");
              this.isShow = true;
            }
          }

          // maxNumber 可以签到几天
          // signNum 已累计签到几天
          // signPlus 签到几天获取抽奖次数
          this.restDrawCount1 = mainDatasAll.drawNumber;
          this.basicData.signDayArr2 = mainDatasAll.signTime;
          this.signPlus = mainDatasAll.signPlus;
          this.hasCumSignDay = mainDatasAll.signNum;
          this.needCumSignDay = mainDatasAll.leftNum; //this.signPlus - (this.hasCumSignDay % this.signPlus);
          this.status = mainDatasAll.status;
          this.maxNumber = mainDatasAll.maxNumber;

          if (this.status == 0) {
            this.isMostDrawCount = false; //已达上限
            this.signButton = false;
          } else {
            //1.先判断是否完成任务-
            //2再判断抽奖次数是否是0，都满足
            this.isMostDrawCount = false; //未达上限
            // 2 / 1  2
            // console.log(this.hasCumSignDay/this.signPlus,'asdsd')
            if (this.hasCumSignDay / this.signPlus >= this.maxNumber) {
              //成任务无法签到
              this.signButton = true;
              // if (this.restDrawCount1 == 0) {
              this.isMostDrawCount = true; //已达上限
              // }
            }
          }
        });
      }
      //   this.createSignPrompt();
      //签到日期
      if (this.basicData.signDayArr2.length > 0) {
        for (var i = 0; i < this.basicData.signDayArr2.length; i++) {
          this.basicData.signDayArr2[i] = dateUtil.dateChangeYYYY(
            this.basicData.signDayArr2[i],
            3
          );
        }
      }
      this.initDate();
    },

    // 获得今天的日期
    getCurrentDate() {
      const date = new Date();
      this.year = date.getFullYear();
      this.month = date.getMonth() + 1;
      this.day = date.getDate();
      this.currentData = this.year + "年" + this.month + "月" + this.day + "号";
    },
    // 根据年月日获得为星期几
    getWeekDay(year, month, day) {
      return new Date(`${year}/${month}/${day}`).getDay();
    },
    //初始化时间
    initDate() {
      console.log(this.basicData.signDayArr2, "初始化时间");
      this.dayList = [];
      if (
        (this.year % 4 === 0 && this.year % 100 !== 0) ||
        this.year % 400 === 0
      ) {
        this.monthList[1] = 29;
      } else {
        this.monthList[1] = 28;
      }
      // 获得指定年月的1号是星期几
      const firstDay = this.getWeekDay(this.year, this.month, 1);

      // 在1号前面填充多少个上个月的日期
      this.weekDay = firstDay === 7 ? 0 : firstDay;

      // 获得最后一天是星期几，往后填充多少个
      var remineDay = this.getWeekDay(
        this.year,
        this.month,
        this.monthList[this.month - 1]
      );
      // console.log(remineDay, '获得最后一天是星期几，往后填充多少个');
      this.lastWeekDay = remineDay === 7 ? 6 : 6 - remineDay;

      var days = this.monthList[this.month - 1];

      //补充上个月的日期
      this.weekDayArr = [];
      for (var i = 0; i < this.weekDay; i++) {
        var obj1 = {
          year: this.year,
          month: this.month,
          day: days - i,
          isSign: false, //是否签到
          isCurrentDay: false, //是否是今天
        };
        this.weekDayArr = this.weekDayArr.concat(obj1);
        console.log(this.weekDayArr, "okkkkkk");
      }

      for (var i = 0; i < days; i++) {
        var obj = {
          year: this.year,
          month: this.month,
          day: i + 1,
          isSign: false, //是否签到
          isCurrentDay: false, //是否是今天
        };
        this.dayList = this.dayList.concat(obj);
        // console.log(this.dayList,9999999999999999999999999999999999999999999999)
        if (this.day == obj.day) {
          this.dayList[i].isCurrentDay = true;
        }
        //已经签到的日期
        //  console.log(this.basicData,"chouren")
        if (this.isWebClick) {
          this.basicData.signDayArr2 = [{ day: 24, month: 8, year: 2021 }];
        }
        for (var j = 0; j < this.basicData.signDayArr2.length; j++) {
          const date = this.basicData.signDayArr2[j];
          //   console.log(date,"danaodai")
          if (date.year == this.year) {
            if (date.month == this.month) {
              if (date.day == i + 1) {
                this.dayList[i].isSign = true;
                this.dayList[i].year = date.year;
                this.dayList[i].month = date.month;
              }
            } else {
              if (date.month == this.month - 1) {
                for (var k = 0; k < this.weekDay; k++) {
                  if (date.day == this.preMonthSize - this.weekDay + k + 1) {
                    debugger;
                    this.weekDayArr[k] = date.day;
                  }
                }
              }
            }
          }
        }
      }
    },
    signClick(itemData) {
      console.log(itemData);
      if (this.isTemplate) {
        this.$toast("活动预览，仅供查看");
        return;
      }
      let actStatus = sessionStorage.getItem("actStatus");
      if (actStatus == 2) {
        Toast("活动已结束");
        return;
      }
      if (actStatus == 1) {
        Toast("活动尚未开始");
        return;
      }
      // if (!this.sign && this.todaySign) {
      //   Toast("签到期已过");
      //   return;
      // }
      //请求签到接口

      //   if (this.signButton == true) {
      //     Toast("签到次数已达上限，无法签到");
      //     return;
      //   }

      if (this.isTemplate == true) {
        var obj = {
          year: itemData.year,
          month: itemData.month,
          day: itemData.day,
        };
        this.basicData.signDayArr2.push(obj);

        this.initDate();

        this.signDays = 1; //连续累计签到1天
        this.continuityNum = 1; //连续累计签到1天
        this.leftNum = 1; //连续累计签到1天
        this.hasCumSignDay = this.hasCumSignDay + 1;
        this.needCumSignDay = this.needCumSignDay - 1;

        SignPromptComService.close();
        SignPromptComService1.close();

        this.createSignPrompt();
        Toast("签到成功");

        var a = setTimeout(() => {
          if (this.isNotifyRotary) {
            this.publicData.$emit("notifyCallBack", "updata");
          }
          clearTimeout(a);
        }, 1000);
      } else {
        //请求接口
        signDayRequest((signDatas) => {
          Toast("签到成功");
          var a = setTimeout(() => {
            if (this.isNotifyRotary) {
              this.publicData.$emit("notifyCallBack", "updata");
            }
            this.initData();
            this.initDate();
          }, 1000);
        });
      }
    },
    //得奖后的处理
    fulfillHandle(prizeData, initDatas) {
      this.prizeResultData.datas = prizeData;
      console.log(this.prizeResultData.datas + "this.prizeResultData.datas");
      PrizeResultPopComService.create(
        this.prizeResultData,
        initDatas,
        (submit) => {
          PrizeResultPopComService.close();

          var a = setTimeout(() => {
            if (this.isNotifyRotary) {
              this.publicData.$emit("notifyCallBack", "updata");
            }
            this.initData();
          }, 1000);
        }
      );
    },
  },
};
</script>

<style lang="scss" scoped>
.calendarNewLeijiC {
  position: relative;
  .hasSign {
    width: 0.64rem;
    height: 0.64rem;
    margin-left: 0.1rem;
  }
  .calendar3DrawContentC {
    text-align: center;
    width: 6.9rem;
    margin: 0 auto;
  }

  .draw-plate {
    display: inline-block;
    position: relative;
    z-index: 2;
  }

  /*签到*/

  // .draw-sign-date {
  //   text-align: center;
  //   color: #fff;
  //   position: absolute;
  //   left: 0;
  //   right: 0;
  //   top: 0.06rem;
  // }
  .draw-sign-count {
    margin: 0 0.5rem;
    height: 0.6rem;
    line-height: 0.6rem;
    font-size: 0.24rem;
    color: #0083ff;
  }

  .draw-sign-week {
    height: 0.8rem;
    line-height: 0.87rem;
    padding: 0 0.09rem;
    color: #026cdb;
  }
  // .draw-sign-week span {
  //   width: 0.93rem;
  //   float: left;
  //   color: #fff;
  // }
  .draw-sign-day {
    line-height: 0.64rem;
    padding: 00.09rem;
    height: 4.6rem;
    overflow-y: scroll;
    width: 100%;
  }
  .draw-sign-day span {
    position: relative;
  }
  .draw-sign-day span.disabled {
    visibility: hidden;
  }

  // .isCurDay {
  //   position: absolute;
  //   left: 0.05rem;
  //   top: 0.5rem;
  //   width: 0.52rem;
  //   height: 0.26rem;
  // }

  .f-fl {
    float: left;
  }
  .f-fr {
    float: right;
  }
  .jinyongday {
    width: 0.64rem;
    height: 0.64rem;
    float: left;
    color: rgb(38, 38, 38);
    border-radius: 100%;
    margin-right: 0.2rem;
    margin-left: 0.1rem;
    margin-bottom: 0.24rem;
    font-size: 0.24rem;
  }
}
</style>
