<template>
  <h-form
    ref="formRef"
    :model="formData"
    name="basic"
    :layout="hFormGlobalConfig.layout"
    :labelCol="hFormGlobalConfig.labelCol"
    autocomplete="off"
  >
    <h-form-item
      name="templateCategory"
      :label="t('FormDesign.list.templateCategory')"
      :rules="[
        {
          required: true,
          trigger: ['change', 'blur'],
          message: t('FormDesign.list.templateCategoryTips'),
        },
      ]"
    >
      <h-select
        v-model:value="formData.templateCategory"
        :options="categoryOptions"
        @change="changeCategory"
      ></h-select>
    </h-form-item>
    <h-form-item
      name="templateValue"
      :label="t('FormDesign.list.templateValue')"
      :rules="[
        {
          required: true,
          trigger: ['change', 'blur'],
          message: t('FormDesign.list.templateValueTips'),
        },
      ]"
    >
      <h-select
        v-model:value="formData.templateValue"
        :options="templateOptions"
        @select="selectProcessTemplate"
      ></h-select>
    </h-form-item>
  </h-form>
</template>
<!-- 表单实例-发起流程-选择流程模板- -->
<script lang="ts">
import { defineComponent, onBeforeMount, reactive, ref } from 'vue';
import { useHttp } from '@crami/http';
import { message } from '@crami/ui';
import { Form as HForm, FormItem as HFormItem, Select as HSelect } from '@crami/ui';
import { useI18n } from '@crami/locale';

import { hFormGlobalConfig } from '@/settings/config';

interface FlowFormData {
  objectId?: string;
  templateCategory: string;
  templateValue: string;
  processDefinitionKey?: string;
  title?: string;
  bindFormType?: string;
  formModel?: string;
  formTemplate?: string;
  newVersion?: boolean;
}

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

    const formData = reactive<FlowFormData>({
      objectId: prop.componentProps.objectId,
      newVersion: prop.componentProps.newVersion,
      // 流程分类
      templateCategory: '',
      // 流程模板
      templateValue: '',
    });

    const formRef = ref();
    // 流程分类列表
    const categoryOptions = ref([]);
    // 流程分类下的模板列表
    const templateOptions = ref([]);
    // 流程分类选中项更改
    const changeCategory = (val, options) => {
      // 选中项更改 templateOptions数据更改
      formData.templateValue = '';
      templateOptions.value = options.flowEntryList;
    };
    //获取绑定了某表单模板的流程模板
    const loadTemplateData = () => {
      useHttp({
        params: {
          // 表单模板id
          formTemplateList: [prop.componentProps.templateId],
        },
        method: 'post',
        url: '/api/platform-base-workflow/admin/flow/flowDefinition/getFlowByFormTemplate',
      }).then(res => {
        if (res.code == 200) {
          categoryOptions.value = res.data;
        } else if (!res.success) {
          message.error(res.msg);
        }
      });
    };
    const selectProcessTemplate = (val, options) => {
      formData.processDefinitionKey = options.processDefinitionKey;

      formData.title = options.label;

      formData.bindFormType = options.bindFormType;
      formData.formModel = options.formModel;
      formData.formTemplate = options.formTemplate;
    };
    const validate = () => {
      // 表单验证
      return formRef.value.validate();
    };
    // 获取表单数据
    const getFormData = () => {
      return formData;
    };
    expose({ validate, getFormData });
    onBeforeMount(() => {
      loadTemplateData();
    });
    return {
      t,
      formRef,
      formData,
      categoryOptions,
      changeCategory,
      templateOptions,
      selectProcessTemplate,
      validate,
      getFormData,
      hFormGlobalConfig,
    };
  },
});
</script>
