<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">
              <!-- snmp表单项 -->
              <SnmpForm
                :index="index"
                :item="item"
                :ref="dynamicBindRef.SnmpFormItemRef"
                :mappings="item.mappings"
                @removeItem="handleRemoveItem"
              >
                <Select
                  v-model:value="item.spec"
                  style="width: 140px"
                  :options="selectOptions"
                  @change="handleChange(item.spec)"
                  allowClear
                >
                  <SelectOption
                    v-for="it in selectOptions"
                    :value="it.value"
                    :key="it.value"
                    :label="it.label"
                    :disabled="it.disabled"
                  />
                </Select>
              </SnmpForm>
            </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, Select, SelectOption } 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 selectOptions: any = ref([
    {
      label: 'Telemetry',
      value: 'TELEMETRY_QUERYING',
      disabled: false,
    },
    {
      label: 'Client attributes',
      value: 'CLIENT_ATTRIBUTES_QUERYING',
      disabled: false,
    },
    {
      label: 'Shared attributes',
      value: 'SHARED_ATTRIBUTES_SETTING',
      disabled: false,
    },
    {
      label: 'RPC request',
      value: 'TO_DEVICE_RPC_REQUEST',
      disabled: false,
    },
  ]);
  const selectValue = ref('');
  //解决新增选择框互斥问题和编辑回显互斥问题
  const handleChange = (value: string) => {
    selectValue.value = value;
    selectOptions.value.forEach((ele: any) => {
      ele.disabled = false;
      dynamicSNMP.communicationConfigs.forEach((element: any) => {
        if (element.spec === ele.value) {
          ele.disabled = true;
          selectOptions.value.forEach((it: any) => {
            if ((ele.disabled = true)) {
              if (ele.value == it.value) {
                it.disabled = true;
              }
            }
          });
        }
      });
    });
  };
  const dynamicBindRef: any = {
    SnmpFormItemRef: ref([]),
  };
  const dynamicSNMP: UnwrapRef<{ communicationConfigs: Params[] }> = reactive({
    communicationConfigs: [
      {
        spec: '',
        mappings: [
          {
            dataType: 'STRING',
            key: '',
            oid: '',
          },
        ],
        queryingFrequencyMs: 5000,
      },
    ],
  });
  const [register, { validate, setFieldsValue }] = useForm({
    labelWidth: 150,
    schemas: snmpSchemas,
    actionColOptions: {
      span: 14,
    },
  });
  const handleAdd = () => {
    dynamicSNMP.communicationConfigs.push({
      spec: '',
      mappings: [
        {
          dataType: 'STRING',
          key: '',
          oid: '',
        },
      ],
      queryingFrequencyMs: 5000,
    });
  };
  const handleRemoveItem = (item, index) => {
    console.log(item.spec);
    //2 TODO待解决删除时清空互斥问题
    dynamicSNMP.communicationConfigs.splice(index, 1);
  };
  //回显表单值
  //TODO 采用这种方式动态绑定ref 都会造成回显数据顺序是随机的但不影响回显数据的正确性
  const setStepFieldsValueFunc = (v) => {
    setFieldsValue({
      timeoutMs: v.timeoutMs,
      retries: v.retries,
    });
    dynamicSNMP.communicationConfigs = v.communicationConfigs;
    dynamicSNMP.communicationConfigs.forEach((snmp, index: number) => {
      nextTick(() => {
        //编辑回显互斥赋值
        handleChange(snmp.spec);
        unref(dynamicBindRef.SnmpFormItemRef)[index]?.setFieldsValueFunc();
      });
    });
  };

  //获取最终的值
  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>