<template>
  <div class="tab" id="calendar">
    <!-- <div @click='initData("2018-01-03")'>点击</div> -->
    <!-- 年份 月份 -->
    <div class="month">
      <!-- <ul> -->
        <!--点击会触发pickpre函数，重新刷新当前日期 @click(vue v-on:click缩写) -->
        <!-- <li class="arrow" @click='pickPre(currentYear,currentMonth)'>❮</li>
        <li class="year-month" @click='pickYear(currentYear,currentMonth)'>
          <span class="choose-year">{{ currentYear }}</span>
          <span class="choose-month">{{ currentMonth }}月</span>
        </li>
        <li class="arrow" @click='pickNext(currentYear,currentMonth)'>❯</li> -->
      <!-- </ul> -->
      <div class="inbk">
        <span class="arrow" @click='pickYPre(currentYear,currentMonth)'>❮</span>
        <span>{{ currentYear }}年</span>
        <span class="arrow" @click='pickYNext(currentYear,currentMonth)'>❯</span>
      </div>
      <div class="inbk">
        <span class="arrow" @click='pickPre(currentYear,currentMonth)'>❮</span>
        <span>{{ currentMonth }}月</span>
        <span class="arrow" @click='pickNext(currentYear,currentMonth)'>❯</span>
      </div>
       <div class="inbk rt">
        <span class="reto" @click='curDate()'>返回今日</span>
      </div>
    </div>
    <!-- 星期 -->
    <ul class="weekdays">
      <li>日</li>
      <li>一</li>
      <li>二</li>
      <li>三</li>
      <li>四</li>
      <li>五</li>
      <li>六</li>
    </ul>
    <!-- 日期 -->
    <ul class="days">
        <!-- 核心 v-for循环 每一次循环用<li>标签创建一天 -->
        <li v-for='(dayobject,i) in days' :key='i + "date"' @click = 'getdate(dayobject.day)'>
          <!--本月-->
          <!--如果不是本月  改变类名加灰色-->
          <span v-if='dayobject.day.getMonth()+1 != currentMonth && dayobject.str !== choseDate' class="other-month tipdiv">
            <span>{{ dayobject.day.getDate() }}</span>
            <div class="tip tpc"  v-if='dates[dayobject.str] != undefined'></div>
          </span>

          <!--如果是本月  还需要判断是不是这一天-->
          <span v-else-if='dayobject.day.getMonth()+1 == currentMonth && dayobject.str == choseDate' class="tipdiv bot">
            <!--今天  同年同月同日-->
            <!-- <span>
              {{ dayobject.day.getDate() }}
            </span> -->
            <span v-if='dayobject.day.getFullYear() == new Date().getFullYear() && dayobject.day.getMonth() == new Date().getMonth() && dayobject.day.getDate() == new Date().getDate()' class="active">{{ dayobject.day.getDate() }}</span>
            <span v-else>
              {{ dayobject.day.getDate() }}
            </span>
            <div class="tip" v-if='dates[dayobject.str] != undefined' :style="{'background-color':dates[dayobject.str]}"></div>
          </span>
          <!--如果是本月  判断是不是这一天-->
          <span v-else class="tipdiv">
            <!--今天  同年同月同日-->
            <span v-if='dayobject.day.getFullYear() == new Date().getFullYear() && dayobject.day.getMonth() == new Date().getMonth() && dayobject.day.getDate() == new Date().getDate()' class="active">{{ dayobject.day.getDate() }}</span>
            <span v-else>
              {{ dayobject.day.getDate() }}
            </span>
            <div class="tip" v-if='dates[dayobject.str] != undefined' :style="{'background-color':dates[dayobject.str]}"></div>
          </span>

        </li>
    </ul>
  </div>
</template>
<script>
/**
 * module:日历-组件(未完成，无项目使用)
 * author:lwt
 */
import quick from '../../utils/quick'
export default {
  name: 'aTemplate',
  components: {
  },
  props: {
    dateColor: Object,
    initdate: String
  },
  data () {
    return {
      // qu: qu,
      currentDay: 1,
      currentMonth: 1,
      currentYear: 2018,
      currentWeek: 1,
      days: [],
      dates: {},
      choseDate: ''
    }
  },
  methods: {
    getdate: function (date) {
      var y = date.getFullYear()
      var d = date.getDate()
      d = d < 10 ? '0' + d : d
      var m = ''
      if (date.getMonth() < 9) {
        m = '0' + (date.getMonth() + 1)
      } else {
        m = date.getMonth() + 1
      }
      var tm = y + '-' + m + '-' + d
      // console.log(tm)
      this.choseDate = tm
      if (this.$attrs.getTime) {
        this.$attrs.getTime(tm)
      }
      // this.initData(tm)
    },
    curDate: function () {
      var d = new Date()
      let durMonDay = quick.getFirstEnd(d.getFullYear(), d.getMonth())
      if (this.$attrs.durMonDay) {
        this.$attrs.durMonDay(durMonDay)
      }
      this.initData()
    },
    initData: function (cur) {
      // var leftcount = 0 // 存放剩余数量
      var date
      if (cur) {
        date = new Date(cur)
      } else {
        var now = new Date()
        // var d = new Date(this.formatDate(now.getFullYear(), now.getMonth(), 1))
        // d.setDate(42)
        date = new Date(this.formatDate(now.getFullYear(), now.getMonth() + 1, 1))
      }
      this.currentDay = date.getDate()
      this.currentYear = date.getFullYear()
      this.currentMonth = date.getMonth() + 1

      this.currentWeek = date.getDay() // 1...6,0
      let durMonDay = quick.getFirstEnd(this.currentYear, date.getMonth())
      if (this.$attrs.durMonDay) {
        this.$attrs.durMonDay(durMonDay)
      }
      // if (this.currentWeek === 0) {
      //   this.currentWeek = 7
      // }
      var str = this.formatDate(this.currentYear, this.currentMonth, this.currentDay)
      this.days.length = 0
      // 今天是周日，放在第一行第7个位置，前面6个
      // 初始化本周
      // for (var i = this.currentWeek; i >= 0; i--) {
      //   var d1 = new Date(str)
      //   d1.setDate(d1.getDate() - i)
      //   var dayobject = {} // 用一个对象包装Date对象  以便为以后预定功能添加属性
      //   dayobject.day = d1
      //   this.days.push(dayobject)// 将日期放入data 中的days数组 供页面渲染使用
      // }
      // 初始化本日之前
      var wk = 0
      var dy = this.currentWeek + 1
      if (this.currentDay > dy) {
        wk = Math.ceil((this.currentDay - dy) / 7)
      }
      for (var i = (wk * 7 + dy - 1); i >= 0; i--) {
        var d1 = new Date(str)
        d1.setDate(d1.getDate() - i)
        var dayobject = {} // 用一个对象包装Date对象  以便为以后预定功能添加属性
        dayobject.day = d1
        dayobject.str = this.formatDate(d1.getFullYear(), d1.getMonth() + 1, d1.getDate())
        this.days.push(dayobject)// 将日期放入data 中的days数组 供页面渲染使用
      }
      // 本日之后
      for (var i2 = 1; i2 < 42 - (wk * 7 + dy - 1); i2++) {
        var d2 = new Date(str)
        d2.setDate(d2.getDate() + i2)
        var dayobject2 = {}
        dayobject2.day = d2
        dayobject2.str = this.formatDate(d2.getFullYear(), d2.getMonth() + 1, d2.getDate())
        this.days.push(dayobject2)
      }
      // 其他周
      // for (var i2 = 1; i2 < 42 - this.currentWeek; i2++) {
      //   var d2 = new Date(str)
      //   d2.setDate(d2.getDate() + i2)
      //   var dayobject2 = {}
      //   dayobject2.day = d2
      //   this.days.push(dayobject2)
      // }
    },
    pickPre: function (year, month) {
      // setDate(0); 上月最后一天
      // setDate(-1); 上月倒数第二天
      // setDate(dx) 参数dx为 上月最后一天的前后dx天
      var d = new Date(this.formatDate(year, month, 1))
      // let mon = d.getMonth() === 0 ? 11 : d.getMonth() - 1
      // let yea = d.getMonth() === 0 ? d.getFullYear() - 1 : d.getFullYear()
      // let durMonDay = quick.getFirstEnd(yea, mon)
      // if (this.$attrs.durMonDay) {
      //   this.$attrs.durMonDay(durMonDay)
      // }
      d.setDate(0)
      this.initData(this.formatDate(d.getFullYear(), d.getMonth() + 1, 1))
    },
    pickYPre: function (year, month) {
      // setDate(0); 上月最后一天
      // setDate(-1); 上月倒数第二天
      // setDate(dx) 参数dx为 上月最后一天的前后dx天
      var d = new Date(this.formatDate(year, month, 1))
      // let durMonDay = quick.getFirstEnd(d.getFullYear() - 1, d.getMonth())
      // if (this.$attrs.durMonDay) {
      //   this.$attrs.durMonDay(durMonDay)
      // }
      // d.setDate(0)
      this.initData(this.formatDate(d.getFullYear() - 1, d.getMonth() + 1, 1))
    },
    pickNext: function (year, month) {
      var d = new Date(this.formatDate(year, month, 1))
      // let mon = d.getMonth() === 11 ? 0 : d.getMonth() + 1
      // let yea = d.getMonth() === 11 ? d.getFullYear() + 1 : d.getFullYear()
      // let durMonDay = quick.getFirstEnd(yea, mon)
      // if (this.$attrs.durMonDay) {
      //   this.$attrs.durMonDay(durMonDay)
      // }
      d.setDate(42)
      this.initData(this.formatDate(d.getFullYear(), d.getMonth() + 1, 1))
    },
    pickYNext: function (year, month) {
      var d = new Date(this.formatDate(year, month, 1))
      // let durMonDay = quick.getFirstEnd(d.getFullYear() + 1, d.getMonth())
      // if (this.$attrs.durMonDay) {
      //   this.$attrs.durMonDay(durMonDay)
      // }
      // d.setDate(42)
      this.initData(this.formatDate(d.getFullYear() + 1, d.getMonth() + 1, 1))
    },
    // 返回 类似 2016-01-02 格式的字符串
    formatDate: function (year, month, day) {
      var y = year
      var m = month
      if (m < 10) m = '0' + m
      var d = day
      if (d < 10) d = '0' + d
      return y + '-' + m + '-' + d
    },
    changeText: function () {
    },
    addIndex: function () {
    },
    dispatchIndex: function () {
    },
    afterEnter: function () {
    },
    slotCreated: function () {
      // console.log('插槽插入成功')
    },
    watchEvent: function () {
    }
  },
  computed: {
  },
  directives: {
  },
  filters: {
  },
  watch: {
    initdate: function (val, oldVal) {
      this.choseDate = val
      this.initData(val)
    },
    dateColor: function (val, oldVal) {
      this.dates = val
    }
  },
  beforeCreate: function () {
    // console.log('实例初始化前调用')
  },
  created: function () {
    let { dateColor, initdate } = this
    this.dates = dateColor
    this.choseDate = initdate
    this.initData(initdate)
    // console.log('实例初始化完成调用')
  },
  beforeMount: function () {
    // console.log('挂载到页面前调用')
  },
  mounted: function () {
    // console.log('挂载到页面完成调用')
  },
  beforeUpdate: function () {
    // console.log('更新前调用')
  },
  updated: function () {
    // console.log('更新完成调用')
  },
  activated: function () {
    // console.log('keep-alive组件激活时调用')
  },
  deactivated: function () {
    // console.log('keep-alive组件停用时调用')
  },
  beforeDestroy: function () {
    // console.log('销毁之间调用')
  },
  destroyed: function () {
    // console.log('实例销毁后调用')
  },
  errorCaptured: function () {
    // console.log('异常发生处理')
  }
}
</script>
<style>
@import './calendar.css';
</style>
