<!--  -->
<template>
  <div class="periodSwitchCop">
    <div class="arrow arrowLeft">
      <van-icon name="arrow-left" :color="isPreClick ? '' : '#e6e6e6'" @click="dateClick"></van-icon>
    </div>
    <div class="timearea">{{ this.formatDate(date) }}</div>
    <div class="arrow arrowRight">
      <van-icon name="arrow" @click="dateClick('add')" :color="count < 0 ? '' : '#e6e6e6'"></van-icon>
    </div>
  </div>
</template>

<script>
import { format } from 'date-fns';
import { addMonths } from 'date-fns';
export default {
  props: {
    dateType: {
      type: String,
      default: 'week'
    }
  },
  data() {
    return {
      date: '',
      detailsDate: '',
      weekDate: '',
      monthDate: '',
      timeStamp: [], //周报的时间一周集合
      count: 0,
      isPreClick: true,
      clickFlag: true, //左右日期按钮是否给予点击
      // 当前月份，从 0（一月）开始
      currentMonth: new Date().getMonth(),
      // 当前年份
      currentYear: new Date().getFullYear()
    };
  },
  watch: {
    dateType() {
      // 切换周月时，count归0,否则月份计算会跟随周切换而不断增加
      this.count = 0;
      this.$nextTick(() => {
        this.initTime(this.dateType);
      });
    }
  },
  created() {
    this.initTime(this.dateType);
  },
  mounted() {},
  methods: {
    // 初始化时间
    initTime(dateType) {
      if (this.detailsDate) {
        this.date = this.detailsDate;
      } else {
        this.date = '';
        this.date = this.$own.getNowFormatDate(0);
      }
      switch (dateType) {
        case 'day':
          if (this.detailsDate) {
            this.date = this.checkDate(dateType, this.detailsDate);
            this.count = this.count - this.clacTimeDif(this.detailsDate);
          } else {
            this.date = this.checkDate(dateType, this.$own.getNowFormatDate(this.count));
          }
          break;
        case 'week':
          this.checkDate(dateType, this.$own.getNowFormatDate(this.count));
          break;
        case 'month':
          this.date = this.checkDate(dateType, this.date);
          break;
      }
      this.$emit('updateDate', this.formatDate(this.date));
    },
    onPrevious() {},
    onNext() {},
    // 转换时间显示
    formatDate(timeString) {
      let date = new Date(timeString);
      let today = new Date();
      today.setHours(0);
      today.setMinutes(0);
      today.setSeconds(0);
      let dayTime = 24 * 60 * 60 * 1000;
      let delta = today - date; // 得到相差的时间 ms
      if (this.dateType === 'month') {
        return timeString;
      } else if (this.dateType === 'day') {
        if (delta > 0) {
          if (delta <= dayTime) {
            return '昨天';
          } else if (delta <= 2 * dayTime) {
            return '前天';
          } else {
            return timeString;
          }
        } else if (-delta < dayTime) {
          return '今天';
        } else {
          return timeString;
        }
      } else {
        return timeString;
      }
    },
    // 判断是今天，昨天还是前天，超过3天则显示时间
    checkDate(type, timeString, weekAction) {
      let date = new Date(timeString);
      let today = new Date();
      today.setHours(0);
      today.setMinutes(0);
      today.setSeconds(0);
      if (type === 'day') {
        return timeString;
      } else if (type === 'week') {
        // todo 返回对应的时间戳
        if (weekAction === 'add') {
          this.nextWeek(date);
        } else if (weekAction === 'pre') {
          this.preWeek(date);
        } else {
          this.currentWeek(date);
        }
      } else if (type === 'month') {
        let getYear = new Date(date).getFullYear();
        let getMonth = new Date(date).getMonth() + 1;
        let monthDate = this.checkMonth(getYear, getMonth);
        return monthDate;
      } else {
        return null;
      }
    },
    // 判断某年某月，并且判断这个月的天数
    checkMonth(year, getMonth) {
      this.xAxisData = [];
      // 获取当前的月份
      let currentMonth = getMonth;
      this.selectMonth = '';
      // 获取当前月的天数
      if (currentMonth + this.count <= 0) {
        this.selectYear = year - 1;
        this.selectMonth = 12 + this.count + 2;
      } else {
        this.selectYear = year;
        this.selectMonth = currentMonth + this.count;
      }
      let monthDays = this.getMonthDays(this.selectYear, this.selectMonth, 0);
      this.xAxisData = [
        `${this.selectMonth.toString().padStart(2, 0)}/01`,
        `${this.selectMonth.toString().padStart(2, 0)}/06`,
        `${this.selectMonth.toString().padStart(2, 0)}/11`,
        `${this.selectMonth.toString().padStart(2, 0)}/16`,
        `${this.selectMonth.toString().padStart(2, 0)}/21`,
        `${this.selectMonth.toString().padStart(2, 0)}/26`,
        `${this.selectMonth.toString().padStart(2, 0)}/${monthDays}`
      ];
      this.monthDate = this.selectYear + '-' + this.selectMonth.toString().padStart(2, 0) + '-01';
      return this.selectYear + '-' + this.selectMonth.toString().padStart(2, 0);
    },
    // 获取年月日时间
    getDates(data) {
      let date = new Date(data);
      let year = date.getFullYear() + '-';
      let month =
        (date.getMonth() + 1 + '-').length === 2 ? '0' + (date.getMonth() + 1) + '-' : date.getMonth() + 1 + '-';
      let day = (date.getDate() + '').length === 1 ? '0' + date.getDate() : date.getDate();
      this.timeStamp.push(year + month + day);
      return year + month + day;
    },
    // 添加时间到一个时间集合里面去
    addDate(date, n) {
      date.setDate(date.getDate() + n);
      return date;
    },
    // 上一周
    preWeek() {
      this.setDate(this.addDate(this.currentFirstDate, -7));
      this.date = this.timeStamp[0] + '~' + this.timeStamp[6];
      this.weekDate = this.timeStamp[0];
    },
    // 下一周
    nextWeek() {
      this.setDate(this.addDate(this.currentFirstDate, 7));
      this.date = this.timeStamp[0] + '~' + this.timeStamp[6];
      this.weekDate = this.timeStamp[0];
    },
    // 这周
    currentWeek(date) {
      this.setDate(this.addDate(new Date(), -1));
      this.date = this.timeStamp[0] + '~' + this.timeStamp[6];
      this.weekDate = new Date(date).Format('yyyy-MM-dd');
    },
    // 上一月
    preMonth() {
      const newMonth = addMonths(new Date(), this.count);
      this.currentMonth = newMonth.getMonth();
      this.currentYear = newMonth.getFullYear();
      this.date = format(newMonth, 'yyyy-MM');
    },
    // 下一月
    nextMonth() {
      const newMonth = addMonths(new Date(), this.count);
      this.currentMonth = newMonth.getMonth();
      this.currentYear = newMonth.getFullYear();
      this.date = format(newMonth, 'yyyy-MM');
    },
    // 这个月
    setDate(date) {
      this.timeStamp = [];
      let week = date.getDay() - 1;
      date = this.addDate(date, week * -1);
      this.currentFirstDate = new Date(date);
      for (let i = 0; i < 7; i++) {
        this.getDates(i === 0 ? date : this.addDate(date, 1)); // 星期一开始
      }
    },
    // 判断一周的开始时间和结束时间
    checkWeekStartAndEndOld(date) {
      // 今天是星期几 备注 星期日是0 需要特殊处理
      let weekDay = new Date(date).getDay() <= 0 ? 7 : new Date(date).getDay();
      // 选中的这个月的日
      let selectDay = this.$moment(date).date();
      let year = new Date(date).getFullYear();
      let month = new Date(date).getMonth() + 1;
      // 选中的日期减去 当前的日期得到时间差，大于0表示没有跨月，否则跨月
      let dateDif = selectDay - weekDay + 1;
      if (dateDif <= 0) {
        let overYear = new Date(date).getFullYear();
        let overMonth = new Date(date).getMonth().toString().padStart(2, 0);
        let overDays = this.getMonthDays(overYear, overMonth, 0).toString.padStart(2, 0);
        let overDateDif = overDays + selectDay - (weekDay - 1);
        // 开始时间
        if (overDays + selectDay + 1 + 6 > overDays) {
          let startDate = overMonth + '-' + overDateDif.toString().padStart(2, 0);
          let endDate = overMonth + 1 + '-' + (overDateDif + 6 - overDays);
          return year + '-' + startDate + '~' + year + '-' + endDate;
        } else {
          let startDate = overMonth + '-' + overDateDif.toString().padStart(2, 0);
          let endDate = overMonth + 1 + '-' + (overDateDif + 6 - overDays);
          return year + '-' + startDate + '~' + year + '-' + endDate;
        }
      } else {
        // 获取这个月的天数
        let days = this.getMonthDays(year, month, 0);
        let startDate = month + '-' + dateDif.toString().padStart(2, 0);
        if (dateDif + 6 > days) {
          let endDate = month + 1 + '/' + (dateDif + 6 - days);
          return year + '-' + startDate + '~' + year + '-' + endDate;
        } else {
          let endDate = month + '-' + (dateDif + 6);
          return year + '-' + startDate + '~' + year + '-' + endDate;
        }
      }
    },
    // 获取某一个月的天数
    getMonthDays(year, month, number) {
      let currentMonth = new Date(year, month, number);
      let days = currentMonth.getDate();
      return days;
    },
    // 点击左右日期
    dateClick(type) {
      if (type == 'add' && this.clickFlag) {
        // 下一个
        if (this.count >= 0) {
          return;
        }
        this.count++;
        if (this.dateType === 'week') {
          // 如果是周报，则不用返回
          this.checkDate(this.dateType, this.$own.getNowFormatDate(this.count), 'add');
        } else {
          this.nextMonth();
          /* this.date = this.checkDate(this.dateType, this.$own.getNowFormatDate(this.count)); */
        }
        this.isPreClick = true;
        this.$emit('updateDate', this.formatDate(this.date));
      } else {
        // 上一个
        if (this.clickFlag && this.isPreClick) {
          this.count--;
          if (this.dateType === 'week') {
            // 如果是周报，则不用返回
            this.checkDate(this.dateType, this.$own.getNowFormatDate(this.count), 'pre');
            this.$emit('updateDate', this.formatDate(this.date));
          } else if (this.dateType === 'month') {
            this.preMonth();
            if (this.count <= -12) {
              // 目前组件 只显示12个月的数据,如有需要可把-12改变
              this.isPreClick = false;
            } else {
              /* this.date = this.checkDate(this.dateType, this.$own.getNowFormatDate(this.count)); */
            }
            this.$emit('updateDate', this.formatDate(this.date));
          } else {
            if (this.count <= -30) {
              /* DialogService.confirm({
                                message: '最多只能查看最近30天的数据',
                                showCancelButton: false
                            }) */
              this.count = -29;
              this.isPreClick = false;
            } else {
              this.date = this.checkDate(this.dateType, this.$own.getNowFormatDate(this.count));
            }
          }
        }
      }
    }
  }
};
</script>
<style scoped lang="scss">
/* @import url(); 引入css类 */
.periodSwitchCop {
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: center;
  padding: 50px 10px;
  padding-bottom: 30px;

  .timearea {
    font-size: 28px;
    justify-self: center;
    color: gray;
  }
  .arrow {
    font-size: 45px;
  }
}
</style>
