<template>
  <h-b-form ref="formRef" name="use" v-bind="formProps"></h-b-form>
</template>

<script lang="ts">
import { defineComponent, computed } from 'vue';
import { useForm } from '@crami/bui-platform';
import { getInfo, ICP_CONFIG } from '@remote/icpx-platform/utils';
import { useI18n } from '@crami/locale';
/**控件对外数据*/
const formProps = {
  options: {
    type: Object,
  },
  data: {
    type: Object,
  },
  componentProps: {
    type: Object,
  },
};
export default defineComponent({
  name: 'ResetPass',
  props: formProps,
  setup: (props: any, { emit }) => {
    console.log('props', props.componentProps?.params);
    const { t } = useI18n();

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

    // 第二种方法，useForm调用查询方法
    const [formRef, formProps, formMethods] = useForm(
      {
        isAutoSave: 'true',
        immediate: true,
        saveApi: {
          url: '/' + props.componentProps?.params?.saveDataParams?.saveUrl,
          method: 'post',
          type: 'json',
        },

        // 设置form的各种配置信息
        beforeSetData: (type, props) => {
          if (type === 'config') {
            const _props: any = {
              submitter: {
                showActionButtonGroup: !isStudioButton.value,
                //   showActionButtonGroup: true, // 显示按钮组
                //   showAdvancedButton: false, // 显示展开收起按钮
                isQuery: false, // 是否为查询表单
                //   autoSubmitOnEnter: true,
                // alwaysShowLines: 1, //  固定展开的行数
                // autoAdvancedLine: 1, // 默认展开的行数
                submitOnReset: false,
                searchConfig: { resetText: t('platform.common.cancel') },
                onReset: () => {
                  formMethods.clearValidate();
                  emit('end');
                },
              },
              // column: 2, // 一行展示几个
              layout: 'vertical',
              isQuery: false,
              labelCol: { span: 12 },
              wrapperCol: { span: 24 },
              model: initData(), // 初始化值以及编辑回填值
              uniqueParams: uniqueParams(),
            };
            formMethods.setProps(_props, props);
            formMethods.updateSchema(
              {
                dataIndex: 'USER_PWD',
                title: t('resetPassword.userPws'),
                valueType: 'Input',
                fieldProps: {
                  placeholder: '请输入新密码',
                },
                formItemProps: {
                  rules: [
                    {
                      required: true,
                      message: t('resetPassword.userPwsMsg'),
                      trigger: 'blur',
                    },
                    {
                      message: t('resetPassword.userPwsPatternMsg'),
                      pattern: /^([A-Za-z0-9_]{1,100})$/,
                      trigger: 'blur',
                    },
                  ],
                },
              },
              props,
            );
          }
          return props;
        },
      },
      undefined,
      emit,
      {
        ...(props.componentProps?.params || {}),
      },
    );

    const initData = () => {
      return props.componentProps?.params?.setFormItem;
    };

    const uniqueParams = () => {
      return {
        objectType:
          props.componentProps.params != undefined ? props.componentProps.params.modelName : '', //唯一性校验
        NewObject: true, //唯一性校验
        connect: getInfo(ICP_CONFIG)?.connect,
        // type: 'view',
        lang: getInfo(ICP_CONFIG)?.lang,
      };
    };

    const ok = () => {
      // hbform 点击确认可以直接调用如下方法，内嵌保存数据处理和弹窗关闭
      // formMethods是调用useForm时定义
      formMethods.handleSubmit();
    };

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

    return {
      formRef,
      formProps,
      ok,
      cancel,
    };
  },
});
</script>
<style lang="less" scoped>
:deep(.ant-form-vertical .ant-col) {
  margin-left: 0 !important;
}
</style>
