<template>
  <h-b-form
    ref="formRef"
    name="use"
    :model="data"
    v-bind="formProps"
    @finish="onFinish"
    class="hoteam-b-description-form platform-b-description-form"
    :submitter="{
      showActionButtonGroup: !isStudioButton,
      isQuery: false, // 是否为查询表单
      showSubmitButton: false,
      submitOnReset: false,
      searchConfig: { resetText: t('platform.common.close') },
      readOnly: true,
      onReset: onReset,
    }"
  ></h-b-form>
</template>

<script lang="ts">
import { defineComponent, computed } from 'vue';
import { useForm } from '@crami/bui-platform';
import { commonApi } from '@/api/commonApi/index';
import { useI18n } from '@crami/locale';
import { merge } from 'lodash-es';
/**控件对外数据*/
const props = {
  options: {
    type: Object,
  },
  componentProps: {
    type: Object,
  },
};
export default defineComponent({
  name: 'View',
  props: props,
  setup: (props: any, { emit }) => {
    const { t } = useI18n();
    console.log('props', props);

    // 计算studio是否配置弹窗按钮
    const isStudioButton = computed(() => {
      const paramsKeys = Object.keys(props.componentProps?.params); //取出配置信息key
      return paramsKeys.includes('okText');
    });

    // const initFormData = props.componentProps?.params.records;
    // 第二种方法，useForm调用查询方法
    const [formRef, formProps, formMethods] = useForm(
      {
        configApi: {
          url: commonApi().studioCache.getMetaInfo.url,
          params: {
            ...props.componentProps?.params,
            ...commonApi().studioCache.getMetaInfo.params,
            // type:(props.data && props.data.params != undefined) ? props.data.params?.type : 'form_view',
            // type: 'form',
            type: props?.componentProps?.params?.formType
              ? props.componentProps.params.formType
              : 'form',
            productLine:
              props.componentProps && props.componentProps.params != undefined
                ? props.componentProps.params.project
                : '',
            mode: 'edit',
            name:
              props.componentProps && props.componentProps.params != undefined
                ? props.componentProps.params.modelName
                : '',
          },
          method: commonApi().studioCache.getMetaInfo.method,
        },
        dataSourceApi: {
          url: commonApi().system.getObjectDataTestList.url,
          method: commonApi().system.getObjectDataTestList.method,
          params: {
            ...commonApi().system.getObjectDataTestList.params,
            ...(props.componentProps?.params?.getDataParams || {}),
          },
        },
        // 设置form的各种配置信息
        beforeSetData: (type, props) => {
          if (type === 'config') {
            const _props: any = {
              // submitter: {
              //   //   showActionButtonGroup: true, // 显示按钮组
              //   //   showAdvancedButton: false, // 显示展开收起按钮
              //   isQuery: false, // 是否为查询表单
              //   //   autoSubmitOnEnter: true,
              //   // alwaysShowLines: 1, //  固定展开的行数
              //   // autoAdvancedLine: 1, // 默认展开的行数
              //   // showActionButtonGroup:false,//按钮全部隐藏
              //   showSubmitButton: false,
              //   submitOnReset: false,
              //   searchConfig: { resetText: '关闭' },
              //   readOnly: true,
              //   onReset: () => {
              //     formMethods.clearValidate();
              //     emit('end');
              //   },
              // },
              column: 1, // 一行展示几个
              isQuery: false,
              // model: initFormData,
              // 此处修改不更新HT-TCL，只用于平台
              readonly: true,
              // disabled: true,
            };
            formMethods.setProps(_props, props);
          }
          return props;
        },

        immediate: true,
        modelParams: props.componentProps?.params || {},
      },
      undefined,
      emit,
      {},
    );
    merge(formProps.submitter, {
      searchConfig: { resetText: t('platform.common.cancel') },
    });
    const onFinish = (values: any) => {
      emit('end', values);
      console.log('Success:', values);
    };

    const onReset = () => {
      formMethods.clearValidate();
      emit('end');
    };

    const ok = () => {
      // 关闭弹窗事件
      emit('end', null);
    };

    return {
      t,
      FormData,
      formProps,
      formRef,
      onFinish,
      onReset,
      isStudioButton,
      ok,
    };
  },
});
</script>
