<template>
  <!--TODO: 页面高度先写死-->
  <div class="main-content-padding" style="height: 800px">
    <h-icon
      name="hoteam-back"
      :size="40"
      title="返回"
      class="hoteam-back"
      color="#1890ff"
      @click="goBack"
    >
      返回
    </h-icon>
    <div class="btn_style" v-if="formProps.currentModel == 'new'">
      <h-button class="btn_save" @click="saveData" type="primary">
        {{ t('FormDesign.common.save') }}
      </h-button>
      <h-button @click="deleteData">{{ t('FormDesign.list.delete') }}</h-button>
    </div>
    <!-- 表单填报 -->
    <form-apply
      ref="FormApplyRef"
      :componentProps="formProps"
      class="form_style"
      height="100%"
    ></form-apply>
  </div>
</template>
<!-- 新建表单实例 -->
<script lang="ts">
import { createVNode, defineComponent, onMounted, reactive, ref, toRefs } from 'vue';
import { useI18n } from '@crami/locale';
import { HModal, Icon, message } from '@crami/ui';
import FormApply from '../FormApply/Index.vue';
import { useRouter } from 'vue-router';
// import { useMultiTab } from '@/components/multi-tab';
import { deleteFbObjectData } from '@/api/platform/form';
export default defineComponent({
  components: { FormApply },
  // props: {
  //   componentProps: {
  //     type: Object,
  //   },
  // },
  setup() {
    const { t } = useI18n();
    // TODO: 暂时去掉多页签
    // const [{ close }] = useMultiTab();
    const router = useRouter();
    const formProps = router.currentRoute.value.query;
    // const formProps = toRefs(prop.componentProps.data);
    const FormApplyRef = ref();
    let objectId = null;
    const saveData = async () => {
      FormApplyRef.value
        ?.validate()
        .then(res => {
          if (res) {
            // 验证通过 执行保存
            //先判断有没有objectId,有就是更新保存，没有就是新增保存
            if (objectId) {
              formProps.newVersion = 'false';
              formProps.ObjectID = objectId;
            }
            doSaveData();
          } else {
            message.error(t('FormDesign.list.formCheckFailed'));
            return;
          }
        })
        .catch(e => {
          console.log(e);
        });
    };
    const doSaveData = async () => {
      // 保存表单填报的数据
      const objID = await FormApplyRef.value?.saveFormData();
      if (objID) {
        // formDataEid.value = objID;
        // doSubmit(objID);
        // HModal.destroyAll();
        objectId = objID;
        message.success(t('FormDesign.common.saveSuccess'));
      } else {
        message.error(t('FormDesign.list.saveFailed'));
        return;
      }
    };
    const deleteData = () => {
      HModal.confirm({
        closable: true,
        icon: createVNode(Icon, {
          name: 'icp-exclamation-circle-filled',
          size: 24,
          style: {
            float: 'left',
            marginRight: '8px',
          },
        }),
        title: t('FormDesign.common.deleteTitle'),
        content: t('FormDesign.common.deleteMsg3'),
        onOk() {
          //判断是否存在objectId，没有证明新建还未保存，直接关闭弹框
          if (objectId) {
            return new Promise((resolve, reject) => {
              deleteFbObjectData(objectId).then(data => {
                if (data.code == 200) {
                  message.success(data.msg);
                  // refreshCurrentData();
                  // close(router.currentRoute.value.path);
                } else {
                  message.error(data.msg);
                }
                resolve(true);
              });
            }).catch(err => console.log('Oops errors!', err));
          } else {
            message.success(t('FormDesign.common.deleteSuccess'));
            // close(router.currentRoute.value.path);
          }
        },
      });

      // close(router.currentRoute.value.path);
    };

    const goBack = () => {
      router.push('/FormQuery');
    };
    onMounted(() => {
      let a = document.getElementById('custom-form-iframe').querySelector('#formbuilder');

      // a = '900px';
      console.log('a :>> ', a);
      // console.log('b :>> ', b);
    });
    return {
      t,
      FormApplyRef,
      formProps,
      saveData,
      deleteData,
      objectId,
      goBack,
    };
  },
});
</script>
<style lang="less" scoped>
.form_style {
  height: calc(100% - 40px) !important;
}
.btn_style {
  // align-items: center;
  justify-content: right;
  display: flex;
  position: sticky;
  bottom: 0;
  padding: 10px;
  box-shadow: 0 -9px 16px 0 rgb(74 85 107 / 7%);
  background-color: white;
}
.btn_save {
  margin-right: 10px;
}
.formbuilder {
  height: 700px !important;
}
</style>
