<template>
  <div style="border: 1px solid gray; margin-left: 0.1vw; border-radius: 5px; padding-left: 1.5vw">
    <div style="margin-top: 1.2vh">
      <BasicForm :showResetButton="false" :showSubmitButton="false" @register="register">
        <template #descSlot>
          <div style="width: 47rem; margin-left: 2rem">
            <p>
              {{ t('deviceManagement.product.mqttTopicHelpText') }}
            </p>
          </div>
        </template>
        <template #desc1>
          <div style="width: 47rem; margin-left: 2rem">
            <p>
              {{ t('deviceManagement.product.mqttEnableProtobufHelpText') }}
            </p>
          </div>
        </template>
        <template #desc2>
          <div style="width: 47rem; margin-left: 2rem">
            <p>
              {{ t('deviceManagement.product.mqttEnablePayloadCompatibilityHelpText') }}
            </p>
          </div>
        </template>
      </BasicForm>
    </div>
  </div>
</template>
<script lang="ts" setup>
  import { reactive } from 'vue';
  import { BasicForm, useForm } from '/@/components/Form';
  import { MqttSchemas } from './Mqtt';
  import { useI18n } from '/@/hooks/web/useI18n';

  const { t } = useI18n();
  const emits = defineEmits(['prev']);

  const allMqttData: any = reactive({
    mqttData: {},
  });
  const transportMqttData: any = reactive({
    transportPayloadTypeConfiguration: {
      transportPayloadType: null,
      enableCompatibilityWithJsonPayloadFormat: false,
      useJsonPayloadFormatForDefaultDownlinkTopics: false,
      deviceAttributesProtoSchema: null,
      deviceRpcRequestProtoSchema: null,
      deviceRpcResponseProtoSchema: null,
      deviceTelemetryProtoSchema: null,
    },
    type: 'MQTT',
  });

  const [register, { validate, resetFields, setFieldsValue }] = useForm({
    labelWidth: 180,
    schemas: MqttSchemas,
    actionColOptions: {
      span: 14,
    },
  });
  const setFormData = (v) => {
    setFieldsValue(v);
    setFieldsValue({
      ...v?.transportPayloadTypeConfiguration,
    });
  };
  const resetFormData = () => {
    resetFields();
  };
  function customResetFunc() {
    emits('prev');
  }
  const getFormData = async () => {
    let val = await validate();
    if (!val) return;
    for (let o in val) {
      for (let u in transportMqttData) {
        if (u === 'transportPayloadTypeConfiguration') {
          for (let t in transportMqttData.transportPayloadTypeConfiguration) {
            if (t === o) {
              Reflect.set(transportMqttData.transportPayloadTypeConfiguration, t, val[t]);
            }
          }
        }
      }
    }
    for (let i in val) {
      if (i !== 'deviceAttributesTopic' && i !== 'deviceTelemetryTopic') {
        Reflect.deleteProperty(val, i);
      }
    }
    allMqttData.mqttData = {
      ...val,
      ...transportMqttData,
    };
    return allMqttData.mqttData;
  };
  defineExpose({
    getFormData,
    resetFormData,
    setFormData,
    customResetFunc,
  });
</script>
<style lang="less" scoped></style>