<template>
  <div style="">
    <Tabs
      v-model:activeKey="currentKey"
      :size="currentSize"
      :animated="true"
      @change="handleChange"
    >
      <TabPane key="1" tab="LWM2M Model">
        <BasicForm :showResetButton="false" :showSubmitButton="false" @register="registerModel" />
      </TabPane>
      <TabPane key="2" tab="Servers">
        <div style="display: flex; width: 43vw; border: 1px solid gray; border-radius: 5px">
          <div style="margin-left: -4.6vw; margin-top: 1.5vh">
            <BasicForm
              :showResetButton="false"
              :showSubmitButton="false"
              @register="registerServer"
            />
          </div>
        </div>
      </TabPane>
      <TabPane key="3" tab="Other settings">
        <div
          style="
            display: flex;
            width: 43vw;
            border: 1px solid gray;
            border-radius: 5px;
            overflow: hidden;
          "
        >
          <div style="margin-left: -2vw; margin-top: 1.5vh">
            <BasicForm
              :showResetButton="false"
              :showSubmitButton="false"
              @register="registerSettings"
            />
          </div>
        </div>
      </TabPane>
      <TabPane key="4" tab="Json Config Profile Device">
        <BasicForm :showResetButton="false" :showSubmitButton="false" @register="registerDevice" />
      </TabPane>
    </Tabs>
  </div>
</template>

<script lang="ts">
  import { defineComponent, ref, reactive, nextTick } from 'vue';
  import { Tabs } from 'ant-design-vue';
  import { BasicForm, useForm } from '/@/components/Form';
  import { modelSchemas, serverSchemas, settingsSchemas, deviceSchemas } from './index';

  export default defineComponent({
    name: 'index',
    components: {
      Tabs,
      TabPane: Tabs.TabPane,
      BasicForm,
    },
    setup() {
      const currentKey = ref('1');
      const currentSize = ref('large');
      let allObj: any = reactive({});
      let allEchoObj: any = reactive({});
      let allEchoStatus = ref(false);
      let bootstrapObj = reactive({
        servers: {},
        bootstrapServer: {},
        lwm2mServer: {},
      });
      let clientLwM2mSettingsObj = reactive({});
      let observeAttrObj = reactive({
        attribute: [],
        attributeLwm2m: {},
        keyName: {},
        observe: [],
        telemetry: [],
      });

      const [
        registerModel,
        { resetFields: resetObjectListValue, getFieldsValue: getObjectListValue },
      ] = useForm({
        labelWidth: 100,
        schemas: modelSchemas,
        actionColOptions: {
          span: 14,
        },
      });
      const [
        registerServer,
        {
          resetFields: resetServerValue,
          validate: serverValidate,
          setFieldsValue: serverSetFieldsValueFunc,
        },
      ] = useForm({
        labelWidth: 180,
        schemas: serverSchemas,
        actionColOptions: {
          span: 14,
        },
      });
      const [
        registerSettings,
        {
          resetFields: resetSettingsValue,
          validate: settingsValidate,
          setFieldsValue: settingsSetFieldsValueFunc,
        },
      ] = useForm({
        labelWidth: 180,
        schemas: settingsSchemas,
        actionColOptions: {
          span: 14,
        },
      });
      const [registerDevice, { resetFields: resetDeviceValue, getFieldsValue: getDeviceValue }] =
        useForm({
          labelWidth: 100,
          schemas: deviceSchemas,
          actionColOptions: {
            span: 14,
          },
        });

      const handleChange = (e) => {
        if (allEchoStatus.value) {
          switch (e) {
            case '1':
              break;
            case '2':
              nextTick(() => {
                serverSetFieldsValueFunc({
                  //servers
                  binding: allEchoObj?.bootstrap?.servers?.binding,
                  shortId: allEchoObj?.bootstrap?.servers?.shortId,
                  lifetime: allEchoObj?.bootstrap?.servers?.lifetime,
                  notifIfDisabled: allEchoObj?.bootstrap?.servers?.notifIfDisabled,
                  defaultMinPeriod: allEchoObj?.bootstrap?.servers?.defaultMinPeriod,
                  bootstrapServerAccountTimeout:
                    allEchoObj?.bootstrap?.servers?.bootstrapServerAccountTimeout,
                  //servers
                  //lwm2mServer
                  host1: allEchoObj?.bootstrap?.lwm2mServer?.host,
                  port1: allEchoObj?.bootstrap?.lwm2mServer?.port,
                  serverId1: allEchoObj?.bootstrap?.lwm2mServer?.serverId,
                  securityMode1: allEchoObj?.bootstrap?.lwm2mServer?.securityMode,
                  serverPublicKey1:
                    allEchoObj?.bootstrap?.lwm2mServer?.serverPublicKey == null
                      ? `3059301306072a8648ce3d020106082a8648ce3d03010703420004e353af009b814ee2f9ab393a975e0c
    39e2fff60e3603fd6ee54a43b89a4f56258a7aa9c7e4a577760edb289dc955d91968473ee8a1bfc2b9c423563796113009`
                      : allEchoObj?.bootstrap?.lwm2mServer?.serverPublicKey,
                  clientHoldOffTime1: allEchoObj?.bootstrap?.lwm2mServer?.clientHoldOffTime,
                  bootstrapServerAccountTimeout1:
                    allEchoObj?.bootstrap?.lwm2mServer?.bootstrapServerAccountTimeout,
                  //lwm2mServer
                  //bootstrapServer
                  host: allEchoObj?.bootstrap?.bootstrapServer?.host,
                  port: allEchoObj?.bootstrap?.bootstrapServer?.port,
                  serverId: allEchoObj?.bootstrap?.bootstrapServer?.serverId,
                  securityMode: allEchoObj?.bootstrap?.bootstrapServer?.securityMode,
                  serverPublicKey:
                    allEchoObj?.bootstrap?.bootstrapServer?.serverPublicKey == null
                      ? `3059301306072a8648ce3d020106082a8648ce3d03010703420004e353af009b814ee2f9ab393a975e0c
    39e2fff60e3603fd6ee54a43b89a4f56258a7aa9c7e4a577760edb289dc955d91968473ee8a1bfc2b9c423563796113009`
                      : allEchoObj?.bootstrap?.bootstrapServer?.serverPublicKey,
                  clientHoldOffTime: allEchoObj?.bootstrap?.bootstrapServer?.clientHoldOffTime,
                  bootstrapServerAccountTimeout2:
                    allEchoObj?.bootstrap?.servers?.bootstrapServerAccountTimeout,
                  //bootstrapServer
                });
              });
              break;
            case '3':
              nextTick(() => {
                settingsSetFieldsValueFunc({
                  powerMode: allEchoObj?.clientLwM2mSettings?.powerMode,
                  psmActivityTimer: allEchoObj?.clientLwM2mSettings?.psmActivityTimer,
                  edrxCycle: allEchoObj?.clientLwM2mSettings?.edrxCycle,
                  pagingTransmissionWindow:
                    allEchoObj?.clientLwM2mSettings?.pagingTransmissionWindow,
                  fwUpdateStrategy: allEchoObj?.clientLwM2mSettings?.fwUpdateStrategy,
                  swUpdateStrategy: allEchoObj?.clientLwM2mSettings?.swUpdateStrategy,
                  clientOnlyObserveAfterConnect:
                    allEchoObj?.clientLwM2mSettings?.clientOnlyObserveAfterConnect,
                  fwUpdateResource: allEchoObj?.clientLwM2mSettings?.fwUpdateResource,
                  swUpdateResource: allEchoObj?.clientLwM2mSettings?.swUpdateResource,
                  compositeOperationsSupport:
                    allEchoObj?.clientLwM2mSettings?.compositeOperationsSupport,
                });
              });
              break;
            case '4':
              break;
          }
        }
      };
      const setStepFieldsValueFunc = (v) => {
        if (v) {
          allEchoObj = v;
          allEchoStatus.value = true;
        }
      };

      const getDataFunc = async () => {
        const objectListVal = getObjectListValue();
        const deviceVal = getDeviceValue();
        console.log('第一个tab', objectListVal);
        console.log('第四个tab', deviceVal);
        const serverVal = await serverValidate();
        const settingsVal = await settingsValidate();
        if (!serverVal) return;
        if (!settingsVal) return;
        Reflect.set(bootstrapObj.servers, 'binding', serverVal.binding);
        Reflect.set(bootstrapObj.servers, 'shortId', serverVal.shortId);
        Reflect.set(bootstrapObj.servers, 'lifetime', serverVal.lifetime);
        Reflect.set(bootstrapObj.servers, 'notifIfDisabled', serverVal.notifIfDisabled);
        Reflect.set(bootstrapObj.servers, 'defaultMinPeriod', serverVal.defaultMinPeriod);
        Reflect.set(bootstrapObj.bootstrapServer, 'serverId', serverVal.serverId);
        Reflect.set(bootstrapObj.bootstrapServer, 'host', serverVal.host);
        Reflect.set(bootstrapObj.bootstrapServer, 'port', serverVal.port);
        Reflect.set(bootstrapObj.bootstrapServer, 'securityMode', serverVal.securityMode);
        Reflect.set(bootstrapObj.bootstrapServer, 'serverPublicKey', serverVal.serverPublicKey);
        Reflect.set(bootstrapObj.bootstrapServer, 'clientHoldOffTime', serverVal.clientHoldOffTime);
        Reflect.set(
          bootstrapObj.servers,
          'bootstrapServerAccountTimeout',
          serverVal.bootstrapServerAccountTimeout2
        );
        Reflect.set(bootstrapObj.lwm2mServer, 'serverId', serverVal.serverId1);
        Reflect.set(bootstrapObj.lwm2mServer, 'host', serverVal.host1);
        Reflect.set(bootstrapObj.lwm2mServer, 'port', serverVal.port1);
        Reflect.set(bootstrapObj.lwm2mServer, 'securityMode', serverVal.securityMode1);
        Reflect.set(bootstrapObj.lwm2mServer, 'serverPublicKey', serverVal.serverPublicKey1);
        Reflect.set(bootstrapObj.lwm2mServer, 'clientHoldOffTime', serverVal.clientHoldOffTime1);
        Reflect.set(
          bootstrapObj.lwm2mServer,
          'bootstrapServerAccountTimeout',
          serverVal.bootstrapServerAccountTimeout1
        );
        delete settingsVal.unit;
        delete settingsVal.unit2;
        clientLwM2mSettingsObj = {
          ...settingsVal,
        };
        allObj = {
          ...{
            clientLwM2mSettings: clientLwM2mSettingsObj,
          },
          ...{
            bootstrap: bootstrapObj,
          },
          ...{
            observeAttr: observeAttrObj,
          },
          type: 'LWM2M',
        };
        return allObj;
      };

      const resetStepFieldsValueFunc = () => {
        allEchoStatus.value = false;
        nextTick(() => {
          resetObjectListValue();
          resetServerValue();
          resetSettingsValue();
          resetDeviceValue();
        });
      };

      return {
        currentKey,
        currentSize,
        registerModel,
        registerServer,
        registerSettings,
        registerDevice,
        getDataFunc,
        setStepFieldsValueFunc,
        handleChange,
        resetStepFieldsValueFunc,
      };
    },
  });
</script>