<script lang="ts" setup>
  import { computed } from 'vue';
  import COAPDescription from './COAPDescription.vue';
  import { TransportTypeEnum } from './const';
  import DefaultConfiguration from './DefaultConfiguration.vue';
  import MQTTConfiguration from './MQTTConfiguration.vue';
  import { DeviceRecord } from '/@/api/device/model/deviceModel';

  const props = defineProps<{
    record: DeviceRecord;
  }>();

  const getTransportInfo = computed(() => {
    const { record } = props;
    return record.profileData.transportConfiguration;
  });
</script>

<template>
  <section>
    <DefaultConfiguration
      :record="getTransportInfo"
      v-if="getTransportInfo.type === TransportTypeEnum.DEFAULT"
    />

    <MQTTConfiguration
      :record="getTransportInfo"
      v-if="getTransportInfo.type === TransportTypeEnum.MQTT"
    />

    <COAPDescription
      :record="getTransportInfo"
      v-if="getTransportInfo.type === TransportTypeEnum.COAP"
    />
  </section>
</template>