<template>
  <el-drawer v-model="isDrawer" :size="width" :title="title" @close="handleReset">
    <BasicForm @register="register">
      <template #statusSlot="{ model, field }">
        <el-input v-model="model[field]" />
      </template>
    </BasicForm>
    <template #footer>
      <el-space>
        <el-button @click="handleReset">重置</el-button>
        <el-button type="primary" :loading="subLoading" @click="formSubmit">提交</el-button>
      </el-space>
    </template>
  </el-drawer>
</template>

<script lang="ts" setup>
  import { ref, onMounted, nextTick } from 'vue';
  import { ElMessage } from 'element-plus';
  import { BasicForm, FormSchema, useForm } from '@/components/Form/index';
  import type { formParamsType } from './types';

  import { addTasks, editTasks, tasksInfo } from '@/api/system/tasks';
  import { useDictionary } from '@/hooks/web/useDictionary';

  const schemas: FormSchema[] = [
    {
      field: 'jobId',
      hidden: true,
    },
    {
      field: 'taskClass',
      component: 'Input',
      label: '处理类',
      rules: [{ required: true, message: '请输入处理类', trigger: ['blur'] }],
    },
    {
      field: 'taskName',
      component: 'Input',
      label: '任务名称',
      rules: [{ required: true, message: '请输入任务名称', trigger: ['blur'] }],
    },
    {
      field: 'groupName',
      component: 'Input',
      label: '任务组名',
      rules: [{ required: true, message: '请输入任务组名', trigger: ['blur'] }],
    },
    {
      field: 'jobType',
      component: 'BasicSelect',
      label: '任务类型',
      componentProps: {
        placeholder: '请选择类型',
        request: loadSelectData,
        block: true,
        labelField: 'dictLabel',
        valueField: 'dictValue',
      },
    },
    {
      field: 'cronExpression',
      component: 'Input',
      label: 'Cron表达式',
    },
    {
      field: 'jobInterval',
      component: 'InputNumber',
      label: '时间间隔',
    },
    {
      field: 'param',
      component: 'Input',
      label: '参数',
      componentProps: {
        type: 'textarea',
      },
    },
    {
      field: 'description',
      component: 'Input',
      label: '任务描述',
      componentProps: {
        type: 'textarea',
      },
    },
    {
      field: 'orderNum',
      component: 'InputNumber',
      label: '排序',
    },
  ];

  const emit = defineEmits(['change']);

  defineProps({
    title: {
      type: String,
      default: '添加配置',
    },
    width: {
      type: Number,
      default: 450,
    },
    permissionList: {
      type: Array,
    },
  });

  const message = ElMessage;
  const isDrawer = ref(false);
  const subLoading = ref(false);
  const { getDictTypeList } = useDictionary();

  const formParams = ref<formParamsType>({
    jobId: null,
    cronExpression: '',
    description: '',
    groupName: '',
    param: '',
    taskClass: '',
    taskName: '',
    taskStatus: '',
    jobInterval: null,
    jobType: null,
    orderNum: null,
  });

  const [register, { submit, getFieldsValue, setFieldsValue, resetFields }] = useForm({
    collapsedRows: 3,
    labelWidth: 120,
    layout: 'horizontal',
    submitButtonText: '保存',
    showActionButtonGroup: false,
    schemas,
  });

  function openDrawer(jobId?) {
    if (jobId) {
      formParams.value.jobId = jobId;
      getInfo();
      return;
    }
    isDrawer.value = true;
  }

  function closeDrawer() {
    isDrawer.value = false;
  }

  async function loadSelectData() {
    //这里可以进行数据转换处理
    return await getDictTypeList({ dictType: 'task_type' });
  }

  async function formSubmit() {
    const isCheck = await submit();
    if (!isCheck) return;

    const params = getFieldsValue();
    params.jobType = parseInt(params.jobType);

    if (formParams.value.jobId) {
      editTasks(params).then((_) => {
        message.success('编辑成功');
        emit('change');
        handleReset();
        closeDrawer();
      });
    } else {
      addTasks(params).then((_) => {
        message.success('添加成功');
        emit('change');
        handleReset();
        closeDrawer();
      });
    }
  }

  function handleReset() {
    // formParams.value = Object.assign(formParams.value, defaultValueRef());
    resetFields();
  }

  function getInfo() {
    tasksInfo({ jobId: formParams.value.jobId }).then((res) => {
      isDrawer.value = true;
      nextTick(() => {
        setFieldsValue(res);
      });
    });
  }

  onMounted(() => {});

  defineExpose({
    openDrawer,
    closeDrawer,
  });
</script>
