<script lang="ts" setup>
  import { ref, unref } from 'vue';
  import { formSchema, SchemaFiled } from './config';
  import { useForm } from '/@/components/Form';
  import { useModalInner } from '/@/components/Modal';
  import { useGridLayout } from '/@/hooks/component/useGridLayout';
  import { ColEx } from '/@/components/Form/src/types';
  import { BasicForm } from '/@/components/Form';
  import { BasicModal } from '/@/components/Modal';
  import { nextTick } from 'vue';

  const emit = defineEmits(['register', 'getAlarmForm']);
  // const emit = defineEmits<{
  //   (event: 'getAlarmForm', data: WidgetDataType): void;
  // }>();

  const [registerModal, { closeModal }] = useModalInner();

  const [register, method] = useForm({
    schemas: formSchema(),
    baseColProps: useGridLayout(1) as unknown as ColEx,
    showSubmitButton: false,
    showResetButton: false,
    rowProps: {
      gutter: 10,
    },
    labelWidth: 120,
    fieldMapToTime: [
      [SchemaFiled.DATE_RANGE, [SchemaFiled.START_TS, SchemaFiled.END_TS], 'YYYY-MM-DD HH:ss:mm'],
    ],
  });

  const handleCancel = () => {
    // destory()
  };
  const alarmForm = ref({ time: 2592000000, pageSize: 10 }); //默认30天
  const handleSubmit = async () => {
    const { way, pageSize, startTs, endTs } = method.getFieldsValue();
    if (way == 'timePeriod') {
      alarmForm.value = {
        time: new Date(endTs).getTime() - new Date(startTs).getTime(),
        pageSize,
      };
    } else {
      alarmForm.value = {
        time: startTs,
        pageSize,
      };
    }
    emit('getAlarmForm', unref(alarmForm));
    await nextTick();
    closeModal();
  };
</script>

<template>
  <BasicModal
    @register="registerModal"
    @cancel="handleCancel"
    @ok="handleSubmit"
    :destroy-on-close="true"
    :show-ok-btn="true"
    cancel-text="关闭"
    width="40%"
    title="历史趋势"
  >
    <section
      class="flex flex-col p-4 h-full w-full min-w-7/10"
      style="color: #f0f2f5; background-color: #f0f2f5"
    >
      <section class="bg-white my-3 p-2">
        <BasicForm @register="register" />
      </section>
    </section>
  </BasicModal>
</template>

<style scoped></style>