<template>
<ul class="vue-date">
  <li 
  v-for="item in items" 
  :class="{'vue-invalid':item.enabled==false,'vue-selected':item.date==selectedValue}" 
  @click="setChanged(item)"
  >{{item.text}}
  <span class="vue-selected-suffix" 
  v-if="item.date==selectedValue"
  >{{selectedSuffix}}</span>
  </li>
</ul>
</template>

<script>
import dateUtil from "../../lib/date"   
  
 export default{
    props:['minDate','maxDate','selectedSuffix','selectedValue','month'],
    data(){
       return {
            items:[]
       }
    },
    created(){
      this.createDateItems();
    },
    watch:{
      selectedValue(val){
        this.selectedValue=val;
      }
    },
    methods:{
        setChanged(item){
            let self=this;
            if(item.enabled==false){
                return;
            }
            self.selectedValue=item.date;
            self.$emit("changed",item);
        },
        createDateItems(){
            let self=this;
            let num=35,
             _enabled,
             count=1,
             _oldDate=new Date(self.month.date),
             _date=new Date(_oldDate.setDate(count)),
             weekday=self.getDay(_date),
             _month=self.getMonth(_oldDate);
             for(let i=0;i<num;i++){
                weekday=self.getDay(_date);
                if(i<7&&i<weekday){
                    self.items.$set(i,{
                        enabled:false,
                        date:"",
                        text:""
                    }); 
                    continue;
                }
                _date.setDate(count);
                if(self.isCurrentMonth(_date,_oldDate)){
                    if(self.compareDate(_date,self.minDate)<0){
                        _enabled=false;
                    }
                    else if(self.compareDate(_date,self.maxDate)>0){
                        _enabled=false;
                    }
                    else{
                        _enabled=true;
                    }
                    self.items.$set(i,{
                        enabled:_enabled,
                        date:dateUtil.format(_date,"yyyy-mm-dd"),
                        text:_date.getDate()
                    }); 
                }
                
                count++;
             }
        },
        getYear(date){
            return date.getFullYear();
        },
        getDate(date,i){
            return date.getDate(i);
        },
        getDay(date){
            return date.getDay();
        },
        getMonth(date){
            return date.getMonth()+1;
        },
        isCurrentMonth(date,oldDate){
          let self=this;
           let y1=self.getYear(date),
           y2=self.getYear(oldDate),
           m1=self.getMonth(date),
           m2=self.getMonth(oldDate);
           if(y1==y2){
              return m1>m2?false:true;
           } 
           return y1-y2>0?false:true;
        },
        compareDate(a,b){
            let start=new Date(a),end=new Date(b);
            start.setHours(0);
            start.setMinutes(0);
            start.setSeconds(0);
            end.setHours(0);
            end.setMinutes(0);
            end.setSeconds(0);
            return start.getTime()-end.getTime();
        }
    }
}
</script>