<template>
  <div class="choose-day">
    <el-date-picker
        v-model="selectButton"
        type="date"
        placeholder="请选择日期"
        size="large"
        value-format="YYYY-MM-DD"
        @change="dataSelect"
        popper-class="choose-day-popper"
        :disabled-date="disabledDate"
    />
  </div>
</template>

<script setup>
const selectButton = ref();
const emit = defineEmits(["update:modelValue", "select"]);
const disabledDate = (time) => {
  // return time.getTime() > Date.now()//不能选择之后的数据
  let curDate = (new Date()).toString() // 当前时间戳转为字符串
  let curDateYear = (new Date()).getFullYear() // 当前时间的年份
  let oneYearAgoDate = curDate.replace(curDateYear, curDateYear - 1)// 字符串年份替换为一年前
  let oneYear = new Date(oneYearAgoDate).getTime() //一年前字符串转为时间戳
  return time.getTime() > Date.now() || time.getTime() < oneYear;
}
const dataSelect = (val) => {
  emit("update:modelValue", val);
  emit("select", val);
};
const clearData = () => {
  selectButton.value=''
}
defineExpose({
  clearData
})
</script>

<style lang="scss">
.el-picker__popper.el-popper {
  border: 2px solid #0F82AF !important;
}

.choose-day-popper {
  margin-left: 0 !important;
  width: auto !important;

  .el-picker-panel__body {
    background-color: #062247;

    .el-date-picker__header {
      margin: 0;
      height: 40px;
      line-height: 40px;

      .el-picker-panel__icon-btn, .el-date-picker__header-label {
        font-size: 20px;
        color: #FFFFFF;
      }
    }

    .el-picker-panel__content {
      .el-month-table {
        td .cell {
          font-size: 18px;
          color: #FFFFFF;
        }

        td.disabled .cell {
          background-color: transparent;
          color: #a8abb2;
        }

        td.today .cell {
          color: #0BE9FA;
        }
      }

      .el-date-table th {
        color: #FFFFFF;
        font-size: 17px;
      }

      .el-date-table__row {
        .prev-month, .available, .normal, .next-month {
          .el-date-table-cell__text {
            font-size: 18px;
          }
        }

        .available {
          color: #FFFFFF;
          font-weight: bold;
        }

        .available.today {
          .el-date-table-cell__text {
            color: #0BE9FA;
          }
        }

        .disabled {
          .el-date-table-cell {
            background-color: #062247;
          }
        }
      }
    }
  }
}
</style>
