<script lang="ts" setup>
import type { SysJobLogApi } from '#/api/system/sysJobLog';

import { ref } from 'vue';

import { useVbenDrawer } from '@vben/common-ui';
import { DictEnum } from '@vben/constants';

import { renderDict, renderJsonPreview } from '#/utils/render';

// const emit = defineEmits<{
//   success: [];
// }>();
// const formData = ref<SysJobLogApi.SysJobLog>();
const jobLog = ref<SysJobLogApi.SysJobLog>();

// const formSchema: VbenFormSchema[] = [
//   {
//     component: 'Input',
//     fieldName: 'jobId',
//     label: '任务id',
//     rules: 'required',
//   },
//   {
//     component: 'Input',
//     fieldName: 'executorHandler',
//     label: '执行器任务handler',
//     rules: 'required',
//   },
//   {
//     component: 'Textarea',
//     fieldName: 'params',
//     label: '参数',
//     rules: 'required',
//   },
//   {
//     component: 'RadioGroup',
//     componentProps: {
//       buttonStyle: 'solid',
//       optionType: 'button',
//       options: getDictOptions(DictEnum.SYS_SUCCESS_STATUS),
//     },
//     fieldName: 'status',
//     label: '任务状态  1：成功  0：失败',
//     rules: 'required',
//   },
//   {
//     component: 'Textarea',
//     fieldName: 'handleMsg',
//     label: '执行信息',
//     rules: 'required',
//   },
//   {
//     component: 'Input',
//     fieldName: 'costTime',
//     label: '执行耗时(单位：毫秒)',
//     rules: 'required',
//   },
//   {
//     component: 'DatePicker',
//     fieldName: 'triggerTime',
//     label: '调度时间',
//     rules: 'required',
//   },
// ];

// const [BasicForm, formApi] = useVbenForm({
//   commonConfig: {
//     componentProps: {
//       class: 'w-full',
//     },
//     formItemClass: 'col-span-2',
//     labelWidth: 90,
//   },
//   schema: formSchema,
//   showDefaultActions: false,
//   wrapperClass: 'grid-cols-2',
// });

// const { onBeforeClose, markInitialized, resetInitialized } = useBeforeCloseDiff(
//   {
//     initializedGetter: defaultFormValueGetter(formApi),
//     currentGetter: defaultFormValueGetter(formApi),
//   },
// );

const [Drawer, drawerApi] = useVbenDrawer({
  // onBeforeClose,
  // onClosed: handleClosed,
  // onConfirm: onSubmit,
  async onOpenChange(isOpen) {
    if (!isOpen) {
      return null;
    }
    const data = drawerApi.getData<SysJobLogApi.SysJobLog>();
    jobLog.value = data;
    // if (data) {
    //   formData.value = data;
    //   await formApi.setValues(formData.value);
    // } else {
    //   formApi.resetForm();
    // }
    // await markInitialized();
  },
  onClosed() {
    jobLog.value = undefined;
  },
});

// async function onSubmit() {
//   const { valid } = await formApi.validate();
//   if (valid) {
//     drawerApi.lock();
//     const data = await formApi.getValues<SysJobLogApi.SysJobLog>();
//     try {
//       await (formData.value?.id
//         ? apiUpdate({ id: formData.value.id, ...data })
//         : apiAdd(data));
//       resetInitialized();
//       emit('success');
//       drawerApi.close();
//     } finally {
//       drawerApi.unlock();
//     }
//   }
// }

// async function handleClosed() {
//   await formApi.resetForm();
//   resetInitialized();
// }

// const getDrawerTitle = computed(() =>
//   formData.value?.id ? '修改定时任务日志' : '新增定时任务日志',
// );
</script>
<template>
  <Drawer class="w-full max-w-[800px]" title="定时任务日志">
    <Descriptions v-if="jobLog" size="small" :column="1" bordered>
      <DescriptionsItem label="任务状态">
        <component
          :is="renderDict(jobLog.status, DictEnum.SYS_SUCCESS_STATUS)"
        />
      </DescriptionsItem>
      <DescriptionsItem label="执行器任务handler">
        {{ jobLog.executorHandler }}
      </DescriptionsItem>
      <DescriptionsItem v-if="jobLog.params" label="任务参数">
        <div class="max-h-[300px] overflow-y-auto">
          <component :is="renderJsonPreview(jobLog.params)" />
        </div>
      </DescriptionsItem>
      <DescriptionsItem label="执行信息">
        {{ jobLog.handleMsg }}
      </DescriptionsItem>
      <DescriptionsItem label="请求耗时">
        {{ `${jobLog.costTime} ms` }}
      </DescriptionsItem>
      <DescriptionsItem label="调度时间">
        {{ `${jobLog.triggerTime}` }}
      </DescriptionsItem>
    </Descriptions>
  </Drawer>
</template>
