<template>
  <div>
    <BasicModal
      v-if="config.formType === 'modal'"
      @register="registerModal"
      :title="t('表单预览')"
      :height="config?.formHeight ? config.formHeight : null"
      @cancel="handleCloser"
    >
      <div class="py-4">
        <SimpleForm
          ref="formRef"
          :formProps="state.formProps"
          :formModel="state.formModel"
          :isCamelCase="!isCustomForm"
        />
      </div>
      <template #footer v-if="buttonList && buttonList.length > 0">
        <template v-for="(item, index) in sortBy(buttonList, 'index')" :key="item.key">
          <template v-if="item.isShow">
            <CustomButtonModal v-if="item.type == CustomButtonModalType.Modal" :info="item" />
            <a-button :type="item.style" v-else :style="{ marginLeft: index > 0 ? '10px' : 0 }">
              {{ t(item.name) }}
            </a-button>
          </template>
        </template>
      </template>
    </BasicModal>
    <BasicDrawer
      v-else
      v-bind="$attrs"
      showFooter
      @register="registerDrawer"
      @close="handleCloser"
      :title="t('表单预览')"
    >
      <div>
        <SimpleForm
          ref="formRef"
          :formProps="state.formProps"
          :formModel="state.formModel"
          :isCamelCase="!isCustomForm"
        >
        </SimpleForm>
      </div>
      <template #footer v-if="buttonList && buttonList.length > 0">
        <template v-for="(item, index) in sortBy(buttonList, 'index')" :key="item.key">
          <template v-if="item.isShow">
            <CustomButtonModal v-if="item.type == CustomButtonModalType.Modal" :info="item" />
            <a-button :type="item.style" :style="{ marginLeft: index > 0 ? '10px' : 0 }">
              {{ t(item.name) }}
            </a-button>
          </template>
        </template>
      </template>
    </BasicDrawer>
  </div>
</template>
<script lang="ts" setup>
  import { reactive, ref, inject } from 'vue';
  import SimpleForm from '/@/components/SimpleForm/src/SimpleForm.vue';
  import { BasicDrawer, useDrawerInner } from '/@/components/Drawer';
  import { BasicModal, useModalInner } from '/@/components/Modal';
  import { buildOption } from '/@/utils/helper/designHelper';
  import { useI18n } from '/@/hooks/web/useI18n';
  import { sortBy } from 'lodash-es';
  import { buttonListInfo } from '../types';
  import { CustomButtonModalType } from '/@/enums/userEnum';
  import CustomButtonModal from '/@/components/Form/src/components/CustomButtonModal.vue';
  const { t } = useI18n();
  const props = defineProps({
    config: {
      type: Object,
      default: () => {
        return {};
      },
    },
    buttonList: Array<buttonListInfo>,
  });
  const state = reactive({
    formProps: {} as any,
    formModel: {},
  });

  const formRef = ref();

  const isCustomForm = inject<boolean>('isCustomForm', false);

  //使用表单钩子  注册表单  获取到 操作表单的方法
  const [registerModal, { setModalProps }] = useModalInner(async (data) => {
    if (props.config.formType === 'modal') {
      handleInner(data, setModalProps);
    }
  });
  //使用抽屉内部钩子   获取到 操作抽屉的方法
  const [registerDrawer, { setDrawerProps }] = useDrawerInner(async (option) => {
    if (props.config.formType === 'drawer') {
      handleInner(option, setDrawerProps);
    }
  });

  //关闭方法
  const handleCloser = () => {
    formRef.value!.resetFields(); //重置表单
    state.formProps = {};
  };
  async function handleInner(option, setPropsData?) {
    setPropsData({
      destroyOnClose: true,
      width: option?.config?.formWidth || 800,
      canFullscreen: true,
    });

    setTimeout(() => {
      formRef.value.setProps({
        ...buildOption(option, !isCustomForm),
      });
      formRef.value.setDefaultValue();
      formRef.value.resetFields();
    }, 50);
  }
</script>
