<script lang="ts" setup>
  import { ref } from 'vue';
  import { ImmediateExecuteTaskType, TaskRecordType } from '/@/api/task/model';
  import { BasicForm, useForm } from '/@/components/Form';
  import { BasicModal, useModalInner } from '/@/components/Modal';
  import { TaskTargetEnum, TaskTypeNameEnum } from '../../config';
  import { FormValue, TargetType, formSchemas } from './config';
  import { unref } from 'vue';
  import { immediateExecute } from '/@/api/task';
  import { useMessage } from '/@/hooks/web/useMessage';
  const props = defineProps<{
    reload: Fn;
  }>();

  defineEmits(['register']);

  const dataSource = ref<TaskRecordType>();

  const [registerModal, { closeModal }] = useModalInner((record: TaskRecordType) => {
    resetFields();
    dataSource.value = record;
    if (record) {
      setFieldsValue({ taskRecord: JSON.stringify(record) } as FormValue);
    }
  });

  const [registerForm, { setFieldsValue, getFieldsValue, resetFields }] = useForm({
    schemas: formSchemas,
    showActionButtonGroup: false,
  });

  const composeData = (record: FormValue): ImmediateExecuteTaskType => {
    const { executeTarget, targetIds } = record;
    return {
      executeTarget:
        executeTarget === TargetType.ASSIGN
          ? TaskTargetEnum.DEVICES
          : unref(dataSource)!.targetType,
      id: unref(dataSource)!.id,
      targetIds,
      cronExpression: unref(dataSource)!.executeTime.cron,
      name: unref(dataSource)!.name,
    };
  };

  const loading = ref(false);
  const { createMessage } = useMessage();
  const handleOk = async () => {
    const record = getFieldsValue() as FormValue;
    const value = composeData(record);
    try {
      loading.value = true;
      const { data } = await immediateExecute(value);
      data ? createMessage.success('运行成功') : createMessage.error('运行失败');
      if (data) {
        closeModal();
        props.reload?.();
      }
    } catch (error) {
      throw error;
    } finally {
      loading.value = false;
    }
  };
</script>

<template>
  <BasicModal
    @register="registerModal"
    title="运行任务"
    :okButtonProps="{ loading }"
    @ok="handleOk"
  >
    <BasicForm @register="registerForm">
      <template #taskName>
        <div class="font-semibold">
          {{ dataSource?.name }}
        </div>
      </template>
      <template #taskType>
        <div class="font-semibold">
          {{
            dataSource ? TaskTypeNameEnum[dataSource.executeContent.type] : TaskTypeNameEnum.CUSTOM
          }}
        </div>
      </template>
    </BasicForm>
  </BasicModal>
</template>