<template>
  <LjDialogNew v-bind="$attrs" width="560px" :closed="closed">
    <template #header>
      <div class="flx-1">
        <span class="text-h5-b">定时重算报价</span>
      </div>
    </template>

    <el-form class="recalc-task-form" label-width="100px">
      <el-form-item label="重算时间">
        <el-date-picker
          v-model="scheduleTime"
          type="datetime"
          value-format="YYYY-MM-DD HH:mm:ss"
          format="YYYY-MM-DD HH:mm:ss"
          placeholder="请选择重算时间"
          style="width: 220px"
        />
      </el-form-item>
      <el-form-item label="快捷时间">
        <div class="recalc-shortcuts">
          <el-button @click="setShortcutTime(12)">12:00</el-button>
          <el-button @click="setShortcutTime(18)">18:00</el-button>
          <el-button @click="setMidnight">24:00</el-button>
          <el-button @click="setTomorrowMorning">第二天6:00</el-button>
        </div>
      </el-form-item>
      <el-form-item label="选中数量">
        <span>{{ props.records.length }} 张</span>
      </el-form-item>
      <el-form-item label="预计执行">
        <span>{{ scheduleTime }}</span>
      </el-form-item>
    </el-form>

    <template #footer>
      <div class="dialog-footer">
        <el-button @click="onCancel">取消</el-button>
        <el-button type="primary" @click="onConfirm">确认创建</el-button>
      </div>
    </template>
  </LjDialogNew>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { ElMessage } from "element-plus";
import LjDialogNew from "@/components/LjDialog/index-new.vue";

interface Props {
  records: any[];
}

const props = withDefaults(defineProps<Props>(), {
  records: () => []
});
const emit = defineEmits(["cancel", "submit", "closed", "update:modelValue"]);

const pad = (val: number) => String(val).padStart(2, "0");

const formatLocalDateTime = (date: Date) => {
  return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())} ${pad(date.getHours())}:${pad(
    date.getMinutes()
  )}:${pad(date.getSeconds())}`;
};

const getNextTime = (hour: number) => {
  const schedule = new Date();
  schedule.setHours(hour, 0, 0, 0);
  if (schedule.getTime() <= Date.now()) {
    schedule.setDate(schedule.getDate() + 1);
  }
  return schedule;
};

const getTomorrowTime = (hour: number) => {
  const schedule = new Date();
  schedule.setDate(schedule.getDate() + 1);
  schedule.setHours(hour, 0, 0, 0);
  return schedule;
};

const scheduleTime = ref(formatLocalDateTime(getNextTime(18)));

const setShortcutTime = (hour: number) => {
  scheduleTime.value = formatLocalDateTime(getNextTime(hour));
};

const setMidnight = () => {
  scheduleTime.value = formatLocalDateTime(getTomorrowTime(0));
};

const setTomorrowMorning = () => {
  scheduleTime.value = formatLocalDateTime(getTomorrowTime(6));
};

const onCancel = () => {
  emit("cancel");
};

const onConfirm = () => {
  if (!scheduleTime.value) {
    ElMessage.warning("请选择重算时间");
    return;
  }
  emit("submit", { scheduleTime: scheduleTime.value });
};

const closed = () => {
  emit("closed");
};
</script>

<style scoped lang="scss">
.recalc-task-form {
  padding-top: 4px;
}
.recalc-shortcuts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  .el-button {
    margin-left: 0;
  }
}
</style>
