<template>
  <div class="block">
    <el-date-picker
      v-model="selectedDateRange"
      type="datetimerange"
      :shortcuts="shortcuts"
      range-separator="至"
      start-placeholder="开始日期"
      end-placeholder="结束日期"
      @change="getManholeAllDataPicker"
    />
  </div>
</template>

<script setup>
import { ref, computed } from "vue";
const emit = defineEmits();
const selectedDateRange = ref();
const shortcuts = [
  {
    text: "过去一周",
    value: () => {
      const end = new Date();
      const start = new Date();
      start.setDate(start.getDate() - 7);
      return [start, end];
    },
  },
  {
    text: "过去一个月",
    value: () => {
      const end = new Date();
      const start = new Date();
      start.setMonth(start.getMonth() - 1);
      return [start, end];
    },
  },
  {
    text: "过去三个月",
    value: () => {
      const end = new Date();
      const start = new Date();
      start.setMonth(start.getMonth() - 3);
      return [start, end];
    },
  },
];
function getManholeAllDataPicker(val) {
  const formatDate = (date) => {
    if (!date) return "";
    const d = new Date(date);
    const year = d.getFullYear();
    const month = String(d.getMonth() + 1).padStart(2, "0");
    const day = String(d.getDate()).padStart(2, "0");
    const hours = String(d.getHours()).padStart(2, "0");
    const minutes = String(d.getMinutes()).padStart(2, "0");
    const seconds = String(d.getSeconds()).padStart(2, "0");
    return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
  };
  const formattedDateRange = computed(() => {
    if (!selectedDateRange.value || selectedDateRange.value.length !== 2) return null;
    return {
      start: formatDate(selectedDateRange.value[0]),
      end: formatDate(selectedDateRange.value[1]),
    };
  });
  emit("getDataPicker", formattedDateRange.value);
}
</script>
<style scoped>
.block {
  text-align: center;
}

.block:last-child {
  border-right: none;
}

.block .demonstration {
  display: block;
  color: var(--el-text-color-secondary);
  font-size: 14px;
  margin-bottom: 20px;
}
</style>
