<template>
  <div class="calender">
    <div class="top">
      <div class="top_date">
        <div>
          {{new Date().getDate()}}
        </div>
        <div>
          星期{{week[new Date().getDay()]}}
        </div>
      </div>
      <div class="btn_wrap">
        <ul>
          <li @click="handleShowNextMonth">
            下个月
          </li>
          <li @click="handleShowToday">
            {{year}}年{{month}}月
          </li>
          <li @click="handleShowLastMonth">
            上个月
          </li>
        </ul>
      </div>
    </div>
    <div class="date_wrap">
      <ul class="week">
        <li v-for="(day,d_index) in week" :key="d_index+'d'">{{day}}</li>
      </ul>
      <ul class="day">
        <li v-for="(last,l_index) in days.last_list" :key="l_index+'l'" class="last">
          {{last}}
        </li>
        <li v-for="(when,w_index) in days.when_list" :key="w_index+'w'" :class="{now:nowLi==year.toString()+month.toString()+when}">
          {{when}}
        </li>
        <li v-for="(next,n_index) in days.next_list" :key="n_index+'n'" class="last">
          {{next}}
          <div class="active-time"></div>
        </li>
      </ul>
    </div>
    <div v-if="incident">
      {{incident}}
    </div>
    <Button>+</Button>
  </div>
</template>

<script>
export default {
  name: 'calender',
  data () {
    return {
     year:'',
     month:'',
     days:{},
     nowLi:'',
     week:['日','一','二','三','四','五','六'],
     incident:"代办事项",
     active:[{
       time:'9:00',
       day:'528',
       title:'校长找我'
     },
     {
       time:'10:00',
       day:'529',
       title:'教导主任找我'
     },
     {
       time:'11:00',
       day:'520',
       title:'学生家长找我'
     }]
    }
  },
  methods:{
    //控制当前日期显示特殊样式
    handleShowDateStyle(){
      let now = new Date()
      this.nowLi=now.getFullYear().toString()+(now.getMonth()+1).toString()+now.getDate().toString()
    },
    //得到当前年这个月分有多少天
    getDays(Y,M){
      let day = new Date(Y, M, 0).getDate()
      return day;
    },
    //得到当前年，这个月的一号是周几
    getWeek(Y,M){
        let now = new Date()
        now.setFullYear(this.year)
        now.setMonth(this.month-1)
        now.setDate(1);
        let week = now.getDay();
        return week;
    },
    getaddWeek(Y,M){
        let now = new Date()
        now.setFullYear(this.year)
        now.setMonth(this.month)
        now.setDate(1);
        let week = now.getDay();
        return week;
    },
    pushDays(){
      //将这个月多少天加入数组days
      let when_list=[];
      for(let i = 1; i<=this.getDays(this.year,this.month);i++){
        when_list.push(i)
      }
      //将下个月要显示的天数加入days
      let week_day=1;
      let next_list=[];
      for(let i=this.getaddWeek(this.year,this.month);i<7;i++){
          next_list.push(week_day++)
      }
      //将上个月要显示的天数加入days
      let last_list=[];
      for(let i=0;i<this.getWeek(this.year,this.month);i++){
        var lastMonthDays=this.getDays(this.year,this.month-1)
          last_list.unshift(lastMonthDays-i)
      }
      this.days={last_list,when_list,next_list}
      console.log(this.days)
    },
    getDate(){
            let now = new Date();
            this.year = now.getFullYear();
            this.month = now.getMonth()+1;
            this.pushDays();
            
    },
    handleShowNextMonth(){
       this.days=[];
      if(this.month<12){
        this.month=this.month+1;
         this.pushDays();
      }else{
        this.month= this.month=1;
        this.year=this.year+1;
        this.pushDays();
      }
      
    },
    handleShowToday(){
      this.days=[];
      let now = new Date();
      this.year=now.getFullYear();
      this.month=now.getMonth()+1;
      this.pushDays();
    },
    handleShowLastMonth(){
       this.days=[];
      if(this.month>1){
         this.month=this.month-1;
      this.pushDays();
      }else if( this.year>1970){
        this.month=12;
        this.year=this.year-1;
        this.pushDays();
      }else{
        alert("不能查找更远的日期")
      }
      
    }
  },
  mounted(){
    this.getDate();
    this.handleShowDateStyle();
  }
}
</script>
<style scoped>
.calender{
  width: 600px;
  position: relative;
  margin: 0 auto;
  margin-top: 50px;
  border: 1px solid #ddd;
  padding: 20px;
  color: #333;
}
.top{
  width: 100%;
  position: relative;
  display: flex;
  border-bottom: 1px solid #ddd;
  padding-bottom: 20px;
}
.top_date{
  width: 100px;
  text-align: left;
  line-height: 42px;
}
.btn_wrap{
  flex: 1;
  text-align: right
}
ul{
  list-style: none;
}
.btn_wrap ul{
  display: flex;
  flex-direction: row-reverse
}
.btn_wrap ul li{
  padding: 10px 20px;
  border: 1px solid #ddd;
  font-size: 14px;
  line-height: 20px;
  cursor: pointer;
}
.btn_wrap ul li:hover{
  background: #ddd;
  color:red;
}
.btn_wrap ul li:first-child{
  border-left: none;
}
.btn_wrap ul li:last-child{
  border-right: none;
}
.date_wrap{
  position: relative;
}
.week{
  display: flex;
  flex-direction: row;
  padding: 20px;
  font-size: 16px;
}
.week li{
  text-align: center;
  width: 14.28%;
}
.day{
  display: flex;
  flex-direction: row;
  padding: 20px;
  font-size: 16px;
  flex-wrap: wrap;
}
.day li{
  width: 14.28%;
  padding: 20px;
  text-align: center;
  box-sizing: border-box;
  cursor: pointer;
  position: relative;
  /* border: 1px solid #ddd */
}
.day li:nth-child(n+8){
  border-top:none;
}
.day li:nth-child(n+1){
  border-right: none;
}
/* .day li:nth-child(7n){
  border-right: 1px solid #ddd
} */
.now{
  color: #f2f8fe;
  background:#1989fa;
  border-radius: 50%;
}
.last{
  color: #CBD1DA;
}
.active-time{
  border:6px solid #ff0000;
  border-radius: 50%;
  position: absolute;
  bottom: 4px;
  right: 6px;
}
</style>