<template>
  <div class="snmp-form" :style="{ height: dynamicHeight + 'vh' }">
    <div class="form-item1" :style="{ height: dynamicHeight + 'vh' }">
      <div style="margin-left: 1vw">
        <h3 style="color: gray">范围*</h3>
        <Select
          v-model:value="selectValue"
          style="width: 140px"
          :options="selectOptions"
          @change="handleChange"
          allowClear
        />
      </div>
    </div>
    <div class="form-item2" :style="{ height: dynamicHeight + 'vh' }">
      <div style="margin-left: 1vw">
        <h3 style="color: gray">查询频率（毫秒*）</h3>
        <InputNumber
          v-if="selectValue == 'TELEMETRY_QUERYING' || selectValue == 'CLIENT_ATTRIBUTES_QUERYING'"
          v-model:value="inputNmberValue"
          :min="1"
          :max="50000"
        />
        <MappingsForm
          :value="mappings"
          @change="handleMappingsChange"
          @dynamicAddHeight="handleDynamicAddHeight"
          @dynamicReduceHeight="handleDynamicReduceHeight"
        />
      </div>
    </div>
    <div class="form-item3" :style="{ height: dynamicHeight + 'vh' }">
      <div
        style="text-align: center; line-height: 20vh"
        :style="{ lineHeight: dynamicHeight + 'vh' }"
      >
        <Button size="small" type="dashed" @click="handleRemove(item, index)">
          <template #icon>
            <MinusCircleOutlined />
          </template>
        </Button>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
  import { ref } from 'vue';
  import { Select, Button, InputNumber } from 'ant-design-vue';
  import { MinusCircleOutlined } from '@ant-design/icons-vue';
  import MappingsForm from './MappingsForm.vue';

  defineProps({
    item: {
      type: Object,
      default: () => {},
    },
    mappings: {
      type: Array,
      default: () => [],
    },
    index: {
      type: Number,
    },
    spec: {
      type: String,
      default: '',
    },
  });
  const emit = defineEmits(['removeItem', 'selectItem']);
  const selectValue = ref('CLIENT_ATTRIBUTES_QUERYING');
  const inputNmberValue = ref(5000);
  const dynamicHeight = ref(25);
  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 handleChange = (value: string) => {
    selectValue.value = value;
    // selectOptions.value.forEach((f) => {
    //   if (f.value == selectValue.value) {
    //     f.disabled = false;
    //   } else {
    //     f.disabled = true;
    //   }
    // });
    emit('selectItem', selectValue.value);
  };
  const mapping: any = ref([]);
  const handleMappingsChange = (e) => {
    mapping.value = e;
  };
  const handleDynamicAddHeight = (e) => {
    if (e) {
      dynamicHeight.value += 4;
    }
  };
  const handleDynamicReduceHeight = (e) => {
    if (!e) {
      dynamicHeight.value -= 4;
    }
  };

  const handleRemove = (item, index) => {
    emit('removeItem', item, index);
  };
  //设置回显表单值
  const setFieldsValueFunc = (item, inputValue) => {
    selectValue.value = item;
    inputNmberValue.value = inputValue;
  };
  //获取表单的值
  const getSnmpFormFunc = () => {
    let obj: any = {};
    obj = {
      ...{ spec: selectValue.value },
      ...{ mappings: mapping.value },
      ...{ queryingFrequencyMs: inputNmberValue.value },
    };
    return obj;
  };
  defineExpose({
    getSnmpFormFunc,
    setFieldsValueFunc,
    handleMappingsChange,
    selectValue,
    handleChange,
  });
</script>
<style lang="less" scoped>
  .snmp-form {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 40vw;
    height: 20vh;
    border: 0.1px solid #bfbfbf;
    margin-top: 2vh;

    .form-item1 {
      width: 9vw;
      height: 20vh;
      border: 0.1px solid #bfbfbf;
    }

    .form-item2 {
      width: 28vw;
      height: 20vh;
      border: 0.1px solid #bfbfbf;
    }

    .form-item3 {
      width: 2vw;
      height: 20vh;
      border: 0.1px solid #bfbfbf;
    }
  }
</style>