<template>
  <j-modal
    :title="title"
    :width="720"
    :visible="visible"
    @ok="handleOk"
    @cancel="handleCancel"
    cancelText="取消"
  >
    <a-form :model="formData" :label-col="{ style: { width: '120px' } }" :wrapper-col="{ span: 16 }">
      <a-form-item label="发起类型">
        <a-radio-group v-model:value="formData.triggerMode">
          <a-radio value="immediate">立即发起</a-radio>
          <a-radio value="recurring">重复发起</a-radio>
        </a-radio-group>
      </a-form-item>

      <template v-if="formData.triggerMode === 'recurring'">
        <a-form-item label="重复周期">
          <JDictSelectTag
            v-model:value="formData.intervalType"
            dictCode="sup_interval_type"
            placeholder="重复周期"
            :getPopupContainer="(node) => node?.parentNode"
          />
        </a-form-item>

        <a-form-item label="重复次数">
          <a-input-number
            v-model:value="formData.startCount"
            :min="1"
            :precision="0"
            placeholder="重复次数"
            style="width: 100%"
          />
        </a-form-item>

        <a-form-item label="重复开始日期">
          <a-date-picker
            v-model:value="formData.intervalStartTime"
            show-time
            valueFormat="YYYY-MM-DD HH:mm:ss"
            placeholder="重复开始日期"
            style="width: 100%"
            :getPopupContainer="(node) => node?.parentNode"
          />
        </a-form-item>
      </template>
    </a-form>

    <template #footer>
      <a-button @click="handleCancel">取消</a-button>
      <a-button type="primary" @click="handleOk">提交</a-button>
    </template>
  </j-modal>
</template>

<script lang="ts" setup>
  import { reactive, ref } from 'vue';
  import JModal from '/src/components/Modal/src/JModal/JModal.vue';
  import JDictSelectTag from '/src/components/Form/src/jeecg/components/JDictSelectTag.vue';
  import { useMessage } from '/src/hooks/web/useMessage';

  interface ModalPayload {
    title?: string;
    payload?: Record<string, any>;
  }

  const emit = defineEmits(['confirm']);
  const { createMessage } = useMessage();

  const title = ref('发起流程');
  const visible = ref(false);
  const contextData = ref<Record<string, any>>({});
  const formData = reactive({
    triggerMode: 'immediate',
    intervalType: undefined as number | string | undefined,
    startCount: undefined as number | undefined,
    intervalStartTime: undefined as string | undefined,
  });

  function resetForm() {
    formData.triggerMode = 'immediate';
    formData.intervalType = undefined;
    formData.startCount = undefined;
    formData.intervalStartTime = undefined;
  }

  function open(data: ModalPayload = {}) {
    resetForm();
    title.value = data.title || '发起流程';
    contextData.value = data.payload || {};
    visible.value = true;
  }

  function handleCancel() {
    visible.value = false;
  }

  function handleOk() {
    if (formData.triggerMode === 'recurring') {
      if (!formData.intervalType) {
        createMessage.warning('Please select interval type');
        return;
      }
      if (!formData.startCount) {
        createMessage.warning('Please input repeat count');
        return;
      }
      if (!formData.intervalStartTime) {
        createMessage.warning('Please select start time');
        return;
      }
    }

    emit('confirm', {
      payload: contextData.value,
      options: {
        triggerType: formData.triggerMode === 'recurring' ? 2 : 1,
        intervalType: formData.triggerMode === 'recurring' ? Number(formData.intervalType) : undefined,
        startCount: formData.triggerMode === 'recurring' ? Number(formData.startCount) : undefined,
        intervalStartTime: formData.triggerMode === 'recurring' ? formData.intervalStartTime : undefined,
      },
    });
    handleCancel();
  }

  defineExpose({
    open,
  });
</script>
