<template>
  <div class="date-switch">
    <div class="date-container">
      <div class="date-item" @click="handlePrevClick">
        <i class="el-icon-caret-left"></i>
        <span>{{ prevDate }}</span>
      </div>
      <div class="date-item">
        <!-- <el-date-picker
          v-model="date"
          type="date"
          :editable="false"
          format="yyyy 年 MM 月 dd 日"
          value-format="yyyy-MM-dd"
          style="color: #1890ff; font-size: 24px; width: 280px; font-weight: bold"
          @prev-click="handlePrevClick"
          @next-click="handleNextClick"
        /> -->
        <P style="color: #1890ff; font-size: 24px; width: 280px; font-weight: bold">
          {{ dateTime }}
          <span v-if="dateDay" style="color: #67c23a; padding: 0">({{ dateDay }})</span>
        </P>
      </div>
      <div class="date-item" @click="handleNextClick">
        <span>{{ nextDate }}</span>
        <i class="el-icon-caret-right"></i>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'DateSwitch',
  props: {
    dates: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      date: '',
      dateDay: '',
      dateTime: '',
      prevDate: '',
      nextDate: ''
    }
  },
  created() {
    const date = new Date()
    this.date = new Date(date - 86400000)
    this.dateDay = '昨天'
    this.dateTime = this.formattedDate(this.date)
    this.prevDate = this.formattedDate(new Date(this.date.getTime() - 86400000)) // 加上一天
    this.nextDate = this.formattedDate(new Date(this.date.getTime() + 86400000)) // 加上一天
  },
  methods: {
    handlePrevClick() {
      this.date = new Date(this.date.getTime() - 86400000) // 减去一天
      this.dateTime = this.formattedDate(this.date)
      this.prevDate = this.formattedDate(new Date(this.date.getTime() - 86400000)) // 加上一天
      this.nextDate = this.formattedDate(new Date(this.date.getTime() + 86400000)) // 加上一天
      this.handleCheckdTime()
      const data = this.formattedDateFn(this.date)
      this.$emit('prev-month', data)
    },
    handleNextClick() {
      this.date = new Date(this.date.getTime() + 86400000) // 加上一天
      this.dateTime = this.formattedDate(this.date)
      this.prevDate = this.formattedDate(new Date(this.date.getTime() - 86400000)) // 加上一天
      this.nextDate = this.formattedDate(new Date(this.date.getTime() + 86400000)) // 加上一天
      this.handleCheckdTime()
      const data = this.formattedDateFn(this.date)
      this.$emit('next-month', data)
    },
    handleCheckdTime() {
      // 设置 今天 昨天 前天
      const date = new Date() // 当前时间
      const yesterday = new Date(date.getTime() - 86400000)
      const beforeYesterday = new Date(date.getTime() - (86400000 + 86400000))
      if (this.formattedDateFn(this.date) === this.formattedDateFn(date)) {
        this.dateDay = '今天'
      } else if (this.formattedDateFn(this.date) === this.formattedDateFn(yesterday)) {
        this.dateDay = '昨天'
      } else if (this.formattedDateFn(this.date) === this.formattedDateFn(beforeYesterday)) {
        this.dateDay = '前天'
      } else {
        this.dateDay = ''
      }
    },
    formattedDate(dateString) {
      const date = new Date(dateString)
      const formattedDate = `${date.getFullYear()}年${date.getMonth() + 1}月${date.getDate()}日`
      return formattedDate
    },
    formattedDateFn(dateString) {
      // 创建一个Date对象，将字符串解析为日期和时间
      const date = new Date(dateString)
      // 使用toISOString()方法将Date对象转换为ISO格式的字符串
      const isoString = date.toISOString()
      // 从ISO格式字符串中提取日期部分
      const dateOnly = isoString.substring(0, isoString.indexOf('T'))
      // 将日期格式化为"YYYY-MM-DD"格式
      const formattedDate = dateOnly.replace(/-/g, '-')
      return formattedDate
    }
  }
}
</script>

<style>
.date-switch {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: 10px;
  margin: 10px 0;
  background: #f7f7f7;
}

.date-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
  padding: 0 100px;
}

.date-item {
  text-align: center;
  font-size: 16px;
  cursor: pointer;
  line-height: 45px;
}
.date-item span {
  font-size: 20px;
  line-height: 38px;
  display: inline-block;
  padding: 0 10px;
  text-align: center;
  color: rgba(24, 144, 255, 0.7);
}
.date-item.active {
  font-weight: bold;
}

.date-item i {
  font-size: 20px;
}
.date-item .el-icon-caret-left {
  font-size: 20px;
  font-weight: bold;
  color: #1890ff;
}
.date-item .el-icon-caret-right {
  font-size: 20px;
  font-weight: bold;
  color: #1890ff;
}
.date-item .el-input--medium .el-input__inner {
  border: none !important;
  color: #1890ff;
  background: #f7f7f7;
}
.date-item .el-input__prefix {
  display: none !important;
}
.date-item .el-input__suffix {
  display: none !important;
}
.el-picker-panel.el-date-picker.el-popper {
  display: none !important;
}
</style>
