<template>
  <div class="page_mySchedule">
    <div class="operateTitle">
      <div class="operatePrevious" @click="lastclick">&lt;上一周({{ weekNum - 1 }})</div>
      <div class="operateTime">{{ weekDayArr[0] }}-{{ weekDayArr[6] }}({{ weekNum }})</div>
      <div class="operateNext" @click="nextclick">下一周({{ weekNum + 1 }})&gt;</div>
    </div>
    <div style="padding:0 0.625rem;" v-if='tableData.length > 0'>
      <table class='myScheduleTable'>
        <tr v-for="(item,index) in tableData" :key="index">
          <td style="width:30%">{{item.schedule_week}}</td>
          <td style="width:70%">{{item.class_name}}</td>
        </tr>
      </table>
    </div>
    <div class='noData' v-else>
      <img src="../../assets/images/none.png" alt />
    </div>
  </div>
</template>

<script>
  import {getMySchedule} from '@/api/staff_schedule'
  export default {
    data () {
      return {
        weekNum: '',
        weekDayArr: [],
        todayDate: '',
        clen: 7,
        nowYear: new Date().getFullYear(),
        tableData: []
      }
    },
    created () {
      let year = new Date().getFullYear()
      let month = new Date().getMonth() + 1
      let date = new Date().getDate()
      this.weekNum = this.getYearWeek(year, month, date)

      this.todayDate = this.formatDate(new Date())
      this.setDate(new Date())

      // 获取我的排班
      this.getlist()
    },
    methods: {
      formatDate (date) {
        var year = date.getFullYear() + '.'
        var month = (date.getMonth() + 1) + '.'
        var day = date.getDate()
        return year + month + day
      },
      addDate (date, n) {
        date.setDate(date.getDate() + n)
        return date
      },
      //
      setDate (date) {
        var week = date.getDay() - 1
        date = this.addDate(date, week * -1)
        this.currentFirstDate = new Date(date)
        this.currentDate = new Date(date)
        for (var i = 0; i < this.clen; i++) {
          this.weekDayArr.push(this.formatDate(i == 0 ? date : this.addDate(date, 1)))
        }
      },
      // 上一周
      lastclick () {
        this.weekDayArr = []
        this.setDate(this.addDate(this.currentFirstDate, -7))
        if (this.weekNum == 1) {
          let year = this.nowYear - 1
          let month = 12
          let date = 31
          this.weekNum = this.getYearWeek(year, month, date)
          this.nowYear = this.nowYear - 1
        }
        this.weekNum = this.weekNum - 1

        this.getlist()
      },
      // 下一周
      nextclick () {
        this.weekDayArr = []
        this.setDate(this.addDate(this.currentFirstDate, 7))
        this.weekNum = this.weekNum + 1
        if (this.weekNum == 53) {
          let year = this.nowYear + 1
          let month = 1
          let date = 1
          this.weekNum = this.getYearWeek(year, month, date)
          this.nowYear = this.nowYear + 1
        }
        this.getlist()
      },

      getYearWeek (year, month, date) {
        /*
                          dateNow是当前日期
                          dateFirst是当年第一天
                          dataNumber是当前日期是今年第多少天
                          用dataNumber + 当前年的第一天的周差距的和在除以7就是本年第几周
                      */
        let dateNow = new Date(year, parseInt(month) - 1, date)
        let dateFirst = new Date(year, 0, 1)
        let dataNumber = Math.round((dateNow.valueOf() - dateFirst.valueOf()) / 86400000)
        return Math.ceil((dataNumber + ((dateFirst.getDay() + 1) - 1)) / 7)
      },
      getTimestamp (time) { // 把时间日期转成时间戳
        return (new Date(time)).getTime() / 1000
      },
      getlist () {
        var creator = this.$store.getters.user.admin.id
        const params = {
          start_time: this.getTimestamp(this.weekDayArr[0]),
          end_time: this.getTimestamp(this.weekDayArr[6]),
          creator: creator
        }
        getMySchedule(params).then(response => {
          if (response.data.state == 1) {
            var schedule = response.data.data.schedule
            for (let i = 0; i < schedule.length; i++) {
              if (schedule[i].schedule_week == 0) {
                schedule[i].schedule_week = '周日'
              }
              if (schedule[i].schedule_week == 1) {
                schedule[i].schedule_week = '周一'
              }
              if (schedule[i].schedule_week == 2) {
                schedule[i].schedule_week = '周二'
              }
              if (schedule[i].schedule_week == 3) {
                schedule[i].schedule_week = '周三'
              }
              if (schedule[i].schedule_week == 4) {
                schedule[i].schedule_week = '周四'
              }
              if (schedule[i].schedule_week == 5) {
                schedule[i].schedule_week = '周五'
              }
              if (schedule[i].schedule_week == 6) {
                schedule[i].schedule_week = '周六'
              }
            }
            this.tableData = schedule
            // console.log('schedule', schedule)
          }
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .page_mySchedule{
  .operateTitle{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .625rem;
  .operatePrevious{
    color: #3a8ee6;
  }
  .operateNext{
    color: #3a8ee6;
  }
  .operateTime{
    border: 1px solid #DCDFE6;
    height: 36px;
    line-height: 36px;
    text-align: center;
    padding: 0 0.625rem;
    border-radius: 4px;
    font-size: .75rem;
  }
  }
  .myScheduleTable{
    width: 100%;
    border: 1 solid #000;
    border-collapse: collapse;
  td{
    border: 1px solid #000;
    text-align: center;
    padding: 5px 10px;
  }
  }
  .noData{
  img{
    width: 9.375rem;
    height: 9.375rem;
    margin: 0 auto;
    display: block;
    margin-top: 40%;
  }
  }
  }

</style>
