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

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

  const [register, { validateFields, setFieldsValue, resetFields }] = useForm({
    schemas: modeMqttForm,
    ...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 validateFields();
    if (!values) return;
    const credentials = {
      type: values['type'],
      ...credentialsFile,
    };
    const mergeValues = {
      ...values,
      ...{ credentials },
    };
    return mergeValues;
  };

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

  const resetValue = () => resetFields();
  defineExpose({
    getValue,
    setValue,
    resetValue,
  });
</script>

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