<script lang="ts" setup>
import { ref } from 'vue';
import { useVbenForm, z } from '#/adapter/form';
import { $t } from '@vben/locales';
import { ElMessage } from 'element-plus';
import { useVbenDrawer } from '@vben/common-ui';
import { workflowDefinitionAdd, workflowDefinitionUpdate } from '#/api/workflow/definition';
import { categoryTree } from '#/api/workflow/category';
import { getPopupContainer } from '@vben/utils';

const emit = defineEmits<{ reload: [] }>();
const isUpdate = ref<boolean>(false);
const selectedCategory = ref<string>('');

// 表单配置
const [Form, FormApi] = useVbenForm({
  wrapperClass: 'grid-cols-2',
  commonConfig: {
    formItemClass: 'col-span-2',
    componentProps: {
      class: 'w-full',
    },
    labelWidth: 100,
  },
  // 不显示提交和重置按钮
  showDefaultActions: false,
  // 水平布局，label和input在同一行
  layout: 'horizontal',
  schema: [
    {
      component: 'Input',
      fieldName: 'id',
      dependencies: {
        show: () => false,
        triggerFields: [''],
      },
    },
    {
      component: 'ApiTreeSelect',
      componentProps: {
        api: async () => {
          return await categoryTree();
        },
        getPopupContainer,
        labelField: 'label',
        valueField: 'id',
        childrenField: 'children',
        checkStrictly: true,
      },
      rules: 'selectRequired',
      fieldName: 'category',
      label: '流程分类',
    },
    {
      component: 'Input',
      fieldName: 'flowName',
      componentProps: {
        maxlength: 100,
      },
      label: '流程名称',
      rules: 'required',
    },
    {
      component: 'Input',
      fieldName: 'flowCode',
      componentProps: {
        maxlength: 100,
      },
      label: '流程编码',
      rules: 'required',
    },
    
  ],
});

// 侧拉内置容器
const [Drawer, DrawerApi] = useVbenDrawer({
  // 点击侧拉的确定按钮执行逻辑
  async onConfirm() {
    try {
      DrawerApi.drawerLoading(true);
      const { valid } = await FormApi.validate();
      if (!valid) {
        return;
      }
      const data = await FormApi.getValues();
      await (isUpdate.value ? workflowDefinitionUpdate(data) : workflowDefinitionAdd(data));
      emit('reload');
      DrawerApi.close();
      await FormApi.resetForm();
    } catch (error) {
      console.error(error);
    } finally {
      DrawerApi.drawerLoading(false);
    }
  },
  async onOpenChange(isOpen) {
    if (!isOpen) {
      return;
    }
    DrawerApi.drawerLoading(true);
    const { id, update } = DrawerApi.getData();
    isUpdate.value = update;
    console.log(DrawerApi.getData());
    if((DrawerApi.getData().category)){
      selectedCategory.value = DrawerApi.getData().category;
      await FormApi.setFieldValue('category', DrawerApi.getData().category);
    }
    if (id) {
      // 编辑时不需要重新获取数据，因为父组件已经通过setData传递了所有需要的数据
      const result = DrawerApi.getData();
      await FormApi.setValues(result);
      await FormApi.setFieldValue('id', result.id);
      await FormApi.setFieldValue('flowName', result.flowName);
      await FormApi.setFieldValue('flowCode', result.flowCode);
      await FormApi.setFieldValue('category', result.category);
      await FormApi.setFieldValue('modelValue', result.modelValue);
    }
    DrawerApi.drawerLoading(false);
  },
});
</script>

<template>
  <Drawer :title="isUpdate ? '编辑流程' : '新增流程'" class="w-[600px]">
    <Form />
  </Drawer>
</template>
<style scoped lang="scss">
:deep(.el-input-number) {
  width: 100%;
}

:deep(button) {
  width: 100%;
}
</style>
