<template>
  <el-date-picker ref="datePickerRef"  v-model="internalValue" type="datetime" :clearable="false" v-bind="$attrs" format="YYYY/MM/DD HH:mm"
    :disabled-minutes="disabledMinutes" popper-class="popperTime" :visible-change="visibleChange" style="display: none"
    value-format="YYYY-MM-DD HH:mm:ss"></el-date-picker>
</template>

<script setup name="DataTime">
import { ref, nextTick } from 'vue';
import { defineExpose } from 'vue';

const datePickerRef = ref(null); // 获取组件实例

const internalValue = ref(null);

// 暴露给父组件的方法
const openPicker = () => {
  datePickerRef.value.focus(); // 触发 Element 的 focus 方法
};
defineExpose({ openPicker }); // 暴露方法

const disabledMinutes = () => {
  hideInvalidMinutes();
  return Array.from({ length: 60 }, (v, k) => k).filter(minute => ![0, 15, 30, 45].includes(minute));
};

const hideInvalidMinutes = () => {
  nextTick(() => {
    const minuteItems = document.querySelectorAll('.el-time-panel .el-time-spinner__wrapper:nth-child(2n) .el-time-spinner__item');
    minuteItems.forEach(item => {
      const minute = parseInt(item.textContent, 10);
      if (![0, 15, 30, 45].includes(minute)) {
        item.classList.add('is-disabled');
        item.style.display = 'none';
      } else {
        item.classList.remove('is-disabled');
        item.style.display = '';
      }
    });
  });
};

const handleGlobalFocus = (event) => {
  const target = event.target;
  if (target && target.closest('.el-date-range-picker__time-picker-wrap:nth-child(2n) .el-input__inner')) {
    hideInvalidMinutes();
  }
};

const visibleChange = () => {
  document.addEventListener('focus', handleGlobalFocus, true);
};
</script>

<style lang="css">
.popperTime {

  .el-time-panel__content:after,
  .el-time-panel__content:before {
    content: none;
  }

  .el-time-spinner__list:after,
  .el-time-spinner__list:before {
    content: none !important;
  }

  .el-time-spinner__item.is-active:not(.is-disabled) {
    background-color: var(--el-datepicker-active-color);
    color: #fff;
  }
}
</style>