<template>
  <div class="calendarInfo">
    <uni-calendar :insert="true" :selected="selected" :lunar="false" @change="change" @monthSwitch="changeMonth"/>

    <div class="dailyMatters">
      <div>
        <div v-for="(item, index) in list.slice(0,3)" :key="index" :class="{'color1':index%4==0,'color2':index%4==1,'color3':index%4==2,'color4':index%4==3}" class="daily_item">
          <div>{{ item.time }}</div>
          <div>{{ item.info }}</div>
        </div>
      </div>
      <div>
        <div v-for="(item, index) in list" :key="index" 
        :class="{'color1': index % 4 == 0,'color2': index % 4 == 1,'color3': index % 4 == 2,'color4': index % 4 == 3 }"
        class="daily_item">
          <div>{{ item.time }}</div>
          <div>{{ item.info }}</div>
        </div>
      </div>

      <div class="readMore" @click="toGroup">查看更多</div>
    </div>
  </div>
</template>

<script>
import { uniCalendar } from "@dcloudio/uni-ui"
export default {
  data() {
    return {
      date: '',
      selected: [],
      list: [{
        time: '11:00',
        info: '晴风小区志愿者活动'
      }],
      calendarList: {},
      year: '',
      month: '',
      day: '',
      yyyyMM: '',
    }
  },
  components: {
    uniCalendar
  },
  created() {
    this.getNowDay()
    this.getData()
    
  },
  methods: {
    changeMonth(e) {
      if(e.month<=9) {
        this.yyyyMM = e.year + '-' + '0' + e.month
      } else if(e.month > 9) {
        this.yyyyMM = e.year + '-' + e.month
      }
      this.getData()
    },
    change(val) {
      this.date = `${val.year} + '-' + ${val.month} + '-' + ${val.day}`
    },
    getNowDay() {
      const date = new Date()
      this.year = date.getFullYear()
      this.month = date.getMonth() + 1
    },
    toGroup() {
      uni.navigateTo({url: './groupSendResident'})
    },
    getData() {
      this.$http.post(`/app/appmasssendingtask/statisticsCalendar`, null, {
        params: {
          yyyyMM: this.yyyyMM,
        },
      })
      .then((res) => {
        if (res?.data) {
          this.calendarList = res.data;
          let arr = Object.keys(res.data).map(key => (res.data[key]))
          let calList = arr.filter(item=> (item.taskList && item.taskList.length > 0))
          this.selected = calList.map(item=> {
            if(item.day>=1 && item.day<=9) {
              if(this.month>=1 && this.month <=9) {
                return {
                  date: this.year + '-' + '0' + this.month + '-' + '0' + item.day
                }
              } 
            } else if(item.day> 9) {
              if(this.month > 9) {
                return {
                  date: this.year + '-' + this.month + '-' + item.day
                }
              } 
            }
          })
        }
      });
    },
  },
  onShow() {
    document.title = '宣发日历'
  },

}
</script>

<style lang="scss" scoped>
.calendarInfo {
  ::v-deep .uni-calendar-item__weeks-box-circle {
    top: 77%;
    right: 45%;
    border-radius: 12px;
  }
  ::v-deep .uni-calendar__header {
    height: 76px;
    justify-content: space-around;
    border-bottom-style: none;
  }
  ::v-deep .uni-calendar__weeks-day {
    border-bottom-style: none;
  }
  ::v-deep .uni-calendar__weeks-day-text,
  ::v-deep .uni-calendar__header-text,
  ::v-deep .uni-calendar-item__weeks-box-text {
    font-size: 28px;
  }
  ::v-deep .uni-calendar__header-btn {
    width: 16px;
    height: 16px;
    border-left-color: #5297FF;
    border-top-color: #5297FF;
  }
  ::v-deep .uni-calendar__backtoday {
    display: none
  }

  .dailyMatters {
    padding: 30px;
    box-sizing: border-box;
    .daily_item {
      background: #FFF;
      padding: 30px 20px 30px 50px;
      margin-bottom: 30px;
      border-radius: 0px 16px 16px 0px;
      
      div:first-child {
        color: #999999;
        margin-bottom: 20px;
      }
    }
    .color1 {
      border-left: 6px solid #3AA0FF;
    }
    .color2 {
      border-left: 6px solid #50CB74;
    }
    .color3 {
      border-left: 6px solid #9D73D9;
    }
    .color4 {
      border-left: 6px solid #435289;
    }

    .readMore {
      height: 100px;
      line-height: 100px;
      text-align: center;
      color: #3F8DF5;
    }
  }

  

}
</style>