<script lang="ts" setup>
import { getBpmFormSimpleList } from '@/api/modules/bpmDefinition/bpMbiaodandingyibiaokongzhiqi.ts';
import { useElementsInfoStore } from '../../stores/elementsInfo.ts';
import { useSelectedInfoStore } from '../../stores/selectedInfo.ts';

defineOptions({ name: 'FormComponent' });
const lf: any = inject('lf');
const elementsInfoStore = useElementsInfoStore();
const selectedInfoStore = useSelectedInfoStore();

const formState = reactive({
  formKey: '',
});

const formOptions = ref<{ label: string, value: string }[]>([]);
// { label: '事件提报', value: '34' },
// { label: 'leave-form', value: '33' },
// { label: '下发表单1', value: '35' };
function getFormList() {
  getBpmFormSimpleList().then((response) => {
    if (response && response.data) {
      formOptions.value.length = 0;
      response.data.forEach((item: any) => {
        formOptions.value.push({ label: item.name, value: item.id });
      });
    }
  });
}
function handleChange() {
  elementsInfoStore.updateElement(selectedInfoStore.selectId, {
    formKey: formState.formKey,
  });
  lf.value.setProperties(selectedInfoStore.selectId, {
    formKey: formState.formKey,
  });
}

onMounted(() => {
  getFormList();
  const elementInfo = elementsInfoStore.getElementById(selectedInfoStore.selectId) || {};
  formState.formKey = elementInfo.formKey || '';
});
</script>

<template>
  <a-form
    :model="formState"
    name="basic"
    :label-col="{ span: 4 }"
    autocomplete="off"
  >
    <a-form-item
      label="流程表单"
      name="formKey"
    >
      <a-select
        v-model:value="formState.formKey"
        :options="formOptions"
        @change="handleChange"
      />
    </a-form-item>
  </a-form>
</template>
