<template>
  <div>
    <BasicForm @register="register">
      <template #uploadFilesSlot="{ model }">
        <UploadFile
          :url="credentialsFile.caCertFileName"
          :disabled="disabled"
          @fileUrlEmit="handleFileUrlEmitH"
          v-show="model['type'] === CredentialsEnum.IS_PEM"
        />
        <div class="h-4"></div>
        <UploadFile
          :url="credentialsFile.certFileName"
          :disabled="disabled"
          @fileUrlEmit="handleFileUrlEmitC"
          v-show="model['type'] === CredentialsEnum.IS_PEM"
        />
        <div class="h-4"></div>
        <UploadFile
          :url="credentialsFile.privateKeyFileName"
          :disabled="disabled"
          @fileUrlEmit="handleFileUrlEmitB"
          v-show="model['type'] === CredentialsEnum.IS_PEM"
        /> </template
    ></BasicForm>
  </div>
</template>
<script lang="ts" setup name="DataFlowMethodIsApi">
  import { reactive, ref } from 'vue';
  import { BasicForm, useForm } from '/@/components/Form';
  import { modeApiForm } from './config';
  import { modelFormPublicConfig } from '../../../dataflowmodal/config';
  import { UploadFile } from '../../../uploadfile';
  import { CredentialsEnum } from '../mqtt/enum';

  const credentialsFile = reactive({
    caCertFileName: undefined,
    certFileName: undefined,
    privateKeyFileName: undefined,
  });

  const [
    register,
    { validateFields, setFieldsValue, resetFields, setProps, updateSchema, getFieldsValue },
  ] = useForm({
    schemas: modeApiForm,
    ...modelFormPublicConfig,
  });

  const handleFileUrlEmitH = (fileUrl) => (credentialsFile.caCertFileName = fileUrl);

  const handleFileUrlEmitC = (fileUrl) => (credentialsFile.certFileName = fileUrl);

  const handleFileUrlEmitB = (fileUrl) => (credentialsFile.privateKeyFileName = fileUrl);

  const getValue = async () => {
    const values = await getFieldsValue();
    if (!values) return;
    // if (values.type == 'anonymous' || values.type == 'basic') {
    //   credentialsFile.caCertFileName = undefined;
    //   credentialsFile.certFileName = undefined;
    //   credentialsFile.privateKeyFileName = undefined;
    // }
    const credentials = {
      type: values['type'],
      ...credentialsFile,
    };
    const mergeValues = {
      ...values,
      ...{ credentials },
    };
    return mergeValues;
  };

  const validateValue = async () => {
    const values = await validateFields();
    if (!values) return;
    return values;
  };

  const setValue = (value) => {
    const { credentials } = value;
    if (credentials) {
      for (let i in credentials) Reflect.set(credentialsFile, i, credentials[i]);
    }
    setFieldsValue({
      ...value,
      username: value?.credentials.username,
      password: value?.credentials.password,
    });
    setFieldsValue({
      type: credentials.type,
    });
  };

  const resetValue = () => resetFields();

  const disabled = ref<boolean>(false);
  const setDisabledProps = (value) => {
    setProps(value);
    disabled.value = true;
    updateSchema({ field: 'headers', componentProps: { disabled: false } });
  };

  const setCancelDisabled = () => {
    updateSchema({ field: 'headers', componentProps: { disabled: false } });
  };

  defineExpose({
    getValue,
    setValue,
    resetValue,
    setDisabledProps,
    setCancelDisabled,
    validateValue,
  });
</script>

<style lang="less" scoped></style>