<template>
  <div class="cPageCenter">
    <div class="box cWeek" v-for="list in alldate">
      <div class="box_f1 cDate box box_v" v-for="item in list" @click="dateClick(item)">

        <div class="clickdiv box box_center" v-if="item.click===true">
          <div class="clickdivq"></div>
        </div>

        <div class="clickdiv box box_center" v-if="item.datestr && item.datestr == nowdatestr">
          <div class="clickdivqq"></div>
        </div>

        <div class="valueevent">
          <div class="valuediv" style="color: red" v-if="item.week!=undefined && (item.week === 0 || item.week === 6)">{{item.value}}</div>
          <div class="valuediv" v-else>{{item.value}}</div>
          <div class="eventdiv slh" v-if="item.event!=undefined && item.event!=''"><span class="eventspan">{{item.event}}</span></div>
        </div>

      </div>
    </div>
  </div>
</template>

<script>
    import '../../lib/index.css'
    export default {
        name: 'd-calendarPage',
        mounted() {
          if(!this.weekfirst)this.weekfirst = 1
          let nd = new Date()
          this.nowdatestr = nd.getFullYear() + "-" + (nd.getMonth()+1) +"-" +nd.getDate()
          this.change(this.datestr)
        },
        watch: {
          datestr(curVal,oldVal){
            this.change(this.datestr)
          }
        },
        data() {
            return {
              nowdatestr: "",
              alldate: [],
              date: '', //当天
              clickobj: null,//点击的obj
              daynum: 0, //总天数
              dayfirst: 0, //第一天星期几
              //weekfirst: 1, //星期从第几天开始
            }
        },
        props: ["datestr", "weekfirst"],
        components: {},
        methods: {
          getOneDate(day) {
            let dateStr = this.date.getFullYear()+ "-"+(this.date.getMonth()+1)+"-"+day
            return {
              date: new Date(dateStr),
              dateStr: dateStr
            }
          },
          change(_date) {
            let date = _date?new Date(_date):new Date()
            this.date = date
            this.daynum = new Date(date.getFullYear(), date.getMonth()+1, 0).getDate()
            this.dayfirst = new Date(date.getFullYear(), date.getMonth(), 1).getDay()
            let _arr = new Array(42);
            let n = -1;
            let arrs = [];
            for(let i = 0; i < _arr.length; i++) {
              let y = this.dayfirst - this.weekfirst
              let obj = {
                value: ""
              };
              if(y<0)y+=7
              if((i >= y) && (n < this.daynum-1)){
                n++;
                obj = {
                  value: n+1,
                  week: this.getOneDate(n+1).date.getDay(),
                  date: this.getOneDate(n+1).date,
                  datestr: this.getOneDate(n+1).dateStr,
                  event: "",
                  click: false
                }
              }
              if(!arrs[parseInt(i/7)]) arrs[parseInt(i/7)] = []
              arrs[parseInt(i/7)][parseInt(i%7)] = obj
            }
            this.alldate = arrs
          },
          dateClick(obj) {
            if(obj.date) {
              if(this.clickobj)this.clickobj.click = false;
              obj.click = true;
              this.clickobj = obj;
              this.$emit('dateClick', obj)
            }
          }
        }
    }
</script>

<style scoped>
  .cPageCenter {
    width: 100%;
    height: 300px;
    height: auto;
    background-color: #fff;
  }
  .cWeek {
    width: 100%;
    height: auto;
    text-align: center;
    background-color: #fff;
  }
  .cDate {
    box-sizing: border-box;
    height: 50px;
    position: relative;
    overflow: hidden;
  }
  .valueevent {
    height: 100%;
    width: 100%;
    position: absolute;
    z-index: 2;
    left: 0;
    top: 0;
  }
  .clickdiv {
    height: 30px;
    width: 100%;
    position: absolute;
    z-index: 1;
    left: 0;
    top: 0;
  }
  .clickdivq {
    width: 30px;
    height: 30px;
    border-radius: 30px;
    background-color: #c9e3fc;
  }
  .clickdivqq {
    width: 30px;
    height: 30px;
    border-radius: 30px;
    border: 1px solid #0070f8;
    box-sizing: border-box;
  }
  .valuediv {
    height: 30px;
    line-height: 30px;
  }
  .eventdiv {
    text-align: center;
    height: 20px;
    line-height: 15px;
    width: 100%;
    box-sizing: border-box;
  }
  .eventspan {
    font-size: .5rem;
    background-color: #dee9fb;
    padding: 2px 5px;
    border-radius: 10px;
  }
</style>
