<script lang="ts" setup>
  import { Input, Tabs } from 'ant-design-vue';
  import { computed, h, unref } from 'vue';
  import {
    BindingNameEnum,
    FirmwareUpdateStrategyNameEnum,
    PowerModeNameEnum,
    SecurityModeNameEnum,
  } from './const';
  import { Bootstrap, ClientSettings, DeviceRecord } from '/@/api/device/model/deviceModel';
  import { CollapseContainer } from '/@/components/Container';
  import { useDescription, Description, DescItem } from '/@/components/Description';

  type TransportConfiguration = DeviceRecord['profileData']['transportConfiguration'];
  const props = defineProps<{
    record: TransportConfiguration;
  }>();

  enum TabKeyEnum {
    LWM2M_MODEL = 'LWM2M Model',
    BOOTSTRAP = 'Bootstrap',
    OTHER_SETTINGS = 'Other settings',
    JSON_CONFIG_PROFILE_DEVICE = 'JSON Config Profile Device',
  }

  const getBootstrapSetting = computed(() => {
    const { record } = props;
    return record.bootstrap;
  });

  const getOtherSetting = computed(() => {
    const { record } = props;
    return record.clientLwM2mSettings;
  });

  const [registerLWM2MModel] = useDescription({
    layout: 'vertical',
    column: 2,
    data: {},
    schema: [
      {
        field: 'objectList',
        label: '对象列表',
        render: () => h('div', { class: 'min-h-6' }),
      },
    ],
  });

  const getCollapseTitle = (item: Bootstrap) => {
    return `LwM2M Server        Short server ID: ${item.shortServerId}        Security config mode: ${item.securityMode}`;
  };

  const bootstrapDescriptionSchema: DescItem[] = [
    {
      label: '安全配置',
      field: 'securityMode',
      render: (_, data: Bootstrap) => SecurityModeNameEnum[data.securityMode],
    },
    {
      label: '短服务器ID',
      field: 'shortServerId',
    },
    {
      label: '主机',
      field: 'host',
    },
    {
      label: '端口',
      field: 'port',
    },
    {
      label: '延迟时间',
      field: 'clientHoldOffTime',
    },
    {
      label: '超时后的账户',
      field: 'bootstrapServerAccountTimeout',
    },
    {
      label: '注册生存期',
      field: 'lifetime',
    },
    {
      label: '两次通知之间的最小周期',
      field: 'defaultMinPeriod',
    },
    {
      label: 'Binding',
      field: 'binding',
      span: 2,
      render: (_, data: Bootstrap) => BindingNameEnum[data.binding],
    },
    {
      label: '禁用或脱机时的通知存储',
      field: 'notifIfDisabled',
      render: (_, data: Bootstrap) => (data.notifIfDisabled ? '启用' : '禁用'),
    },
  ];
  const [registerOtherSettings] = useDescription({
    layout: 'vertical',
    column: 2,
    data: unref(getOtherSetting),
    schema: [
      {
        label: '固件更新策略',
        field: 'fwUpdateStrategy',
        span: 2,
        render: (_, data: ClientSettings) => FirmwareUpdateStrategyNameEnum[data.fwUpdateStrategy],
      },
      {
        label: '固件更新COAP资源',
        field: 'fwUpdateResource',
        span: 2,
      },
      {
        label: '软件更新策略',
        field: 'swUpdateStrategy',
        span: 2,
        render: (_, data: ClientSettings) => FirmwareUpdateStrategyNameEnum[data.swUpdateStrategy],
      },
      {
        label: '软件更新COAP资源',
        field: 'swUpdateResource',
        span: 2,
      },
      {
        label: '节能模式',
        field: 'powerMode',
        render: (_, data: ClientSettings) => PowerModeNameEnum[data.powerMode],
      },
      {
        label: 'PSM活动计时器',
        field: 'edrxCycle',
      },
      {
        label: 'PSM活动计时器单位',
        field: 'edrxCycleTimeUnit',
        render: () => '秒',
      },
      {
        label: '支持复合读/写观察操作',
        field: '',
        render: () => '禁用',
      },
    ],
  });

  const [registerJSONConfig] = useDescription({
    layout: 'vertical',
    column: 2,
    data: props.record,
    schema: [
      {
        field: 'json',
        label: 'LWM2M',
        render: (_, data: TransportConfiguration) => {
          return h(Input.TextArea, { value: JSON.stringify(data, null, 2), autoSize: true });
        },
      },
    ],
  });
</script>

<template>
  <Tabs>
    <Tabs.TabPane :tab="TabKeyEnum.LWM2M_MODEL" :key="TabKeyEnum.LWM2M_MODEL">
      <Description @register="registerLWM2MModel" />
    </Tabs.TabPane>
    <Tabs.TabPane :tab="TabKeyEnum.BOOTSTRAP" :key="TabKeyEnum.BOOTSTRAP">
      <CollapseContainer
        v-for="(item, index) in getBootstrapSetting"
        :key="index"
        :title="getCollapseTitle(item)"
        class="mt-4"
      >
        <Description
          layout="vertical"
          :column="2"
          :schema="bootstrapDescriptionSchema"
          :data="item"
        />
      </CollapseContainer>
    </Tabs.TabPane>
    <Tabs.TabPane :tab="TabKeyEnum.OTHER_SETTINGS" :key="TabKeyEnum.OTHER_SETTINGS">
      <Description @register="registerOtherSettings" />
    </Tabs.TabPane>
    <Tabs.TabPane
      :tab="TabKeyEnum.JSON_CONFIG_PROFILE_DEVICE"
      :key="TabKeyEnum.JSON_CONFIG_PROFILE_DEVICE"
    >
      <Description @register="registerJSONConfig" />
    </Tabs.TabPane>
  </Tabs>
</template>