<template>
  <div class="choose-day choose-dates">
    <el-date-picker
        v-model="selectButton"
        type="daterange"
        size="large"
        range-separator="To"
        value-format="YYYY-MM-DD"
        @change="dataSelect"
        popper-class="choose-day-popper"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        :disabled-date="disabledDate"
        @calendar-change="calendarChange"
    />
  </div>
</template>


<script setup>
const selected = ref(false);
const selectDate = ref();
const selectButton = ref();
const emit = defineEmits(["update:modelValue", "select"]);
const calendarChange = (time) => {
  let startTime
  if (time[0] != null && time[1] == null) {
    startTime = time[0].getTime();
    selectDate.value = startTime;
    selected.value = true
  }
}

const disabledDate = (date) => {
  if (!selected.value) {
    let currDate = new Date();
    currDate.setFullYear(currDate.getFullYear() - 1);
    return date.getTime() > Date.now() || date.getTime() < currDate.getTime();
  } else {
    let currTime = selectDate.value;
    let startTime = currTime - (24 * 4 * 60 * 60 * 1000);
    let endTime = currTime + (24 * 4 * 60 * 60 * 1000);
    let nowTime = Date.now();
    endTime = endTime > nowTime ? nowTime : endTime;
    let time = date.getTime();
    return !(time >= startTime && time <= endTime);
  }
}

const dataSelect = (val) => {
  if (val !== null) {
    selected.value = false
    emit("select", val);
  } else {
    emit("select", false);
  }
  emit("update:modelValue", 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-range-picker__header, .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;
      }

      > div:last-child {
        font-size: 20px;
        color: #f5f5f5;
      }
    }

    .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;
          }
        }

        .today.disabled {
          .el-date-table-cell__text {
            font-size: 19px;
          }
        }

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

        }

        .available.in-range {
          .el-date-table-cell {
            background-color: #264A78;

            .el-date-table-cell__text {
              background-color: transparent;
            }
          }
        }

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

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

