<template>
  <el-date-picker size="small" v-model="time" :type="dateType" :value-format="format" :disabled-date="pickerTime" :disabled-hours="pickerHour" :disabled-minutes="pickerMinute" :disabled-seconds="pickerSecond" />
</template>

<script setup>
const props = defineProps({
  type: String,
  valueFormat: String,
  modelValue: String,
  start: String,
  end: String,
})
const emits = defineEmits(["update:modelValue"])

const dateType = ref(props.type || 'date')
const time = ref(props.modelValue && new Date(props.modelValue).getTime() ? props.modelValue : "");
const format = ref(props.valueFormat || (dateType.value == 'date' ? 'YYYY-MM-DD' : 'YYYY-MM-DD HH:mm:ss'));
const startTime = ref(props.start);
const endTime = ref(props.end);

watch(
  () => props.modelValue,
  (val) => {
    time.value = val && new Date(val).getTime() ? val : "";
  }
)

watch(
  () => time.value,
  (val) => {
    emits("update:modelValue", val)
  }
)

watch(() => [props.start, props.end], (val) => {
  if (val) {
    startTime.value = val[0] || "";
    endTime.value = val[1] || "";
  }
})

const pickerTime = (time) => {
  if (startTime.value) {
    let beginDateVal = startTime.value;
    if (beginDateVal) {
      if (new Date(beginDateVal).getTime() == new Date(new Date(beginDateVal).toLocaleDateString()).getTime()) {
        return time.getTime() < new Date(beginDateVal).getTime();
      } else {
        return time.getTime() < new Date(beginDateVal).getTime() - 8.64e7;
      }
    }
  } else if (endTime.value) {
    let endDateVal = endTime.value;
    if (endDateVal) {
      return time.getTime() > new Date(endDateVal).getTime();
    }
  }
}
const pickerHour = () => {
  if (startTime.value) {
    let beginDateVal = startTime.value;
    let endDateVal = time.value;
    if (beginDateVal) {
      // 若为同一天设置禁用
      if (new Date(beginDateVal).toDateString() === new Date(endDateVal).toDateString()) {
        return Array.from({ length: new Date(beginDateVal).getHours() }, (v, i) => i);
      } else {
        return []
      }
    } else {
      return []
    }
  } else if (endTime.value) {
    let beginDateVal = time.value;
    let endDateVal = endTime.value;
    if (beginDateVal) {
      // 若为同一天设置禁用
      if (new Date(beginDateVal).toDateString() === new Date(endDateVal).toDateString()) {
        return Array.from({ length: 24 - new Date(endDateVal).getHours() }, (v, i) => i + 1 + new Date(endDateVal).getHours());
      } else {
        return []
      }
    } else {
      return []
    }
  }
}
const pickerMinute = () => {
  if (startTime.value) {
    let beginDateVal = startTime.value;
    let endDateVal = time.value;
    if (beginDateVal) {
      // 若为同一天同一小时设置禁用
      if (new Date(beginDateVal).toDateString() === new Date(endDateVal).toDateString() && new Date(beginDateVal).getHours() === new Date(endDateVal).getHours()) {
        return Array.from({ length: new Date(beginDateVal).getMinutes() }, (v, i) => i);
      } else {
        return []
      }
    } else {
      return []
    }
  } else if (endTime.value) {
    let beginDateVal = time.value;
    let endDateVal = endTime.value;
    if (beginDateVal) {
      // 若为同一天同一小时设置禁用
      if (new Date(beginDateVal).toDateString() === new Date(endDateVal).toDateString() && new Date(beginDateVal).getHours() === new Date(endDateVal).getHours()) {
        return Array.from({ length: 60 - new Date(endDateVal).getMinutes() }, (v, i) => i + 1 + new Date(endDateVal).getMinutes());
      } else {
        return []
      }
    } else {
      return []
    }
  }
}
const pickerSecond = () => {
  if (startTime.value) {
    let beginDateVal = startTime.value;
    let endDateVal = time.value;
    if (beginDateVal) {
      // 若为同一天同一小时同一分钟设置禁用
      if (new Date(beginDateVal).toDateString() === new Date(endDateVal).toDateString() && new Date(beginDateVal).getHours() === new Date(endDateVal).getHours() && new Date(beginDateVal).getMinutes() === new Date(endDateVal).getMinutes()) {
        return Array.from({ length: new Date(beginDateVal).getSeconds() }, (v, i) => i);
      } else {
        return []
      }
    } else {
      return []
    }
  } else if (endTime.value) {
    let beginDateVal = time.value;
    let endDateVal = endTime.value;
    if (beginDateVal) {
      // 若为同一天同一小时同一分钟设置禁用
      if (new Date(beginDateVal).toDateString() === new Date(endDateVal).toDateString() && new Date(beginDateVal).getHours() === new Date(endDateVal).getHours() && new Date(beginDateVal).getMinutes() === new Date(endDateVal).getMinutes()) {
        return Array.from({ length: 60 - new Date(endDateVal).getSeconds() }, (v, i) => i + 1 + new Date(endDateVal).getSeconds());
      } else {
        return []
      }
    } else {
      return []
    }
  }
}
</script>

<style>
</style>