<template>
  <div class="calen">
    <!-- <el-calendar :range="['2024-03-21', '2024-04-22']">
    </el-calendar> -->
    <div class="calen-list">
      <li v-for="(item,index) in current" :key="index">
        <el-tooltip class="item" effect="dark" :content="item.day" :open-delay="100" placement="top-start">
        <div class="weiqiandao" v-if="item.type == -1">
          <img src="@/assets/home/Icon_xross.png" alt="">
        </div>
        <div class="qiandao" v-if="item.type == 1">
          <img src="@/assets/home/Checkmark.png" alt="">
        </div>
        <div class="weidaoshijian" v-if="item.type == 0">{{ index+1 }}</div>
        <div class="weidaoshijian highlight" v-if="item.type == 2">{{ index+1 }}</div>
        </el-tooltip>
      </li>
    </div>
  </div>
</template>

<script>
import { getToken } from '@/utils/cookies.js'
import { apiCheckin } from '@/utils/webapi.js'
import { formatDate, getDayBegin } from '@/utils/utcdate.util.js'
const ONE_DAY = 24 * 60 * 60 * 1000;

export default {
  props: {
    activityData: Object
  },
  data() {
    return {
      userData: JSON.parse(localStorage.getItem("userData")),
      monthData: [],
      startDay: '',
      endDay: '',
      current: []
    }
  },
  mounted() {
    this.generateMonth()
  },
  methods: {
    // 初始化日历样式
    generateMonth() {
      let beginTime = new Date(this.activityData.startTime)
      let endTime = new Date(this.activityData.endTime)
      let i = 0
      const now = getDayBegin(new Date())
      while(beginTime <= endTime) {
        let current = i * ONE_DAY + this.activityData.startTime
        beginTime = new Date(current)
        if (beginTime > endTime) {
          break
        }
        const day = formatDate(beginTime)
        const type = current < now ? -1 : 0
        this.current.push({day, type, time: current, index: i + 1})
        i++
      }
      this.getCheckInit()
    },

    // 获取签到列表
    async getCheckInit(){
      // let dayTime = Math.round(new Date())
      let token = getToken()
      let datas = []
      // 如果没登录, 就只显示日期
      if (!token) {
        this.current.forEach(item => {
          item.type = 0
        })
        return
      }
      let res = await apiCheckin('all')
      datas = res.data ? res.data : []
      let map = new Map()
      datas.forEach(data => {
        map.set(data.day, data)
      })
      const today = formatDate(new Date())
      for(let i = 0; i < this.current.length; i++) {
        if(map.has(this.current[i].day)) {
          this.current[i].type = 1
        } else if (this.current[i].day === today) {
          this.current[i].type = 2
        }
      }
    },

    // 签到后更新签到状态
    renewCheckInit() {
      this.getCheckInit()
    },

    getArrDifSameValue(arr1,arr2){
      var result = [];
      for(var i = 0; i < arr2.length; i++){
        var obj = arr2[i];
        var id = obj.day;
        var isExist = false;
        for(var j = 0; j < arr1.length; j++){
          var aj = arr1[j];
          var n = aj.time;
          if(n == id){
            isExist = true;
            break;
          }
        }
        if(isExist){
          result.push(obj);
        }
      }
      return result;
    },

  },
}
</script>

<style lang="scss" scoped>
.calen {
  width: 360px;
  margin: 0 auto;
  margin-top: 10px;
  .calen-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    li {
      flex: 1;
      /*
        // 间隙为5px
      */
      margin: 0 5px 10px 0;
      font-size: 12px;
      /*
        // 这里的10px = (分布个数3-1)*间隙5px, 可以根据实际的分布个数和间隙区调整
      */
      width: calc((100% - 30px) /7);
      /*
        // 加入这两个后每个item的宽度就生效了
      */
      min-width: calc((100% - 30px) / 7);
      /*
        // 加入这两个后每个item的宽度就生效了
      */
      max-width: calc((100% - 30px) / 7);
      /*
        // 去除第3n个的margin-right
      */
      &:nth-child(7n) { 
        margin-right: 0;
      }
      div {
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        img {
          width: 10px;
          height: 10px;
        }
      }
      .weiqiandao {
        background: url('@/assets/home/Missed.png') no-repeat;
        background-size: 100% 100%;
      }
      .qiandao {
        background: url('@/assets/home/Done.png') no-repeat;
        background-size: 100% 100%;
      }
      .weidaoshijian {
        background: url('@/assets/home/Laag 5.png') no-repeat;
        background-size: 100% 100%;
      }
    }
  }
  ::v-deep .el-calendar {
    .el-calendar__header {
      display: none;
    }
  }
  .highlight {
    box-shadow: 0 0 10px #ffc107;
    border-radius: 13px;
  }
}
</style>