<template>
  <h-form
    ref="formRef"
    :model="formData"
    name="basic"
    :layout="hFormGlobalConfig.layout"
    :labelCol="hFormGlobalConfig.labelCol"
    autocomplete="off"
  >
    <h-form-item
      name="categoryId"
      :label="t('FormDesign.list.category')"
      :rules="[
        {
          required: true,
          trigger: ['change', 'blur'],
          message: t('FormDesign.list.categoryTips'),
        },
      ]"
    >
      <h-select
        v-model:value="formData.categoryId"
        :options="categoryOptions"
        :optionLabelProp="null"
        :field-names="{ label: 'text', value: 'value' }"
      ></h-select>
    </h-form-item>
  </h-form>
</template>
<!-- 表单实例-发起流程-选择流程模板- -->
<script lang="ts">
import { defineComponent, onBeforeMount, reactive, ref } from 'vue';
import { message } from '@crami/ui';
import { Form as HForm, FormItem as HFormItem, Select as HSelect } from '@crami/ui';
import { useI18n } from '@crami/locale';
import { getFormCateList } from '@/api/platform/form';
import { hFormGlobalConfig } from '@/settings/config';

interface FormData {
  objectType: string;
  categoryId: string;
}

export default defineComponent({
  name: 'MoveToCategory',
  components: { HForm, HFormItem, HSelect },
  props: {
    componentProps: {
      type: Object,
    },
  },
  setup(prop) {
    const { t } = useI18n();

    const formData = reactive<FormData>({
      objectType: prop.componentProps.objectType,
      // 分类
      categoryId: '',
    });

    const formRef = ref();
    // 分类列表
    const categoryOptions = ref([]);

    //获取分类列表数据
    const loadTemplateData = () => {
      getFormCateList(prop.componentProps.objectType).then(res => {
        if (res.code == 200) {
          categoryOptions.value = res.data;
        } else if (!res.success) {
          message.error(res.msg);
        }
      });
    };

    const validate = () => {
      // 表单验证
      return formRef.value.validate();
    };
    // 获取表单数据
    const getFormData = () => {
      return formData;
    };
    onBeforeMount(() => {
      loadTemplateData();
    });
    return {
      t,
      formRef,
      formData,
      categoryOptions,

      validate,
      getFormData,
      hFormGlobalConfig,
    };
  },
});
</script>
