<template>
    <div ref="calendarCenter" class="calendarCenter">

      <div class="box cWeek">
        <div class="box_f1 cDate" v-for="jct in 7" v-html="getFirstName(parseInt(jct)-1)"></div>
      </div>
      <div ref="monthCenter" class="monthCenter">

        <div ref="monthDiv_0" class="monthDiv monthDiv_0">
          <d-calendarPage :weekfirst="weekfirst" :datestr="dates[0]" @dateClick="dateClick"></d-calendarPage>
        </div>
        <div ref="monthDiv_1" class="monthDiv monthDiv_1">
          <d-calendarPage :weekfirst="weekfirst" :datestr="dates[1]" @dateClick="dateClick"></d-calendarPage>
        </div>
        <div ref="monthDiv_2" class="monthDiv monthDiv_2">
          <d-calendarPage :weekfirst="weekfirst" :datestr="dates[2]" @dateClick="dateClick"></d-calendarPage>
        </div>

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

<script>
    import '../../lib/index.css'
    import DCalendarPage from './DCalendarPage.vue'
    export default {
        name: 'd-calendar',
        mounted() {
            if(this.weekfirst==undefined)this.weekfirst = 1;
            if(this.datestr!=undefined) {
              this._datestr = this.datestr
            }
            let arr = this.init();
            this.dates = arr;
            //console.log(arr)
            this.$nextTick(()=>{
              let w = this.$refs["calendarCenter"].clientWidth;
              let _arr = this.getMarr(),bol = false;
              this.$touch(this.$refs["monthCenter"], obj=> {
                bol = false;
                for(let i = 0; i < _arr.length; i++) {
                  _arr[i].dom.className = _arr[i].dom.className.replace("monthDiv_t", "")
                }
              },obj=> {
                if(Math.abs(obj.xc)>5) bol = true;
                if(bol) {
                  _arr[(this.center-1<0)?2:this.center-1].dom.style.left = (obj.xc-w)+"px"
                  _arr[this.center].dom.style.left = obj.xc+"px"
                  _arr[(this.center+1>2)?0:this.center+1].dom.style.left = (obj.xc+w)+"px"
                }
              },obj=> {
                if(bol) {
                  bol = false;
                  _arr[0].dom.style.left = null
                  _arr[1].dom.style.left = null
                  _arr[2].dom.style.left = null
                  let c = "", l = "", r = ""
                  if(obj.xc > 0) {
                    //right
                    c = (this.center-1<0)?2:this.center-1
                    r = this.center
                    l = (this.center+1>2)?0:this.center+1

                    _arr[l].dom.className = "monthDiv monthDiv_0"
                    _arr[r].dom.className = "monthDiv monthDiv_t monthDiv_2"
                  }else {
                    //left
                    c = (this.center+1>2)?0:this.center+1
                    l = this.center
                    r = (this.center-1<0)?2:this.center-1

                    _arr[l].dom.className = "monthDiv monthDiv_t monthDiv_0"
                    _arr[r].dom.className = "monthDiv monthDiv_2"
                  }
                  _arr[c].dom.className = "monthDiv monthDiv_t monthDiv_1"
                  //_arr[l].dom.className = "monthDiv monthDiv_t monthDiv_0"
                  //_arr[r].dom.className = "monthDiv monthDiv_t monthDiv_2"
                  this.center = c
                  this._datestr = this.dates[this.center]
                  //console.log(this._datestr)
                  let narr = this.init();
                  this.$set(this.dates, l, narr[0])
                  this.$set(this.dates, r, narr[2])
                  this.changeback()
                }

              })
            })
        },
        props: ["weekfirst", "datestr"],
        data() {
            return {
              date: new Date(),
              dates: [],
              center: 1,
              _datestr: "",
              dayname: ["<span style='color: red'>日</span>","一","二","三","四","五","<span style='color: red'>六</span>"]
            }
        },
        components: {DCalendarPage},
        methods: {
          init() {
            this.date = new Date()
            if(this._datestr)this.date = new Date(this._datestr);
            let y = this.date.getFullYear(), m = this.date.getMonth()+1, d = this.date.getDate()
            let arr = [
              y+"-"+(m-1)+"-1",
              y+"-"+m+"-"+d,
              y+"-"+(m+1)+"-1"
            ];
            if(m==1) {
              m = 12;
              y--;
              arr[0] = y+"-"+ m +"-1"
            }else if(m==12) {
              m = 1;
              y++
              arr[2] = y+"-"+ m +"-1"
            }
            return arr
          },
          getFirstName(i) {
            let n = i + this.weekfirst;
            if(n>6) n-=7;
            return this.dayname[n]
          },
          dateClick(obj) {
            if(obj.date) {
              alert(obj.date)
            }
          },
          getMarr() {
            let arr = []
            let n = this.center-1;
            if(n<0)n=2
            arr[0] = {
              dom: this.$refs["monthDiv_"+n],
              index: 0
            }
            arr[1] = {
              dom: this.$refs["monthDiv_"+this.center],
              index: 1
            }
            n = this.center+1;
            if(n>2)n=0
            arr[2] = {
              dom: this.$refs["monthDiv_"+n],
              index: 2
            }
            return arr
          },
          change(str) {
            this.center = 1
            let arr = this.getMarr()
            arr[0].dom.className = "monthDiv monthDiv_0"
            arr[1].dom.className = "monthDiv monthDiv_1"
            arr[2].dom.className = "monthDiv monthDiv_2"
            this._datestr = str
            this.dates = this.init();
            this.changeback()
          },
          changeback() {
            this.$emit("changeback", this._datestr)
          }
        }

    }
</script>

<style scoped>

  .calendarCenter {
    width: 100%;
    height: auto;
    background-color: #fff;
  }
  .cWeek {
    width: 100%;
    text-align: center;
  }
  .cDate {
    box-sizing: border-box;
  }
  .monthCenter {
    width: 100%;
    height: 300px;
    overflow: hidden;
    box-sizing: border-box;
    position: relative;
  }
  .monthDiv {
    width: 100%;
    height: auto;
    position: absolute;
    top: 0;
  }
  .monthDiv_t {
    transition: left .5s;
    -webkit-transition: left .5s;
  }
  .monthDivLeft, .monthDiv_0 {
    left: -100%;
    z-index: 1;
  }
  monthDivCenter, .monthDiv_1 {
    left: 0;
    z-index: 3;
  }
  .monthDivRight, .monthDiv_2 {
    left: 100%;
    z-index: 1;
  }
</style>
