<template>
  <div style="">
    <Tabs
      v-model:activeKey="currentKey"
      :size="currentSize"
      :animated="true"
      @change="handleChange"
    >
      <TabPane forceRender key="1" tab="LWM2M Model">
        <BasicForm :showResetButton="false" :showSubmitButton="false" @register="registerModel" />
      </TabPane>
      <TabPane forceRender key="2" tab="Bootstrap">
        <div>
          <Checkbox v-model:checked="bootstrapServerUpdateEnable">包括引导服务器更新</Checkbox>
          <Card
            v-for="(item, index) in dynamicBOOTSTRAP.bootstrap"
            :key="item"
            title="LwM2M Server"
            style="width: 99%; margin-top: 2vh"
          >
            <template #extra>
              <Button size="small" type="dashed" @click="handleRemove(index)">
                <template #icon>
                  <MinusCircleOutlined />
                </template>
              </Button>
            </template>
            <!-- BootStrapForm表单项 -->
            <BootStrapForm :ref="dynamicBindRef.BootStrapFormItemRef" :index="index" :item="item" />
          </Card>
          <div style="margin-top: 2vh">
            <Button size="middle" type="dashed" @click="handleAdd">
              <template #icon>
                <PlusCircleOutlined />
              </template>
              Add LwM2M Server
            </Button>
          </div>
        </div>
      </TabPane>
      <TabPane forceRender 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 forceRender 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, unref } from 'vue';
  import { Tabs, Card } from 'ant-design-vue';
  import { BasicForm, useForm } from '/@/components/Form';
  import { modelSchemas, settingsSchemas, deviceSchemas } from './index';
  import BootStrapForm from './cpns/BootStrapForm.vue';
  import { MinusCircleOutlined, PlusCircleOutlined } from '@ant-design/icons-vue';
  import { Button, Checkbox } from 'ant-design-vue';

  export default defineComponent({
    name: 'index',
    components: {
      Tabs,
      TabPane: Tabs.TabPane,
      BasicForm,
      BootStrapForm,
      MinusCircleOutlined,
      Card,
      PlusCircleOutlined,
      Button,
      Checkbox,
    },
    setup() {
      const bootstrapServerUpdateEnable = ref(false);
      const dynamicBOOTSTRAP: any = reactive({
        bootstrap: [{}],
      });
      const dynamicBindRef: any = {
        BootStrapFormItemRef: ref([]),
      };
      const currentKey = ref('1');
      const currentSize = ref('large');
      let allObj: any = reactive({});
      let allEchoObj: any = reactive({});
      let allEchoStatus = ref(false);
      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 [
        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 handleAdd = () => {
        dynamicBOOTSTRAP.bootstrap.push({});
      };
      const handleRemove = (index) => {
        dynamicBOOTSTRAP.bootstrap.splice(index, 1);
      };
      const handleChange = (e) => {
        if (allEchoStatus.value) {
          switch (e) {
            case '1':
              break;
            case '2':
              nextTick(() => {
                bootstrapServerUpdateEnable.value = allEchoObj.bootstrapServerUpdateEnable;
                dynamicBOOTSTRAP.bootstrap = allEchoObj.bootstrap;
                dynamicBOOTSTRAP.bootstrap.forEach((bootstrap, index: number) => {
                  nextTick(() => {
                    unref(dynamicBindRef.BootStrapFormItemRef)[index]?.editBootStrapFormFunc(
                      bootstrap
                    );
                  });
                });
              });
              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 tempBootStrap: any = [];
      const getBootStrapFormValue = () => {
        //获取BootStrap的值
        unref(dynamicBindRef.BootStrapFormItemRef)?.map((item: any) =>
          tempBootStrap.push(item.getBootStrapFormFunc())
        );
      };

      const getDataFunc = async () => {
        const objectListVal = getObjectListValue();
        const deviceVal = getDeviceValue();
        console.log('第一个tab', objectListVal);
        console.log('第四个tab', deviceVal);
        getBootStrapFormValue();
        const settingsVal = await settingsValidate();
        if (!settingsVal) return;
        delete settingsVal.unit;
        delete settingsVal.unit2;
        clientLwM2mSettingsObj = {
          ...settingsVal,
        };
        allObj = {
          ...{
            clientLwM2mSettings: clientLwM2mSettingsObj,
          },
          ...{
            bootstrap: tempBootStrap,
          },
          ...{ bootstrapServerUpdateEnable: bootstrapServerUpdateEnable.value },
          ...{
            observeAttr: observeAttrObj,
          },
          type: 'LWM2M',
        };
        return allObj;
      };

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

      return {
        currentKey,
        currentSize,
        registerModel,
        registerSettings,
        registerDevice,
        getDataFunc,
        setStepFieldsValueFunc,
        handleChange,
        resetStepFieldsValueFunc,
        dynamicBOOTSTRAP,
        dynamicBindRef,
        handleAdd,
        handleRemove,
        bootstrapServerUpdateEnable,
      };
    },
  });
</script>

<style lang="less" scoped>
  :deep(.ant-select-selector) {
    max-width: 42rem !important;
  }
</style>