<template>
  <div style="width: 100%; height: 100%">
    <div style="display: none">
      <!--选择用户、行政组、组织等-->
      <h-b-custom-select
        ref="customFormSelectRef"
        v-model:value="selectValue"
        v-bind="selectProps"
        @confirm="customFormSelecConfirm"
      />
      <!--编码器-->
      <h-b-encoder
        class="custom-form-encoder"
        v-model:value="coderValue"
        v-bind="coderProps"
        id="custom-form-coder"
      ></h-b-encoder>
    </div>
    <iframe
      ref="formbuilderDom"
      id="custom-form-iframe"
      class="iframe-form-builder"
      src="/form/index.html"
      frameborder="0"
      width="100%"
      height="100%"
      scrolling="no"
      @load="onLoad"
    ></iframe>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, reactive } from 'vue';
import { CustomFormProps } from './index';

import type { IPageData } from './localeMethods';
import { customPopup } from './localeMethods';
import { HMessage } from '@crami/ui';
export default defineComponent({
  name: 'CustomForm',
  props: CustomFormProps,
  setup(props, { emit }) {
    let formbuilderDom = ref();
    let formMethods = ref();

    // 自定义弹窗选择用户、组织、行政组
    const customFormSelectRef = ref();
    const selectValue = ref([]);
    const selectProps = reactive<any>({
      valueType: 'string',
      hasPath: '1',
      // componentType: 'user',
      // dataQueryType: 'company',
      // width: '368px',
    });

    // 编码器
    const coderValue = ref('');
    const coderProps = reactive<any>({
      // productConnect: 'MYSQL',
      // connect: 'MYSQL',
      // lang: 'zhs',
      // companyId: 'P_SYS_COMPANY_155f6a331e804b69a6fc47e6273699fc',
      // user_id: 'P_SYS_USER_0162a3c2c85c45f2b4fa3baffc350d6d',
      // objectId: 'P_SYS_CODE_SCHEME:CODETEST',
      // modelName: 'P_SYS_CODE_SCHEME',
      // compentField: 'CODETEST',
      // formParams: {
      //   productConnect: 'MYSQL',
      // },
    });

    // 初始化布局及数据
    const onLoad = () => {
      formbuilderDom.value = document.getElementById('custom-form-iframe');
      formMethods.value = formbuilderDom.value.contentWindow.methods;
      // 添加一些自定义的方法
      emit('onLoad');
      if (props.isInit) {
        init();
      }
    };
    const pageData = reactive<IPageData>({
      customFormSelectRef,
      selectProps,
      selectValue,
      coderProps,
      coderValue,
      confirm: null,
    });
    const throwError = function (error) {
      //级联函数报错
      if (error.errorType == 'exeError') {
        HMessage.error('级联函数错误,位置-x:' + error?.options?.x + 'y:' + error?.options?.y);
        HMessage.error(error?.message);
      }
    };
    const customControlClick = (data, originData) => {
      customPopup(data, pageData, originData);
    };
    const init = () => {
      const newProps = {
        ...props,
        events: {
          customControlClick,
          designSave: function () {
            props.designSave();
          },
          error: function (error) {
            throwError(error);
          },
        },
      };
      formMethods.value.init(newProps);
    };

    // 加载数据
    const loadData = data => {
      formMethods.value.loadData(data);
    };
    // 获取数据
    const getData = () => {
      return formMethods.value.getData();
    };

    // 校验
    const check = () => {
      return formMethods.value.check();
    };

    const onChange = value => {
      console.log(value);
    };
    const loadFileData = value => {
      return formMethods.value.loadFileData(value);
    };
    const customFormSelecConfirm = data => {
      if (pageData.confirm) {
        pageData.confirm();
      }
    };
    const getDesignUtils = () => {
      return formMethods.value.getDesignUtils();
    };

    const getApplyUtils = () => {
      return formMethods.value.getApplyUtils();
    };
    const getExport = () => {
      return formMethods.value.getExport();
    };
    return {
      formbuilderDom,
      formMethods,

      // 自定义选择人员、组织、行政组等的相关参数
      customFormSelectRef,
      selectValue,
      selectProps,
      // 编码器的相关参数
      coderValue,
      coderProps,
      // 弹框相关
      pageData,

      init,
      loadData,
      getData,
      onLoad,
      onChange,
      loadFileData,
      check,
      customFormSelecConfirm,
      getDesignUtils,
      getApplyUtils,
      getExport,
    };
  },
});
</script>
