<template>
  <!-- 表单信息 -->
  <div class="form-container">
    <div class="box">
      <div class="form-right">
        <div v-for="(item, index) in forms.configs" :key="index" :tab="item.formName">
          <div v-show="activeIndex == index">
              <div class="page-bg-wrap">
                <div class="top-toolbar" style="display: flex;margin-bottom: 10px">
                <div id="adminButtons" v-show="activeIndex == index" style="margin-right:10px">
                  <a-button @click="handleCancel" v-if="forms.modes[index] == 'edit'">取消</a-button>
                  <a-button @click="handleSave" v-if="forms.modes[index] == 'edit'" type="primary" style="margin-left: 12px">保存</a-button>
                  <a-button @click="handleEdit" v-if="forms.modes[index] == 'view'">编辑</a-button>
                  <a-button @click="handleDelete" type="danger" style="margin-left: 12px">删除</a-button>
                </div>
                <div id="approveExtendButton"></div>
                <div id="approveRightButton"></div>
                <div id="approveExtendButtonLeft" v-show="false"></div>
              </div>
              <SystemForm class="form-box" v-if="item.formType == FormType.SYSTEM"
                :systemComponent="item.systemComponent" :isViewProcess="props.disabled" :formModel="item.formModel"
                :workflowConfig="item" :ref="setItemRef" />
              <SimpleForm v-else-if="item.formType == FormType.CUSTOM" class="form-box testClass" :ref="setItemRef"
                :formProps="item.formProps" :formModel="item.formModel" :isWorkFlow="true" />
              </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
  import SimpleForm from '/@/components/SimpleForm/src/SimpleForm.vue';
  import { FewerLeft, FewerRight } from '/@/components/ModalPanel';
  import { NodeHead } from '/@/components/ModalPanel/index';
  import IconFontSymbol from '/@/components/IconFontSymbol/Index.vue';
  import { onBeforeUpdate, nextTick, onMounted, reactive, computed, ref, inject, createVNode } from 'vue';
  import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
  import { TaskApproveOpinion, ValidateForms } from '/@/model/workflow/bpmnConfig';
  import { cloneDeep } from 'lodash-es';
  import { useI18n } from '/@/hooks/web/useI18n';
  import { GeneratorConfig } from '/@/model/generator/generatorConfig';
  import { FormEventColumnConfig } from '/@/model/generator/formEventConfig';
  import { changeFormJson } from '/@/hooks/web/useWorkFlowForm';
  import { SystemForm } from '/@/components/SystemForm/index';
  import { FormType } from '/@/enums/workflowEnum';
  import { createFormEvent, loadFormEvent, submitFormEvent } from '/@/hooks/web/useFormEvent';
  import { message, Modal } from "ant-design-vue";
  import { updateWorkflow } from '/@/api/workflow/adminOperation';
  import { useMultipleTabStore } from '/@/store/modules/multipleTab';
  import { useRouter } from 'vue-router';
  import useEventBus from '/@/hooks/event/useEventBus';

  const tabStore = useMultipleTabStore();
  const { bus, FLOW_PROCESSED } = useEventBus();
  const router = useRouter();
  const { currentRoute } = useRouter();


  const { t } = useI18n();
  const props = withDefaults(
    defineProps<{
      disabled: boolean | undefined;
      formInfos: Array<any>;
      opinions?: Array<TaskApproveOpinion> | undefined;
      opinionsComponents?: Array<string> | undefined;
      formAssignmentData?: null | Recordable;
      processId: string;
    }>(),
    {
      disabled: false,
      formInfos: () => {
        return [];
      },
      processId: ''
    },
  );
  const flowInfo = inject('flowInfo')

  const emits = defineEmits(['getFormConfigs']);
  let uploadComponent: { ids: Array<string> } = reactive({ ids: [] });

  let activeIndex = ref(0);
  let itemRefs = ref([]) as any;
  const setItemRef = (el: never) => {
    itemRefs.value.push(el);
  };

  onBeforeUpdate(() => {
    itemRefs.value = [];
  });
  let forms: {
    formModels: Array<Recordable>;
    configs: Array<{
      formName: string;
      formProps: {};
      formModel: Recordable;
      formKey: string;
      validate: boolean;
      formType: FormType;
      workflowPermissions?: Array<any>;
      opinions?: Array<any>;
      opinionsComponents?: Array<any>;
      systemComponent?: {
        functionalModule: string;
        functionName: string;
        functionFormName: string;
      };
      formJson?: Array<any>;
      isOldSystem?: boolean;
    }>;
    formEventConfigs: FormEventColumnConfig[];
    modes: string[];
  } = reactive({
    formModels: [],
    configs: [],
    formEventConfigs: [],
    modes: []
  });
  onMounted(async () => {
    for await (let element of props.formInfos) {
      let formModels = {};
      if (element.formData) {
        formModels = cloneDeep(element.formData);
      }
      // 参数赋值[赋值权限最大]
      if (props.formAssignmentData) {
        if (props.formAssignmentData[element.formConfig.formId]) {
          formModels = { ...formModels, ...props.formAssignmentData[element.formConfig.formId] };
        }
      }
      forms.formModels.push(formModels);
      // 默认赋值view
      forms.modes.push('view');
      // 系统表单
      if (element.formType == FormType.SYSTEM) {
        forms.configs.push({
          formName: element.formConfig.formName,
          formProps: {},
          formModel: formModels,
          formKey: element.formConfig.key,
          validate: true,
          formType: element.formType,
          workflowPermissions: element.formConfig.children,
          opinions: props.opinions,
          opinionsComponents: props.opinionsComponents,
          systemComponent: {
            functionalModule: element.functionalModule,
            functionName: element.functionName,
            functionFormName: 'Form',
          },
          formJson: element.formJson,
          isOldSystem: false,
        });
        // 上传组件Id集合
        setTimeout(() => {
          getSystemUploadComponentIds();
        }, 0);
      } else {
        const model = JSON.parse(element.formJson) as GeneratorConfig;
        const { formJson, formEventConfig } = model;
        if (formEventConfig) {
          forms.formEventConfigs.push(formEventConfig);

          //初始化表单
          await createFormEvent(formEventConfig, formModels, true);
          //加载表单
          await loadFormEvent(formEventConfig, formModels, true);

          //TODO 暂不放开 工作流没有获取表单数据这个步骤 获取表单数据
          // getFormDataEvent(formEventConfig, formModels,true);
        }
        let formKey = element.formConfig.key;

        let config = {
          formName: element.formConfig.formName,
          formProps: {},
          formModel: {},
          formKey,
          validate: true,
          formType: element.formType,
        };
        let isViewProcess = props.disabled;
        let { buildOptionJson, uploadComponentIds } = changeFormJson(
          {
            formJson,
            formConfigChildren: element.formConfig.children,
            formConfigKey: element.formConfig.key,
            opinions: props.opinions,
            opinionsComponents: props.opinionsComponents,
          },
          isViewProcess,
          uploadComponent.ids,
        );
        uploadComponent.ids = uploadComponentIds;
        if (buildOptionJson.schemas) {
          config.formProps = buildOptionJson;
          forms.configs.push(config);
        }
      }
      // });
    }

    await nextTick();
    setTimeout(() => {
      setFormModel();
    }, 0);
    emits('getFormConfigs', forms.configs.length ? forms.configs[activeIndex.value] : null);
  });

  function setFormModel() {
    for (let index = 0; index < itemRefs.value.length; index++) {
      if (itemRefs.value[index]) {
        itemRefs.value[index].setFieldsValue(forms.formModels[index]);
      }
    }
  }

  async function setFormData(formData) {
    await nextTick();
    forms.formModels = formData;
    setFormModel();
  }

  function changeActiveIndex(index: number) {
    activeIndex.value = index;
    emits('getFormConfigs', forms.configs[activeIndex.value]);
  }
  function getSystemUploadComponentIds() {
    for (let index = 0; index < itemRefs.value.length; index++) {
      if (itemRefs.value[index] && itemRefs.value[index].getUploadComponentIds) {
        let ids = itemRefs.value[index].getUploadComponentIds();
        uploadComponent.ids = [...uploadComponent.ids, ...ids];
      }
    }
  }
  // 获取上传组件的字段值集合
  function getUploadComponentIds() {
    return uploadComponent.ids;
  }
  async function validateForm() {
    let validateForms: ValidateForms = [];
    for (let index = 0; index < itemRefs.value.length; index++) {
      if (itemRefs.value[index]) {
        try {
          await itemRefs.value[index]?.validate();
          validateForms.push({
            validate: true,
            msgs: [],
            isOldSystem: forms.configs[index].isOldSystem,
          });
          forms.configs[index].validate = true;
        } catch (error: any | Array<{ errors: Array<string>; name: Array<string> }>) {
          validateForms.push({
            validate: false,
            msgs: error?.errorFields,
          });
          forms.configs[index].validate = false;
        }
      }
    }
    return validateForms;
  }

  async function saveDraftData() {
    let formModes = {};

    for (let index = 0; index < forms.configs.length; index++) {
      const ele = forms.configs[index];
      if (ele.formType == FormType.SYSTEM) {
        let values = await itemRefs.value[index].validate();
        formModes[ele.formKey] = values;
      } else {
        formModes[ele.formKey] = ele.formModel;
      }
    }
    return formModes;
  }
  async function getFormModels(saveRowKey,isOnlyActive) {
    let formModes = {};
  for (let index = 0; index < forms.configs.length; index++) {
    if (isOnlyActive && index != activeIndex.value) {
      continue;
    }
    const ele = forms.configs[index];
    if (ele.formType == FormType.SYSTEM) {
      let values = await itemRefs.value[index].workflowSubmit(saveRowKey);
      formModes[ele.formKey] = values;
    } else {
      formModes[ele.formKey] = ele.formModel;
    }
  }

  // forms.configs.forEach((ele) => {
  //   formModes[ele.formKey] = ele.formModel;
  // });
  forms.formEventConfigs.forEach(async (ele, i) => {
    if (isOnlyActive && i != activeIndex.value) {
      return true;
    }
    //此组件 获取数据 就是为了提交表单 所以 表单提交数据 事件 就此处执行
    await submitFormEvent(ele, forms.configs[i]?.formModel);
  });
  return formModes;
  }
  function getSystemType() {
    let system = {};
    for (let index = 0; index < forms.configs.length; index++) {
      const ele = forms.configs[index];
      if (ele.formType == FormType.SYSTEM) {
        system[ele.formKey] = itemRefs.value[index].getIsOldSystem();
      }
    }
    return system;
  }

function handleCancel() {
  itemRefs.value[activeIndex.value].setDisabledForm(true);
  forms.modes[activeIndex.value] = 'view';
  itemRefs.value[activeIndex.value].setFieldsValue(forms.formModels[activeIndex.value]);
}
async function handleDelete() {
  Modal.confirm({
    title: '提示信息',
    icon: createVNode(ExclamationCircleOutlined),
    content: '是否确认删除？',
    okText: '确认',
    cancelText: '取消',
    async onOk() {
      try{
        let formVal = await itemRefs.value[activeIndex.value].getFormModels();
        await itemRefs.value[activeIndex.value].handleDelete(formVal.id)
        message.success('删除成功')
        setTimeout(() => {
            tabStore.closeTab(currentRoute.value, router);
            bus.emit(FLOW_PROCESSED);
        }, 1000)
      } catch (err){
        message.error('删除失败，请稍后再试');
      }
    },
    onCancel() {},
  });
}

async function handleSave() {
  const params = await getFormModels(true, true);
  const code = await updateWorkflow({ 'variables': params, 'processInstanceId': flowInfo.value.processId })

  if (code) {
    message.success(t('保存成功'));
  } else {
    message.success(t('保存失败，请稍后再试'));
  }
  itemRefs.value[activeIndex.value].setDisabledForm(true);
  forms.modes[activeIndex.value] = 'view';
}

function handleEdit() {
  itemRefs.value[activeIndex.value].setDisabledForm(false);
  forms.modes[activeIndex.value] = 'edit';
}

  defineExpose({
    validateForm,
    getFormModels,
    saveDraftData,
    setFormData,
    getUploadComponentIds,
    getSystemType,
    handleEdit,
    handleSave,
    handleCancel,
    handleDelete
  });
</script>

<style lang="less" scoped>
  .form-container {
    display: flex;
    height: 100%;
    margin-top: -10px;
  }

  .box {
    width: 100%;

    .form-left {
      float: left;
      height: 100vh;
      box-shadow: 5px 5px 5px rgb(0 0 0 / 10%);
      z-index: 9998;

      .resize-shrink-sidebar {
        cursor: col-resize;
        display: flex;
        justify-content: center;
        align-items: center;
        position: absolute;
        top: 0;
        bottom: 0;
        right: 0;
        z-index: 9999;

        .shrink-sidebar-text {
          padding: 0 2px;
          background: #f2f2f2;
          border-radius: 10px;
        }
      }

      .left-box {
        margin-right: 10px;
        border-right: 1px solid #f0f0f0;
        height: 80vh;
      }

      span {
        font-size: 16px;
        font-weight: 500;
        padding-left: 4px;
      }

      .form-name {
        height: 36px;
        display: flex;
        align-items: center;
        font-size: 14px;
        cursor: pointer;
        color: rgb(102 102 102 / 99.6%);
        margin-right: -2px;
        padding-left: 4px;
      }

      .actived {
        border-right: 1px solid #5e95ff;
      }

      .dot {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background-color: transparent;
        margin-right: 4px;
      }

      .validate {
        background-color: @clear-color;
      }

      .icon-box {
        font-size: 16px;
        margin-right: 4px;
      }

      .left-title {
        display: flex;
        justify-content: space-between;
        align-items: center;
        position: relative;
        padding: 10px 4px 10px 0;
        top: 0;
        left: 0;

        .in-or-out {
          position: absolute;
          right: 10px;
        }
      }
    }

    .form-box {
      overflow: auto;
      height: calc(100vh - 280px);
    }

    .form-right {
      width: 100%;
      padding-top: 20px;
    }
  }

  .page-bg-wrap {
      background-color: #fff;
  }

  .top-toolbar {
      min-height: 44px;
      margin-bottom: 12px;
      border-bottom: 1px solid #eee;
  }
</style>
