<template>
  <div
    class="calendar3MainStyleC"
    :style="styleData.mainStyle"
    ref="calendar3"
    @click="styleClick('click', 'calendar3')"
    @mousemove="styleClick('mousemove', 'calendar3')"
    @mouseout="styleClick('mouseout')"
  >
    <div v-if="isWebClick" :style="styleData.signButton">
      <div v-if="signButton">~今日未签到~</div>
      <div :style="styleData.drawSignBtn" v-if="signButton">
        {{ isFocusShop == 1 ? "关注店铺 点我签到" : "点我签到" }}
      </div>
      <div :style="styleData.drawSignBtn1" v-if="!signButton">
        今日已签到
        <img class="hasSign" :src="datas[keyData.signImg]" alt="" />
      </div>
    </div>
    <div v-else :style="styleData.signButton">
      <div v-if="signButton">~今日未签到~</div>
      <div
        :style="styleData.drawSignBtn"
        v-lz-click="'13'"
        @click="signClick"
        v-if="signButton"
      >
        {{ isFocusShop == 1 ? "关注店铺 点我签到" : "点我签到" }}
      </div>
      <div :style="styleData.drawSignBtn1" v-if="!signButton">
        今日已签到
        <img class="hasSign" :src="datas[keyData.signImg]" alt="" />
      </div>
    </div>
    <div :style="styleData.drawSignCtn">
      <div class="draw-sign-count f-cb">
        <div class="f-fl" :style="styleData.progressFont">
          连续签
          <span :style="styleData.progressDayFont">{{ continuity }}</span>
          天
        </div>
        <div class="f-fr" :style="styleData.progressFont">
          累计签
          <span :style="styleData.progressDayFont">{{ cumulative }}</span>
          天
        </div>
      </div>
      <div :style="styleData.drawSignDate">
        {{ year }}年{{ month }}月{{ day }}日
      </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 v-for="(item, indesx1) in weekDayArr" class="disabled"> </span>

          <!-- <span v-for="it in dayList" :style="{ isign: it.isSign }"> -->
          <span
            v-for="it in dayList"
            :style="it.isSign ? styleData.isSign : styleData.drawSignDay"
          >
            {{ it.day }}
            <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 { daySignMainRequest, getDaySignClick, drawPrize, followShop } = 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, // 上个月多少天
      basicData: {
        signDayArr2: [], // 签到时间
      },
      isSign: false, // 是否签到
      dayList: [], // 日历显示日期
      // 奖品弹窗用
      prizeResultData: {
        styleData: {},
        datas: {},
        keyData: {
          prizeUrl: "showImg",
          prizeName: "prizeName",
          prizeType: "prizeType",
          priceInfo: "priceInfo",
          discountType: "discountType",
          couponType: "couponType",
        },
      },
      isNotifyRotary: true, //是否通知抽奖组件刷新页面
      signButton: false, //显示今天是否签到
      styleDataOld: {},
    };
  },
  created() {
    //深拷贝重置需要
    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.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;
        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 daySignMainRequest((mainDatas) => {
          // console.log(mainDatas, 'mainDatas00000000000000000000000');
          //签到时间判断
          let mainDatasAll = mainDatas.data;
          // 连续签到
          this.continuity = mainDatasAll.continuityNum;
          // 累计签到
          this.cumulative = mainDatasAll.signNum;
          // 签到时间
          this.basicData.signDayArr2 = mainDatasAll.signTime;
          this.isFocusShop = mainDatasAll.isFocusShop;
          // 签到按钮显示
          console.log(mainDatasAll.sign + "mainDatasAll.sign");
          this.signButton = mainDatasAll.sign;
        });
      }
      //   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);
      }

      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) {
                    this.weekDayArr[k] = date.day;
                  }
                }
              }
            }
          }
        }
      }
    },
    signClick(itemData) {
      // console.log(this.signChange,'oooooooooooooooooooooooooooo')
      // debugger
      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.isTemplate == true) {
        var obj = {
          year: itemData.year,
          month: itemData.month,
          day: itemData.day,
        };
        this.basicData.signDayArr2.push(obj);

        this.initDate();

        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 {
        const self = this;
        // 关注店铺
        if (this.isFocusShop == 1) {
          followShop((initdatas) => {});
        }
        //请求接口
        getDaySignClick((signDatas) => {
          // Toast('签到成功');
          // 获取奖品信息

          if (signDatas.data) {
            drawPrize((initdatas) => {
              console.log("jinlai", initdatas);
              let prizeList = initdatas.data.prizeInfo;
              if (prizeList.length > 0) {
                this.prizeListData = initdatas.data;
              }

              for (var i = 0; i < self.prizeListData.prizeInfo.length; i++) {
                console.log(signDatas.data.prizeInfoId + "signDatas");
                console.log(
                  self.prizeListData.prizeInfo[i].id + "prizeListData"
                );
                if (
                  signDatas.data.prizeInfoId ==
                  self.prizeListData.prizeInfo[i].id
                ) {
                  this.fulfillHandle(
                    self.prizeListData.prizeInfo[i],
                    signDatas.data
                  );
                }
              }
            });
          } else {
            var a = setTimeout(() => {
              if (this.isNotifyRotary) {
                this.publicData.$emit("notifyCallBack", "updata");
              }
              this.initData();
            }, 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>
.calendar3MainStyleC {
  position: relative;
  .hasSign {
    width: 0.6rem;
    height: 0.6rem;
    margin-left: 0.1rem;
  }
  .calendar3DrawContentC {
    text-align: center;
    width: 6.8rem;
    height: 6.05rem;
    margin: 0 auto;
    margin-top: 0.1rem;
  }

  .draw-plate {
    display: inline-block;
    position: relative;
    height: 6.17rem;
    border-radius: 0 0 10px 10px;
    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: 0.24rem 0.09rem;
  }
  .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;
  }
}
</style>
