<template>
  <div
    style="
      margin-top: -5vh;
      border: 0.5px solid gray;
      margin-left: 0.1vw;
      border-radius: 5px;
      padding-left: 1.5vw;
    "
  >
    <div style="margin-top: 1.2vh">
      <BasicForm :showResetButton="false" :showSubmitButton="false" @register="register">
        <template #add>
          <div>
            <template v-for="(item, index) in dynamicSNMP.communicationConfigs" :key="item">
              <span style="display: none">{{ item }}</span>
              <span style="display: none">{{ index }}</span>
              <!-- snmp表单项 -->
              <SnmpForm
                :spec="item.spec"
                :index="index"
                :item="item"
                :ref="dynamicBindRef.SnmpFormItemRef"
                :mappings="item.mappings"
                @removeItem="handleRemoveItem"
                @selectItem="handleSelectItem"
              />
            </template>
            <div
              v-if="dynamicSNMP.communicationConfigs.length < 4"
              style="margin-left: 0vw; margin-top: 2vh"
            >
              <Button size="middle" type="dashed" @click="handleAdd">
                <template #icon>
                  <PlusCircleOutlined />
                </template>
                Add communication config
              </Button>
            </div>
          </div>
        </template>
      </BasicForm>
    </div>
  </div>
</template>
<script setup lang="ts">
  import { UnwrapRef, reactive, ref, unref, nextTick } from 'vue';
  import { BasicForm, useForm } from '/@/components/Form';
  import { snmpSchemas } from './config';
  import { PlusCircleOutlined } from '@ant-design/icons-vue';
  import { Button } from 'ant-design-vue';
  import SnmpForm from './cpns/SnmpForm.vue';

  interface mappingsI {
    dataType: string;
    key: string;
    oid: string;
  }
  interface Params {
    spec: string;
    queryingFrequencyMs: number;
    mappings: mappingsI[];
  }
  const dynamicBindRef: any = {
    SnmpFormItemRef: ref([]),
  };
  const dynamicSNMP: UnwrapRef<{ communicationConfigs: Params[] }> = reactive({
    communicationConfigs: [
      {
        spec: '',
        mappings: [
          {
            dataType: 'STRING',
            key: '',
            oid: '',
          },
        ],
        queryingFrequencyMs: 0,
      },
    ],
  });
  const [register, { validate, setFieldsValue }] = useForm({
    labelWidth: 150,
    schemas: snmpSchemas,
    actionColOptions: {
      span: 14,
    },
  });
  // const selectArray = [
  //   'TELEMETRY_QUERYING',
  //   'CLIENT_ATTRIBUTES_QUERYING',
  //   'SHARED_ATTRIBUTES_SETTING',
  //   'TO_DEVICE_RPC_REQUEST',
  // ];
  // const selectIndex: any = ref('');
  const handleSelectItem = (e) => {
    console.log('e', e);
    // selectIndex.value = e || 'CLIENT_ATTRIBUTES_QUERYING';
    // selectIndex.value = selectArray.filter((f) => f !== e);
    // console.log('e1', selectIndex.value);
  };
  const handleAdd = () => {
    dynamicSNMP.communicationConfigs.push({
      spec: '',
      mappings: [
        {
          dataType: 'STRING',
          key: '',
          oid: '',
        },
      ],
      queryingFrequencyMs: 0,
    });
    // console.log('总数组', dynamicSNMP.communicationConfigs);
    // dynamicSNMP.communicationConfigs.forEach((snmp, index) => {
    //   nextTick(() => {
    //     unref(dynamicBindRef.SnmpFormItemRef)[index]?.handleChange(snmp?.spec);
    //   });
    // });
  };
  const handleRemoveItem = (_, index) => {
    dynamicSNMP.communicationConfigs.splice(index, 1);
  };
  //回显表单值
  const setStepFieldsValueFunc = (v) => {
    setFieldsValue({
      timeoutMs: v.timeoutMs,
      retries: v.retries,
    });
    dynamicSNMP.communicationConfigs = v.communicationConfigs;
    dynamicSNMP.communicationConfigs.forEach((snmp: any, index: number) => {
      nextTick(() => {
        unref(dynamicBindRef.SnmpFormItemRef)[index]?.setFieldsValueFunc(
          snmp?.spec,
          snmp?.queryingFrequencyMs
        );
        unref(dynamicBindRef.SnmpFormItemRef)[index]?.handleMappingsChange(snmp?.mappings);
      });
    });
  };

  //获取最终的值
  const getSnmpForm = async () => {
    let value = await validate();
    if (!value) return;
    let tempObj: any = {};
    let tempArray: any = [];
    unref(dynamicBindRef.SnmpFormItemRef)?.map((item: any) => {
      tempArray.push(item.getSnmpFormFunc());
    });
    tempObj = {
      ...value,
      ...{ communicationConfigs: tempArray },
      ...{ type: 'SNMP' },
    };
    return tempObj;
  };
  defineExpose({
    getSnmpForm,
    setStepFieldsValueFunc,
  });
</script>
<style lang="less" scoped></style>