<script setup lang="ts">
  import { Button, Popover, Select, Switch, InputNumber } from 'ant-design-vue';
  import { reactive, ref, unref } from 'vue';
  import {
    DateShortcutOptionEnum,
    getShortcutOptionValue,
    latestOptions,
    shortcutOptions,
  } from './config';
  import { getPopupContainer } from '/@/utils';
  import { dateUtil } from '/@/utils/dateUtil';

  const emit = defineEmits<{
    (eventName: 'change', date: moment.Moment[]): void;
  }>();

  const mode = ref(false);

  const latestPopoverVisible = ref(false);

  const latestSelect = ref();

  const advancedLatest = reactive({
    days: 0,
    hours: 0,
    minutes: 0,
    seconds: 0,
  });

  const getAdvancedLatest = () => {
    const startDate = Object.keys(advancedLatest).reduce((prev, next) => {
      return prev.subtract(advancedLatest[next], next);
    }, dateUtil());
    return [startDate, dateUtil()];
  };

  const getLatestSelect = () => {
    const selected = latestOptions.find((item) => item.value === unref(latestSelect))!;
    if (!selected) return [];
    const startDate = dateUtil().subtract(selected.unitValue, selected.unit);
    return [startDate, dateUtil()];
  };

  const handleUpdateDate = () => {
    emit('change', unref(mode) ? getAdvancedLatest() : getLatestSelect());
    latestPopoverVisible.value = false;
  };

  const shortcutOptionPopoverVisible = ref(false);

  const shortcutOptionSelect = ref<DateShortcutOptionEnum>();

  const handleShortcutOptionUpdate = () => {
    unref(shortcutOptionSelect) &&
      emit('change', getShortcutOptionValue(unref(shortcutOptionSelect)!));
    shortcutOptionPopoverVisible.value = false;
  };
</script>

<template>
  <section class="h-full items-center flex gap-2 h-9">
    <Popover
      v-model:visible="latestPopoverVisible"
      trigger="click"
      :overlayStyle="{ zIndex: 9999 }"
      overlayClassName="range-picker-extra-latest-popover"
    >
      <template #content>
        <main class="w-90 p-4">
          <div class="flex gap-3 items-end">
            <div v-if="!mode" class="w-full">
              <Select
                v-model:value="latestSelect"
                class="w-full border-b"
                :getPopupContainer="getPopupContainer"
                placeholder="请选择区间"
                :bordered="false"
                :options="latestOptions"
              />
            </div>

            <div v-if="mode" class="w-full flex gap-1">
              <div class="w-1/4">
                <div>天</div>
                <InputNumber v-model:value="advancedLatest.days" :min="0" :precision="0" />
              </div>
              <div class="w-1/4">
                <div>小时</div>
                <InputNumber v-model:value="advancedLatest.hours" :min="0" :precision="0" />
              </div>
              <div class="w-1/4">
                <div>分钟</div>
                <InputNumber v-model:value="advancedLatest.minutes" :min="0" :precision="0" />
              </div>
              <div class="w-1/4">
                <div>秒</div>
                <InputNumber v-model:value="advancedLatest.seconds" :min="0" :precision="0" />
              </div>
            </div>

            <div>
              <div class="h-6 text-center">高级</div>
              <Switch v-model:checked="mode" />
            </div>
          </div>
          <div class="w-full flex mt-4 gap-4 justify-end">
            <Button size="small" @click="latestPopoverVisible = false"> 取消</Button>
            <Button size="small" type="primary" @click="handleUpdateDate"> 更新</Button>
          </div>
        </main>
      </template>
      <Button type="primary" size="small" @click="latestPopoverVisible = true">最后</Button>
    </Popover>

    <Popover
      v-model:visible="shortcutOptionPopoverVisible"
      trigger="click"
      :overlayStyle="{ zIndex: 9999 }"
      overlayClassName="range-picker-extra-shortcut-popover"
    >
      <template #content>
        <main class="w-90 p-4">
          <div>
            <Select
              v-model:value="shortcutOptionSelect"
              class="w-full border-b"
              :getPopupContainer="getPopupContainer"
              placeholder="请选择区间"
              :bordered="false"
              :options="shortcutOptions"
            />
          </div>
          <div class="w-full flex mt-4 gap-4 justify-end">
            <Button size="small" @click="shortcutOptionPopoverVisible = false"> 取消</Button>
            <Button size="small" type="primary" @click="handleShortcutOptionUpdate"> 更新</Button>
          </div>
        </main>
      </template>
      <Button type="primary" size="small" @click="shortcutOptionPopoverVisible = true">
        快捷选择
      </Button>
    </Popover>
  </section>
</template>

<style lang="less">
  .range-picker-extra-latest-popover {
    .ant-input-number {
      min-width: fit-content;
      width: 100%;
    }
  }
</style>