<script lang="ts" setup>
  import { Table } from 'ant-design-vue';
  import { computed, h } from 'vue';
  import { SNMPDataTypeEnum, SNMPRangeNameEnum } from './const';
  import { DeviceRecord } from '/@/api/device/model/deviceModel';
  import { CollapseContainer } from '/@/components/Container';
  import { DescItem, Description, useDescription } from '/@/components/Description';

  type TransportConfiguration = DeviceRecord['profileData']['transportConfiguration'];

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

  const getSNMPList = computed(() => {
    const { record } = props;
    return record.communicationConfigs;
  });

  const [register] = useDescription({
    layout: 'vertical',
    column: 2,
    data: props.record,
    schema: [
      {
        label: '接入协议',
        field: 'type',
        span: 2,
      },
      {
        label: '超时毫秒',
        field: 'timeoutMs',
      },
      {
        label: '重试次数',
        field: 'retries',
      },
    ],
  });

  const schema: DescItem[] = [
    {
      label: '范围',
      field: 'spec',
      render: (val: string) => getTitle(val),
    },
    {
      label: '查询频率(毫秒)',
      field: 'queryingFrequencyMs',
    },
    {
      label: 'Mapping',
      field: 'mappings',
      render: (val) => {
        return h(Table, {
          size: 'small',
          bordered: true,
          pagination: false,
          columns: [
            {
              title: '数据类型',
              dataIndex: 'dataType',
              customRender: ({ text }) => SNMPDataTypeEnum[text],
            },
            {
              title: 'DataKey',
              dataIndex: 'key',
            },
            {
              title: 'OID',
              dataIndex: 'oid',
            },
          ],
          dataSource: val,
        });
      },
    },
  ];

  const getTitle = (range: string) => {
    return SNMPRangeNameEnum[range];
  };
</script>

<template>
  <Description @register="register" />
  <CollapseContainer
    v-for="(item, index) in getSNMPList"
    :key="index"
    class="mt-4"
    :title="getTitle(item.spec)"
  >
    <Description :data="item" layout="vertical" :column="2" :schema="schema" />
  </CollapseContainer>
</template>
