hvac-web/src/views/setup-protocol/GatewayParamExt.vue

<script setup lang="ts">
import { computed, ref } from 'vue';

import { addUnit } from '@/utils';

import type { CSSProperties } from 'vue';

interface Props {
  extInfo: {
    deviceName?: string;
    deviceParam?: string;
    deviceNum?: string;
    moduleName?: string;
    moduleParam?: string;
    moduleNum?: string;
    statusName?: string;
    statusParam?: string;
  };
}

type NumValue = string | number | undefined;

const props = defineProps<Props>();

const emit = defineEmits<{
  change: [
    param: {
      paramName: string;
      paramCode: string;
      gatewayParamExt: string;
    },
  ];
}>();

const deviceNum = ref<NumValue>(props.extInfo.deviceNum);
const moduleNum = ref<NumValue>(props.extInfo.moduleNum);

const deviceNumInputStyle = computed<CSSProperties>(() => {
  return {
    width: addUnit(getInputWidth(deviceNum.value)),
  };
});

const moduleNumInputStyle = computed<CSSProperties>(() => {
  return {
    width: addUnit(getInputWidth(moduleNum.value)),
  };
});

const getInputWidth = (num: NumValue): number => {
  if (!num || String(num).length < 2) {
    return 32;
  } else if (String(num).length < 3) {
    return 40;
  }

  return 50;
};

const handleChange = () => {
  const { deviceName, deviceParam, moduleName, moduleParam, statusName, statusParam } = props.extInfo;

  const deviceNumNameStr = deviceNum.value ? deviceNum.value : '';
  const deviceNumCodeStr = deviceNum.value ? `_${deviceNum.value}_` : '';

  const moduleNumNameStr = moduleNum.value ? moduleNum.value : '';
  const moduleNumCodeStr = moduleNum.value ? `_${moduleNum.value}_` : '';

  const paramName = `${deviceName ?? ''}${deviceNumNameStr}${moduleName ?? ''}${moduleNumNameStr}${statusName ?? ''}`;
  const paramCode = `${deviceParam ?? ''}${deviceNumCodeStr}${moduleParam ?? ''}${moduleNumCodeStr}${statusParam ?? ''}`;

  const gatewayParamExt = {
    ...props.extInfo,
  };

  if (deviceName) {
    gatewayParamExt.deviceNum = deviceNum.value ? String(deviceNum.value) : '';
  }

  if (moduleName) {
    gatewayParamExt.moduleNum = moduleNum.value ? String(moduleNum.value) : '';
  }

  emit('change', {
    paramName,
    paramCode,
    gatewayParamExt: JSON.stringify(gatewayParamExt),
  });
};
</script>

<template>
  <div class="gateway-param-ext-container">
    <template v-if="extInfo.deviceName && extInfo.deviceNum !== undefined">
      {{ extInfo.deviceName }}
      <AInputNumber
        class="gateway-param-ext-input"
        :style="deviceNumInputStyle"
        v-model:value="deviceNum"
        :min="0"
        :precision="0"
        :controls="false"
        @change="handleChange"
      />
    </template>
    <template v-if="extInfo.moduleName && extInfo.moduleNum !== undefined">
      {{ extInfo.moduleName }}
      <AInputNumber
        class="gateway-param-ext-input"
        :style="moduleNumInputStyle"
        v-model:value="moduleNum"
        :min="0"
        :precision="0"
        :controls="false"
        @change="handleChange"
      />
    </template>
    <span>{{ extInfo.statusName }}</span>
  </div>
</template>

<style lang="scss" scoped>
.gateway-param-ext-container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.gateway-param-ext-input {
  width: 32px;
  height: 32px;
  margin-inline: 2px;
}
</style>