<!-- eslint-disable vue/no-mutating-props -->
<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>
        <slot></slot>
      </div>
    </div>
    <div class="form-item2" :style="{ height: dynamicHeight + 'vh' }">
      <div style="margin-left: 1vw">
        <h3
          v-if="item.spec == 'TELEMETRY_QUERYING' || item.spec == 'CLIENT_ATTRIBUTES_QUERYING'"
          style="color: gray"
        >
          查询频率（毫秒*）</h3
        >
        <InputNumber
          v-if="item.spec == 'TELEMETRY_QUERYING' || item.spec == 'CLIENT_ATTRIBUTES_QUERYING'"
          v-model:value="queryingFrequencyMs"
          :min="0"
          :max="99999999999999999999"
          style="margin-top: 0.25vh"
        />
        <div style="margin-top: 0.65vh"></div>
        <MappingsForm
          :value="item.mappings"
          @change="handleMappingsChange"
          @dynamicAddHeight="dynamicHeight += 4"
          @dynamicReduceHeight="dynamicHeight -= 4"
        />
      </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="default" @click="handleRemove(item, index)">
          <template #icon>
            <MinusCircleOutlined />
          </template>
        </Button>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
  import { ref } from 'vue';
  import { Button, InputNumber } from 'ant-design-vue';
  import { MinusCircleOutlined } from '@ant-design/icons-vue';
  import MappingsForm from './MappingsForm.vue';
  import { useMessage } from '/@/hooks/web/useMessage';

  const props = defineProps({
    item: {
      type: Object,
      default: () => {},
    },
    index: {
      type: Number,
    },
  });
  const emit = defineEmits(['removeItem']);
  const dynamicHeight = ref(25);
  const queryingFrequencyMs = ref(5000);
  const { createMessage } = useMessage();
  const handleMappingsChange = (e) => {
    // eslint-disable-next-line vue/no-mutating-props
    props.item.mappings = e;
  };
  const handleRemove = (item, index) => {
    emit('removeItem', item, index);
  };
  //设置回显的高度
  const setFieldsValueFunc = () => {
    dynamicHeight.value = props.item.mappings.length * 3 + props.item.mappings.length + 15;
    queryingFrequencyMs.value = props.item.queryingFrequencyMs;
  };
  //获取表单的值
  const getSnmpFormFunc = () => {
    if (!props.item.spec || props.item.spec == '' || props.item.spec == undefined) {
      return createMessage.error('请选择范围');
    }
    if (
      props.item.spec == 'TELEMETRY_QUERYING' ||
      props.item.spec == 'CLIENT_ATTRIBUTES_QUERYING'
    ) {
      if (queryingFrequencyMs.value == null) {
        return createMessage.error('请填写查询频率');
      }
    }
    let obj: any = {};
    obj = {
      ...{ spec: props.item.spec },
      ...{ mappings: props.item.mappings },
      ...{
        queryingFrequencyMs:
          props.item.spec == 'TELEMETRY_QUERYING' || props.item.spec == 'CLIENT_ATTRIBUTES_QUERYING'
            ? queryingFrequencyMs.value
            : null,
      },
    };
    return obj;
  };
  defineExpose({
    getSnmpFormFunc,
    setFieldsValueFunc,
    handleMappingsChange,
  });
</script>
<style lang="less" scoped>
  ::-webkit-scrollbar {
    display: none;
    width: 0 !important;
    height: 0 !important;
    -webkit-appearance: none;
    background: transparent;
  }

  .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;
      overflow: hidden;
      overflow-y: scroll;
    }

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