<template>
  <div class="date">
    <!-- 年份 月份 -->
    <div class="month">
      <Icon color="#ff9900" type="ios-arrow-back" size="30" @click="weekPre"/>
        <span>{{ behindDate }}</span>至<span>{{ frontDate }}</span>
      <Icon color="#ff9900" type="ios-arrow-forward" size="30" @click="weekNext"/>
    </div>
    <!-- 星期 -->
    <Row class="week">
      <div class="float-div" v-for="week in weeks" :key="week">{{week}}</div>
    </Row>
    <!-- 日期 -->
    <Row class="days">
      <div @click="pick(day)" v-for="(day, index) in days" :key="index">
        <div class="days-border">
            <!--其他-->
            <div v-if="day.getMonth()+1 != currentMonth" class="other-month">
              {{ day.getDate() }}
            </div>
            <!--今天-->
            <div v-else>
              <div v-if="day.getFullYear() == new Date().getFullYear() && day.getMonth() == new Date().getMonth() && day.getDate() == new Date().getDate()" class="active">
                {{ day.getDate() }}
              </div>
              <!--本月-->
              <div v-else>
                {{ day.getDate() }}
              </div>
            </div>
            <div style="margin-left: 100px">
              <Badge :count="1000" overflow-count="999">
                <a href="#" class="demo-badge"></a>
              </Badge>
            </div>
        </div>
      </div>
    </Row>
  </div>
</template>
<script>
// https://www.cnblogs.com/whitewen/articles/9509845.html
export default {
  name: 'week-date',
  data () {
    return {
      currentYear: 1970,
      currentMonth: 1,
      currentDay: 1,
      currentWeek: 1,
      days: [],
      weeks: ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期日'],
      behindDate: '',
      frontDate: ''
    }
  },
  mounted () {

  },
  created () {
    this.initData(null)
  },

  methods: {
    formatDate (year, month, day) {
      const y = year
      let m = month
      if (m < 10) m = `0${m}`
      let d = day
      if (d < 10) d = `0${d}`
      return `${y}-${m}-${d}`
    },
    initData (cur) {
      let date = ''
      if (cur) {
        date = new Date(cur)
      } else {
        date = new Date()
      }
      // 今日日期 几号
      this.currentDay = date.getDate()
      // 当前年份
      this.currentYear = date.getFullYear()
      // 当前月份
      this.currentMonth = date.getMonth() + 1
      this.currentWeek = date.getDay()
      // 1...6,0  // 星期几
      if (this.currentWeek === 0) {
        this.currentWeek = 7
      }
      const str = this.formatDate(this.currentYear, this.currentMonth, this.currentDay)// 今日日期 年-月-日
      this.days.length = 0
      // 今天是周日，放在第一行第7个位置，前面6个 这里默认显示一周，如果需要显示一个月，则第二个循环为 i<= 35- this.currentWeek
      /* eslint-disabled */
      for (let i = this.currentWeek - 1; i >= 0; i -= 1) {
        const d = new Date(str)
        d.setDate(d.getDate() - i)
        this.days.push(d)
      }
      for (let i = 1; i <= 7 - this.currentWeek; i += 1) {
        const d = new Date(str)
        d.setDate(d.getDate() + i)
        this.days.push(d)
      }
      this.behindDate = this.formatDate(this.days[0].getFullYear(), this.days[0].getMonth() + 1, this.days[0].getDate())
      this.frontDate = this.formatDate(this.days[6].getFullYear(), this.days[6].getMonth() + 1, this.days[6].getDate())
    },
    // 上个星期
    weekPre () {
      // 如果当期日期是7号或者小于7号
      const d = this.days[0]
      d.setDate(d.getDate() - 7)
      this.initData(d)
    },
    // 下个星期
    weekNext () {
      // 如果当期日期是7号或者小于7号
      const d = this.days[6]
      d.setDate(d.getDate() + 7)
      this.initData(d)
    },
    // 上一個月  传入当前年份和月份
    pickPre (year, month) {
      const d = new Date(this.formatDate(year, month, 1))
      d.setDate(0)
      this.initData(this.formatDate(d.getFullYear(), d.getMonth() + 1, 1))
    },
    // 下一個月  传入当前年份和月份
    pickNext (year, month) {
      const d = new Date(this.formatDate(year, month, 1))
      d.setDate(35)
      this.initData(this.formatDate(d.getFullYear(), d.getMonth() + 1, 1))
    },
    // 当前选择日期
    pick (date) {
      alert(this.formatDate(date.getFullYear(), date.getMonth() + 1, date.getDate()))
    }
  }
}
</script>
<style lang="scss">
  .date {
    height: 180px;
    color: black;
    .ivu-icon {
      cursor:pointer;
    }
    .month {
      font-size: 28px;
      text-align: center;
      margin-top: 20px;
      background: white;
    }
    .week {
      font-size: 28px;
      line-height: 50px;
      background: #c0c4cc;
      text-align: center;
      color: #333;
      margin-right: -2px;
    }
    .float-div {
      width: 14.28%;
      height: 50px;
      float: left;
    }
    .days-border {
      border: 2px solid #c0c4d6;
      height: 140px;
      margin-right: -2px;
    }
    .days {
      display: flex;
      div {
        flex: 1;
        font-size: 30px;
        text-align: left;
        margin-top: 0px;
        line-height: 60px;
        .active {
          display: inline-block;
          width: 60px;
          height: 60px;
          color: #fff;
          border-radius: 50%;
          background-color: #fa6854;
          text-align: center;
        }
        .other-month {
          color: #e4393c;
        }
      }
    }
    .demo-badge {
      text-align: center;
      line-height: 120px;
    }
  }
</style>