<template>
  <div
    style="
      margin-top: -5vh;
      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>
              支持单[+]和多级[#]通配符。 [+] is suitable for any topic filter
              level。例如：v1/devices/+/telemetry or +/devices/+/attributes。 [#]可以替换 topic
              filter 本身，并且必须是 topic 的最后一个符号。例如：# or v1/devices/me/#。
            </p>
          </div>
        </template>
        <template #desc1>
          <div style="width: 47rem; margin-left: 2rem">
            <p>
              启用时，默认情况下，平台将使用Protobuf有效载荷格式。如果解析失败，平台将尝试使用JSON负载格式。
              有助于固件更新期间的向后兼容性。例如，固件的初始版本使用Json，而新版本使用Protobuf。
              在设备组的固件更新过程中，需要同时支持Protobuf和JSON。兼容性模式会导致性能略有下降，
              因此建议在更新所有设备后禁用此模式。
            </p>
          </div>
        </template>
        <template #desc2>
          <div style="width: 47rem; margin-left: 2rem">
            <p>
              启用后，平台将使用Json负载格式通过以下主题推送属性
              和RPC:v1/devices/me/attributes/response/$request\u id、v1/devices/me/attributes、
              v1/devices/me/RPC/request/$request\u id、v1/devices/me/RPC/response/$request\u id。
              此设置不会影响使用新（v2）主题发送的属性和rpc订阅： v2/a/res/$request\u
              id、v2/a、v2/r/req/$request\u id、v2/r/res/$request\u id。 其中，$request\u
              id是整数请求标识符。
            </p>
          </div>
        </template>
      </BasicForm>
    </div>
  </div>
</template>
<script lang="ts" setup>
  import { reactive } from 'vue';
  import { BasicForm, useForm } from '/@/components/Form';
  import {
    MqttSchemas,
    // deviceTelemetryProtoSchemaData,
    // deviceAttributesProtoSchemaData,
    // deviceRpcRequestProtoSchemaData,
    // deviceRpcResponseProtoSchemaData,
  } from './Mqtt';

  const emits = defineEmits(['prev']);

  let allMqttData: any = reactive({});
  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;
    delete val.desc;
    transportMqttData.transportPayloadTypeConfiguration.transportPayloadType =
      val.transportPayloadType;
    transportMqttData.transportPayloadTypeConfiguration.enableCompatibilityWithJsonPayloadFormat =
      val.enableCompatibilityWithJsonPayloadFormat;
    transportMqttData.transportPayloadTypeConfiguration.useJsonPayloadFormatForDefaultDownlinkTopics =
      val.useJsonPayloadFormatForDefaultDownlinkTopics;
    transportMqttData.transportPayloadTypeConfiguration.deviceAttributesProtoSchema =
      val.deviceAttributesProtoSchema;
    transportMqttData.transportPayloadTypeConfiguration.deviceRpcRequestProtoSchema =
      val.deviceRpcRequestProtoSchema;
    transportMqttData.transportPayloadTypeConfiguration.deviceRpcResponseProtoSchema =
      val.deviceRpcResponseProtoSchema;
    transportMqttData.transportPayloadTypeConfiguration.deviceTelemetryProtoSchema =
      val.deviceTelemetryProtoSchema;
    allMqttData = {
      ...val,
      ...transportMqttData,
    };
    delete allMqttData.deviceTelemetryProtoSchema;
    delete allMqttData.deviceAttributesProtoSchema;
    delete allMqttData.deviceRpcRequestProtoSchema;
    delete allMqttData.deviceRpcResponseProtoSchema;
    delete allMqttData.useJsonPayloadFormatForDefaultDownlinkTopics;
    delete allMqttData.enableCompatibilityWithJsonPayloadFormat;
    delete allMqttData.transportPayloadType;
    return allMqttData;
  };
  defineExpose({
    getFormData,
    resetFormData,
    setFormData,
    customResetFunc,
  });
</script>
<style lang="less" scoped></style>