<!-- 频谱仪 -->
<script setup lang="ts">
import { $enum } from 'ts-enum-util';

import {
  E_Freq单位,
  E_幅度单位,
  E_幅度菜单列表的项目,
  E_数字键盘按键,
  E_跨度菜单列表的项目,
  E_选项卡菜单,
  E_选项卡菜单Freq菜单列表的项目,
} from './CONST';
import 设备照片 from './pin-pu-yi-bg.png';

const state = reactive({
  选项卡当前显示: E_选项卡菜单.频率菜单列表,
  频谱仪状态: {
    频率输入状态: {
      选中的频率菜单列表的项目: null as E_选项卡菜单Freq菜单列表的项目 | null,
      输入的值临时输入字符串: null as null | string, // 用于暂存用户输入
    },
    幅度输入状态: {
      选中的幅度菜单列表的项目: null as E_幅度菜单列表的项目 | null,
      输入的值临时输入字符串: null as null | string, // 用于暂存用户输入
      refLevel: {
        value: 0,
        unit: E_幅度单位.dBm,
      },
      // attenuation: { value: 0, unit: E_幅度单位.dB }, // 如果需要衰减值
    },
    center: {
      value: 0,
      unit: E_Freq单位.Hz,
    },
    start: {
      value: 0,
      unit: E_Freq单位.Hz,
    },
    stop: {
      value: 0,
      unit: E_Freq单位.Hz,
    },
    span: {
      currentSpan: {
        start: 0,
        stop: 0,
        unit: E_Freq单位.Hz,
      },
      lastSpan: {
        start: 0,
        stop: 0,
        unit: E_Freq单位.Hz,
      },
      fullSpan: {
        start: 0,
        stop: 3,
        unit: E_Freq单位.GHz,
      },
      zeroSpan: false,
    },
  },
});

const 选项卡标题 = computed(() =>
  $enum.mapValue(state.选项卡当前显示).with({
    [E_选项卡菜单.频率菜单列表]: 'Freq/Channel',
    [E_选项卡菜单.频率单位列表]: '',
    [E_选项卡菜单.跨度菜单列表]: 'Span',
    [E_选项卡菜单.幅度菜单列表]: 'Amplitude',
    [E_选项卡菜单.幅度单位列表]: '',
  }),
);

function 执行点击屏幕右边的按钮(按钮序号: number) {
  console.group('🔘 点击屏幕右边的按钮', {
    按钮序号,
    选项卡当前显示: state.选项卡当前显示,
  });
  $enum.visitValue(state.选项卡当前显示).with({
    [E_选项卡菜单.频率菜单列表]: () => {
      switch (按钮序号) {
        case 1: {
          state.频谱仪状态.频率输入状态.选中的频率菜单列表的项目 = E_选项卡菜单Freq菜单列表的项目.CenterFreq;
          console.debug('设置 Freq 输入状态为 CenterFreq');
          break;
        }
        case 2: {
          state.频谱仪状态.频率输入状态.选中的频率菜单列表的项目 = E_选项卡菜单Freq菜单列表的项目.StartFreq;
          console.debug('设置 Freq 输入状态为 StartFreq');
          break;
        }
        case 3: {
          state.频谱仪状态.频率输入状态.选中的频率菜单列表的项目 = E_选项卡菜单Freq菜单列表的项目.StopFreq;
          console.debug('设置 Freq 输入状态为 StopFreq');
          break;
        }
        default: {
          console.debug('频率菜单列表 - 这个按键还没有实现');
          break;
        }
      }
    },
    [E_选项卡菜单.频率单位列表]: () => {
      let selectedUnit: E_Freq单位 | null = null;
      switch (按钮序号) {
        case 1: {
          selectedUnit = E_Freq单位.GHz;
          break;
        }
        case 2: {
          selectedUnit = E_Freq单位.MHz;
          break;
        }
        case 3: {
          selectedUnit = E_Freq单位.kHz;
          break;
        }
        case 4: {
          selectedUnit = E_Freq单位.Hz;
          break;
        }
        default: {
          console.warn('无效的频率单位按钮序号:', 按钮序号);
          console.groupEnd();
          return;
        }
      }

      const tempInputString = state.频谱仪状态.频率输入状态.输入的值临时输入字符串;
      const selectedFreqItem = state.频谱仪状态.频率输入状态.选中的频率菜单列表的项目;
      // 必须有临时输入值和选中的 Freq 项目才能确认
      if (!tempInputString || !selectedFreqItem) {
        console.warn('频率输入未完成或未选择项目，无法确认单位。');
        console.groupEnd();
        return;
      }

      const inputValue = Number.parseFloat(tempInputString);
      // 校验解析结果
      if (Number.isNaN(inputValue)) {
        console.warn('无法将临时输入解析为有效数字 (频率):', tempInputString);
        console.groupEnd();
        return;
      }

      console.debug('确认频率单位:', selectedUnit, '值为:', inputValue);
      switch (selectedFreqItem) {
        case E_选项卡菜单Freq菜单列表的项目.CenterFreq: {
          state.频谱仪状态.center.value = inputValue;
          state.频谱仪状态.center.unit = selectedUnit;
          console.debug('更新 CenterFreq:', state.频谱仪状态.center);
          break;
        }
        case E_选项卡菜单Freq菜单列表的项目.StartFreq: {
          state.频谱仪状态.start.value = inputValue;
          state.频谱仪状态.start.unit = selectedUnit;
          console.debug('更新 StartFreq:', state.频谱仪状态.start);
          break;
        }
        case E_选项卡菜单Freq菜单列表的项目.StopFreq: {
          state.频谱仪状态.stop.value = inputValue;
          state.频谱仪状态.stop.unit = selectedUnit;
          console.debug('更新 StopFreq:', state.频谱仪状态.stop);
          break;
        }
      }
      state.频谱仪状态.频率输入状态.选中的频率菜单列表的项目 = null;
      state.频谱仪状态.频率输入状态.输入的值临时输入字符串 = null;
      state.选项卡当前显示 = E_选项卡菜单.频率菜单列表;
      console.debug('频率输入状态已重置, 切换回频率菜单列表');
    },
    [E_选项卡菜单.跨度菜单列表]: () => {
      switch (按钮序号) {
        case 1: {
          // Full Span
          state.频谱仪状态.span.lastSpan.start = state.频谱仪状态.start.value;
          state.频谱仪状态.span.lastSpan.stop = state.频谱仪状态.stop.value;
          state.频谱仪状态.span.lastSpan.unit = state.频谱仪状态.stop.unit;
          state.频谱仪状态.start.value = state.频谱仪状态.span.fullSpan.start;
          state.频谱仪状态.start.unit = state.频谱仪状态.span.fullSpan.unit;
          state.频谱仪状态.stop.value = state.频谱仪状态.span.fullSpan.stop;
          state.频谱仪状态.stop.unit = state.频谱仪状态.span.fullSpan.unit;
          state.频谱仪状态.center.value = (state.频谱仪状态.start.value + state.频谱仪状态.stop.value) / 2;
          state.频谱仪状态.center.unit = state.频谱仪状态.span.fullSpan.unit;
          state.频谱仪状态.span.zeroSpan = false;
          console.debug('设置为 Full Span');
          break;
        }
        case 2: {
          // Zero Span
          state.频谱仪状态.span.lastSpan.start = state.频谱仪状态.start.value;
          state.频谱仪状态.span.lastSpan.stop = state.频谱仪状态.stop.value;
          state.频谱仪状态.span.lastSpan.unit = state.频谱仪状态.stop.unit;
          state.频谱仪状态.start.value = state.频谱仪状态.center.value;
          state.频谱仪状态.start.unit = state.频谱仪状态.center.unit;
          state.频谱仪状态.stop.value = state.频谱仪状态.center.value;
          state.频谱仪状态.stop.unit = state.频谱仪状态.center.unit;
          state.频谱仪状态.span.zeroSpan = true;
          console.debug('设置为 Zero Span');
          break;
        }
        case 3: {
          // Last Span
          state.频谱仪状态.start.value = state.频谱仪状态.span.lastSpan.start;
          state.频谱仪状态.start.unit = state.频谱仪状态.span.lastSpan.unit;
          state.频谱仪状态.stop.value = state.频谱仪状态.span.lastSpan.stop;
          state.频谱仪状态.stop.unit = state.频谱仪状态.span.lastSpan.unit;
          state.频谱仪状态.center.value = (state.频谱仪状态.start.value + state.频谱仪状态.stop.value) / 2;
          state.频谱仪状态.center.unit = state.频谱仪状态.span.lastSpan.unit;
          state.频谱仪状态.span.zeroSpan = false;
          console.debug('恢复到 Last Span');
          break;
        }
        default: {
          console.debug('跨度菜单列表 - 这个按键还没有实现');
          break;
        }
      }
    },
    [E_选项卡菜单.幅度菜单列表]: () => {
      switch (按钮序号) {
        case 1: {
          // Ref Level
          state.频谱仪状态.幅度输入状态.选中的幅度菜单列表的项目 = E_幅度菜单列表的项目.RefLevel;
          state.频谱仪状态.幅度输入状态.输入的值临时输入字符串 = null;
          console.debug('设置 幅度输入状态为 RefLevel');
          break;
        }
        case 2: {
          // Attenuation
          console.debug('点击了 幅度菜单列表 - Attenuation (功能待实现)');
          break;
        }
        default: {
          console.debug('幅度菜单列表 - 这个按键还没有实现');
          break;
        }
      }
    },
    [E_选项卡菜单.幅度单位列表]: () => {
      let selectedUnit: E_幅度单位 | null = null;
      switch (按钮序号) {
        case 1: {
          selectedUnit = E_幅度单位.dBm;
          break;
        }
        case 2: {
          selectedUnit = E_幅度单位.mV;
          break;
        }
        case 3: {
          selectedUnit = E_幅度单位.uV;
          break;
        }
        case 4: {
          selectedUnit = E_幅度单位.uA;
          break;
        }
        default: {
          console.warn('无效的幅度单位按钮序号:', 按钮序号);
          console.groupEnd();
          return;
        }
      }

      const tempInputString = state.频谱仪状态.幅度输入状态.输入的值临时输入字符串;
      const selectedAmpItem = state.频谱仪状态.幅度输入状态.选中的幅度菜单列表的项目;

      if (!tempInputString || !selectedAmpItem) {
        console.warn('幅度输入未完成或未选择项目，无法确认单位。');
        console.groupEnd();
        return;
      }

      const inputValue = Number.parseFloat(tempInputString);
      if (Number.isNaN(inputValue)) {
        console.warn('无法将临时输入解析为有效数字 (幅度):', tempInputString);
        console.groupEnd();
        return;
      }

      console.debug('确认幅度单位:', selectedUnit, '值为:', inputValue);
      if (selectedAmpItem === E_幅度菜单列表的项目.RefLevel) {
        state.频谱仪状态.幅度输入状态.refLevel.value = inputValue;
        state.频谱仪状态.幅度输入状态.refLevel.unit = selectedUnit;
        console.debug('更新 RefLevel:', state.频谱仪状态.幅度输入状态.refLevel);
      }
      state.频谱仪状态.幅度输入状态.选中的幅度菜单列表的项目 = null;
      state.频谱仪状态.幅度输入状态.输入的值临时输入字符串 = null;
      state.选项卡当前显示 = E_选项卡菜单.幅度菜单列表;
      console.debug('幅度输入状态已重置, 切换回幅度菜单列表');
    },
  });
  console.groupEnd();
}

function 执行点击数字按钮(按钮值: E_数字键盘按键) {
  console.group('🔢 点击数字按钮', { 按钮值 });

  const isFreqInputActive = !!state.频谱仪状态.频率输入状态.选中的频率菜单列表的项目;
  const isAmpInputActive = !!state.频谱仪状态.幅度输入状态.选中的幅度菜单列表的项目;

  if (!isFreqInputActive && !isAmpInputActive) {
    console.warn('请先选择一个频率或幅度菜单项');
    console.groupEnd();
    return;
  }

  let 当前临时输入: string;
  let 更新临时输入回调: (newVal: null | string) => void;
  let 后续操作菜单: E_选项卡菜单;

  if (isFreqInputActive) {
    当前临时输入 = state.频谱仪状态.频率输入状态.输入的值临时输入字符串 ?? '';
    更新临时输入回调 = (newVal) => {
      state.频谱仪状态.频率输入状态.输入的值临时输入字符串 = newVal;
    };
    后续操作菜单 = E_选项卡菜单.频率单位列表;
  } else {
    // isAmpInputActive
    当前临时输入 = state.频谱仪状态.幅度输入状态.输入的值临时输入字符串 ?? '';
    更新临时输入回调 = (newVal) => {
      state.频谱仪状态.幅度输入状态.输入的值临时输入字符串 = newVal;
    };
    后续操作菜单 = E_选项卡菜单.幅度单位列表;
  }

  switch (按钮值) {
    case E_数字键盘按键.Dot: {
      // 只有在当前临时输入不包含小数点时才允许添加
      if (当前临时输入.includes('.')) {
        console.debug('已存在小数点，忽略本次输入');
      } else {
        // 如果当前为空，则为 '0.'，否则追加 '.'
        更新临时输入回调(当前临时输入 ? `${当前临时输入}.` : '0.');
        console.debug(
          '输入小数点，临时字符串:',
          isFreqInputActive
            ? state.频谱仪状态.频率输入状态.输入的值临时输入字符串
            : state.频谱仪状态.幅度输入状态.输入的值临时输入字符串,
        );
      }
      break;
    }

    case E_数字键盘按键.Num0:
    case E_数字键盘按键.Num1:
    case E_数字键盘按键.Num2:
    case E_数字键盘按键.Num3:
    case E_数字键盘按键.Num4:
    case E_数字键盘按键.Num5:
    case E_数字键盘按键.Num6:
    case E_数字键盘按键.Num7:
    case E_数字键盘按键.Num8:
    case E_数字键盘按键.Num9: {
      if (当前临时输入 === '0') {
        更新临时输入回调(String(按钮值));
      } else if (当前临时输入 === '-0') {
        更新临时输入回调(`-${String(按钮值)}`);
      } else {
        更新临时输入回调(当前临时输入 + String(按钮值));
      }
      console.debug(
        '输入数字，临时字符串:',
        isFreqInputActive
          ? state.频谱仪状态.频率输入状态.输入的值临时输入字符串
          : state.频谱仪状态.幅度输入状态.输入的值临时输入字符串,
      );
      break;
    }
    case E_数字键盘按键.PlusMinus: {
      if (当前临时输入.startsWith('-')) {
        更新临时输入回调(当前临时输入.slice(1));
      } else if (当前临时输入 && 当前临时输入 !== '0' && 当前临时输入 !== '0.') {
        更新临时输入回调(`-${当前临时输入}`);
      } else if (当前临时输入 === '' || 当前临时输入 === '0' || 当前临时输入 === '0.') {
        更新临时输入回调('-');
      } else {
        console.debug('无法切换正负号');
      }
      console.debug(
        '切换正负号，临时字符串:',
        isFreqInputActive
          ? state.频谱仪状态.频率输入状态.输入的值临时输入字符串
          : state.频谱仪状态.幅度输入状态.输入的值临时输入字符串,
      );
      break;
    }
    default: {
      console.warn('未知的数字键盘按键:', 按钮值);
    }
  }
  state.选项卡当前显示 = 后续操作菜单;

  console.groupEnd();
}

const img_modules = import.meta.glob<{ default: string }>('./imgs/*.png', {
  eager: true,
});
const 屏幕照片 = ref(img_modules['./imgs/屏幕_0.png']!.default);
watch(
  () => state.频谱仪状态.center.value,
  () => {
    屏幕照片.value = img_modules['./imgs/屏幕_1.png']!.default;
  },
);
watch(
  () => state.频谱仪状态.start.value,
  () => {
    屏幕照片.value = img_modules['./imgs/屏幕_2.png']!.default;
  },
);
watch(
  () => state.频谱仪状态.stop.value,
  () => {
    屏幕照片.value = img_modules['./imgs/屏幕_3.png']!.default;
  },
);
watchEffect(() => {
  console.debug(`屏幕照片.value :>> `, 屏幕照片.value);
});
</script>

<template>
  <!-- <pre
    v-if="$__DEV__"
    class="fixed bottom-10 right-10 top-10 z-[9999] overflow-auto overflow-y-auto bg-white p-[10px] text-[12px] text-black"
    >{{ { 选项卡菜单7个: $enum(E_选项卡菜单).getValues(), ...state } }}</pre
  > -->

  <div class="wrp relative">
    <img :src="设备照片" alt="频谱仪设备" />

    <div
      class="absolute left-[640px] top-[174px] flex w-[55px] flex-col gap-y-[4px] overflow-visible text-black"
      data-box="屏幕右边的按钮"
    >
      <!-- 上下还有一个 ESC / RETURN -->
      <ul class="flex h-[300px] flex-col justify-around gap-y-[4px] overflow-visible" data-box="屏幕右边按钮列表">
        <template v-for="n in 7" :key="`按钮${n}`">
          <li
            class="lh-[1.2] flex flex-1 flex-col gap-y-[0px] overflow-visible rounded-[2px] text-[12px]"
            @click="执行点击屏幕右边的按钮(n)"
          >
            <button class="ppy-btn !h-full !w-full"></button>
          </li>
        </template>
      </ul>
    </div>

    <div class="absolute left-[195px] top-[140px] h-[350px] w-[430px] bg-black" data-box="屏幕">
      <img :src="屏幕照片" alt="频谱仪屏幕" class="absolute left-0 top-0 !h-[330px] !w-[340px]" />

      <!--  -->
      <!-- 屏幕左上角 Ref Level -->
      <div class="absolute left-[5px] top-[20px] text-left text-[10px] text-white" data-box="屏幕左上角RefLevel">
        <span>
          Ref {{ state.频谱仪状态.幅度输入状态.refLevel.value }}
          {{ state.频谱仪状态.幅度输入状态.refLevel.unit }}
        </span>
      </div>

      <div class="absolute bottom-0 left-0 right-[85px] flex justify-between text-white" data-box="下面左Start 右Stop">
        <div class="flex-1 text-left">
          <span>Start </span>
          <span>{{ state.频谱仪状态.start.value }}</span>
          <span>{{ state.频谱仪状态.start.unit }}</span>
        </div>
        <div class="flex-1 text-right">
          <span>Stop </span>
          <span>{{ state.频谱仪状态.stop.value }}</span>
          <span>{{ state.频谱仪状态.stop.unit }}</span>
        </div>
      </div>

      <div
        v-if="
          state.频谱仪状态.频率输入状态.选中的频率菜单列表的项目 ||
          state.频谱仪状态.幅度输入状态.选中的幅度菜单列表的项目
        "
        class="lh-[1.2] absolute left-[40px] top-[140px] flex flex-col gap-y-[0px] bg-gray-500/100 text-white"
        data-box="正在输入的值"
      >
        <!-- 标题：显示当前选中的输入项 -->
        <div v-if="state.频谱仪状态.频率输入状态.选中的频率菜单列表的项目">
          {{ state.频谱仪状态.频率输入状态.选中的频率菜单列表的项目 }}
        </div>
        <div v-else-if="state.频谱仪状态.幅度输入状态.选中的幅度菜单列表的项目">
          {{ state.频谱仪状态.幅度输入状态.选中的幅度菜单列表的项目 }}
        </div>

        <!-- 值：优先显示临时输入字符串，如果为空，则显示已确认的值 -->
        <div>
          <template
            v-if="
              state.频谱仪状态.频率输入状态.选中的频率菜单列表的项目 &&
              state.频谱仪状态.频率输入状态.输入的值临时输入字符串 !== null
            "
          >
            {{ state.频谱仪状态.频率输入状态.输入的值临时输入字符串 }}
          </template>
          <template
            v-else-if="
              state.频谱仪状态.幅度输入状态.选中的幅度菜单列表的项目 &&
              state.频谱仪状态.幅度输入状态.输入的值临时输入字符串 !== null
            "
          >
            {{ state.频谱仪状态.幅度输入状态.输入的值临时输入字符串 }}
          </template>
          <!-- 已确认的频率值 -->
          <template
            v-else-if="
              state.频谱仪状态.频率输入状态.选中的频率菜单列表的项目 === E_选项卡菜单Freq菜单列表的项目.CenterFreq
            "
          >
            {{ state.频谱仪状态.center.value }}
            {{ state.频谱仪状态.center.unit }}
          </template>
          <template
            v-else-if="
              state.频谱仪状态.频率输入状态.选中的频率菜单列表的项目 === E_选项卡菜单Freq菜单列表的项目.StartFreq
            "
          >
            {{ state.频谱仪状态.start.value }} {{ state.频谱仪状态.start.unit }}
          </template>
          <template
            v-else-if="
              state.频谱仪状态.频率输入状态.选中的频率菜单列表的项目 === E_选项卡菜单Freq菜单列表的项目.StopFreq
            "
          >
            {{ state.频谱仪状态.stop.value }} {{ state.频谱仪状态.stop.unit }}
          </template>
          <!-- 已确认的幅度值 -->
          <template
            v-else-if="state.频谱仪状态.幅度输入状态.选中的幅度菜单列表的项目 === E_幅度菜单列表的项目.RefLevel"
          >
            {{ state.频谱仪状态.幅度输入状态.refLevel.value }}
            {{ state.频谱仪状态.幅度输入状态.refLevel.unit }}
          </template>
          <template v-else>
            0.000000000
            <!-- 默认或回退显示 -->
          </template>
        </div>
      </div>

      <div
        class="absolute bottom-[15px] right-0 top-0 flex w-[80px] flex-col gap-y-[4px] text-black"
        data-box="屏幕右侧的选项卡"
      >
        <div class="menu-item lh-[30px] h-[30px] overflow-hidden bg-[#AFAFAF] text-center" data-box="菜单标题">
          {{ 选项卡标题 }}
        </div>

        <ul
          v-if="state.选项卡当前显示 === E_选项卡菜单.频率菜单列表"
          class="flex h-[300px] flex-col justify-around gap-y-[4px]"
          data-box="频率菜单列表"
        >
          <li class="menu-item lh-[1.2] flex flex-1 flex-col gap-y-[0px] overflow-hidden bg-[#AFAFAF]">
            <span>Center Freq</span>
            {{ state.频谱仪状态.center.value }}
            {{ state.频谱仪状态.center.unit }}
          </li>
          <li class="menu-item lh-[1.2] flex flex-1 flex-col gap-y-[0px] overflow-hidden bg-[#AFAFAF]">
            <span>Start Freq</span>
            {{ state.频谱仪状态.start.value }}
            {{ state.频谱仪状态.start.unit }}
          </li>
          <li class="menu-item lh-[1.2] flex flex-1 flex-col gap-y-[0px] overflow-hidden bg-[#AFAFAF]">
            <span>Stop Freq</span>
            {{ state.频谱仪状态.stop.value }}
            {{ state.频谱仪状态.stop.unit }}
          </li>
          <li class="menu-item lh-[1.2] flex flex-1 flex-col gap-y-[0px] overflow-hidden bg-[#AFAFAF]">
            <span>#CF Step</span>
            <span>0.0000 hz</span>
            <span>X</span>
          </li>
          <li class="menu-item lh-[1.2] flex flex-1 flex-col gap-y-[0px] overflow-hidden bg-[#AFAFAF]">
            <span>#Freq Offset</span>
            <span>0.0000 Hz</span>
          </li>
          <li class="menu-item lh-[1.2] flex flex-1 flex-col gap-y-[0px] overflow-hidden bg-[#AFAFAF]">
            <span>#Singnal Track</span>
          </li>
          <li class="menu-item lh-[1.2] flex flex-1 flex-col gap-y-[0px] overflow-hidden bg-[#AFAFAF]">
            <span>#Scale Type</span>
          </li>
        </ul>

        <ul
          v-if="state.选项卡当前显示 === E_选项卡菜单.频率单位列表"
          class="flex flex-1 flex-col justify-around gap-y-[4px]"
          data-box="FreqChannel单位列表"
        >
          <li class="menu-item lh-[1.2] flex flex-1 flex-col gap-y-[0px] overflow-hidden bg-[#AFAFAF]">
            <span>GHz</span>
          </li>
          <li class="menu-item lh-[1.2] flex flex-1 flex-col gap-y-[0px] overflow-hidden bg-[#AFAFAF]">
            <span>MHz</span>
          </li>
          <li class="menu-item lh-[1.2] flex flex-1 flex-col gap-y-[0px] overflow-hidden bg-[#AFAFAF]">
            <span>KHz</span>
          </li>
          <li class="menu-item lh-[1.2] flex flex-1 flex-col gap-y-[0px] overflow-hidden bg-[#AFAFAF]">
            <span>Hz</span>
          </li>
          <li class="menu-item lh-[1.2] flex flex-1 flex-col gap-y-[0px] overflow-hidden bg-[#AFAFAF]"></li>
          <li class="menu-item lh-[1.2] flex flex-1 flex-col gap-y-[0px] overflow-hidden bg-[#AFAFAF]"></li>
          <li class="menu-item lh-[1.2] flex flex-1 flex-col gap-y-[0px] overflow-hidden bg-[#AFAFAF]"></li>
        </ul>

        <ul
          v-if="state.选项卡当前显示 === E_选项卡菜单.跨度菜单列表"
          class="flex h-[300px] flex-col justify-around gap-y-[4px]"
          data-box="跨度菜单列表"
        >
          <li class="menu-item lh-[1.2] flex flex-1 flex-col gap-y-[0px] overflow-hidden bg-[#AFAFAF]">
            <span>{{ E_跨度菜单列表的项目.FullSpan }}</span>
          </li>
          <li class="menu-item lh-[1.2] flex flex-1 flex-col gap-y-[0px] overflow-hidden bg-[#AFAFAF]">
            <span>{{ E_跨度菜单列表的项目.ZeroSpan }}</span>
          </li>
          <li class="menu-item lh-[1.2] flex flex-1 flex-col gap-y-[0px] overflow-hidden bg-[#AFAFAF]">
            <span>{{ E_跨度菜单列表的项目.LastSpan }}</span>
          </li>
          <li class="menu-item lh-[1.2] flex flex-1 flex-col gap-y-[0px] overflow-hidden bg-[#AFAFAF]"></li>
          <li class="menu-item lh-[1.2] flex flex-1 flex-col gap-y-[0px] overflow-hidden bg-[#AFAFAF]"></li>
          <li class="menu-item lh-[1.2] flex flex-1 flex-col gap-y-[0px] overflow-hidden bg-[#AFAFAF]"></li>
          <li class="menu-item lh-[1.2] flex flex-1 flex-col gap-y-[0px] overflow-hidden bg-[#AFAFAF]"></li>
        </ul>

        <ul
          v-if="state.选项卡当前显示 === E_选项卡菜单.幅度菜单列表"
          class="flex h-[300px] flex-col justify-around gap-y-[4px]"
          data-box="幅度菜单列表"
        >
          <li class="menu-item lh-[1.2] flex flex-1 flex-col gap-y-[0px] overflow-hidden bg-[#AFAFAF]">
            <span>Ref Level</span>
            <span>
              {{ state.频谱仪状态.幅度输入状态.refLevel.value }}
              {{ state.频谱仪状态.幅度输入状态.refLevel.unit }}
            </span>
          </li>
          <li class="menu-item lh-[1.2] flex flex-1 flex-col gap-y-[0px] overflow-hidden bg-[#AFAFAF]">
            <span>#Attenuation</span>
            <!-- <span>TODO</span> -->
          </li>
          <li class="menu-item lh-[1.2] flex flex-1 flex-col gap-y-[0px] overflow-hidden bg-[#AFAFAF]"></li>
          <li class="menu-item lh-[1.2] flex flex-1 flex-col gap-y-[0px] overflow-hidden bg-[#AFAFAF]"></li>
          <li class="menu-item lh-[1.2] flex flex-1 flex-col gap-y-[0px] overflow-hidden bg-[#AFAFAF]"></li>
          <li class="menu-item lh-[1.2] flex flex-1 flex-col gap-y-[0px] overflow-hidden bg-[#AFAFAF]"></li>
          <li class="menu-item lh-[1.2] flex flex-1 flex-col gap-y-[0px] overflow-hidden bg-[#AFAFAF]"></li>
        </ul>

        <ul
          v-if="state.选项卡当前显示 === E_选项卡菜单.幅度单位列表"
          class="flex h-[300px] flex-col justify-around gap-y-[4px]"
          data-box="幅度单位列表"
        >
          <li class="menu-item lh-[1.2] flex flex-1 flex-col gap-y-[0px] overflow-hidden bg-[#AFAFAF]">
            <span>{{ E_幅度单位.dBm }}</span>
          </li>
          <li class="menu-item lh-[1.2] flex flex-1 flex-col gap-y-[0px] overflow-hidden bg-[#AFAFAF]">
            <span>{{ E_幅度单位.mV }}</span>
          </li>
          <li class="menu-item lh-[1.2] flex flex-1 flex-col gap-y-[0px] overflow-hidden bg-[#AFAFAF]">
            <span>{{ E_幅度单位.uV }}</span>
          </li>
          <li class="menu-item lh-[1.2] flex flex-1 flex-col gap-y-[0px] overflow-hidden bg-[#AFAFAF]">
            <span>{{ E_幅度单位.uA }}</span>
          </li>
          <li class="menu-item lh-[1.2] flex flex-1 flex-col gap-y-[0px] overflow-hidden bg-[#AFAFAF]"></li>
          <li class="menu-item lh-[1.2] flex flex-1 flex-col gap-y-[0px] overflow-hidden bg-[#AFAFAF]"></li>
          <li class="menu-item lh-[1.2] flex flex-1 flex-col gap-y-[0px] overflow-hidden bg-[#AFAFAF]"></li>
        </ul>
      </div>
    </div>

    <div class="ppy-btns absolute left-[768px] top-[120px] h-[415px] !overflow-visible" data-box="机器右边按键">
      <!-- 左上角. 长的 -->
      <div class="flex flex-col gap-y-[18px] !overflow-visible">
        <button class="ppy-btn !w-[62px]" @click="state.选项卡当前显示 = E_选项卡菜单.频率菜单列表">
          FREQ<br />Channel
        </button>
        <button class="ppy-btn !w-[62px]" @click="state.选项卡当前显示 = E_选项卡菜单.跨度菜单列表">
          SPAN<br />X Scale
        </button>
        <button class="ppy-btn !w-[62px]" @click="state.选项卡当前显示 = E_选项卡菜单.幅度菜单列表">
          AMPLITUDE<br />Y Scale
        </button>
        <button class="ppy-btn !w-[62px] opacity-0">#</button>
        <button class="ppy-btn !w-[62px] opacity-0">#</button>
      </div>
      <div class="mt-[20px] grid grid-cols-3 gap-[16.5px] !overflow-visible" data-box="数字键盘区域">
        <button class="ppy-btn" @click="执行点击数字按钮(E_数字键盘按键.Num7)">7</button>
        <button class="ppy-btn" @click="执行点击数字按钮(E_数字键盘按键.Num8)">8</button>
        <button class="ppy-btn" @click="执行点击数字按钮(E_数字键盘按键.Num9)">9</button>
        <button class="ppy-btn" @click="执行点击数字按钮(E_数字键盘按键.Num4)">4</button>
        <button class="ppy-btn" @click="执行点击数字按钮(E_数字键盘按键.Num5)">5</button>
        <button class="ppy-btn" @click="执行点击数字按钮(E_数字键盘按键.Num6)">6</button>
        <button class="ppy-btn" @click="执行点击数字按钮(E_数字键盘按键.Num1)">1</button>
        <button class="ppy-btn" @click="执行点击数字按钮(E_数字键盘按键.Num2)">2</button>
        <button class="ppy-btn" @click="执行点击数字按钮(E_数字键盘按键.Num3)">3</button>
        <button class="ppy-btn" @click="执行点击数字按钮(E_数字键盘按键.Num0)">0</button>
        <button class="ppy-btn" @click="执行点击数字按钮(E_数字键盘按键.Dot)">.</button>
        <button class="ppy-btn" @click="执行点击数字按钮(E_数字键盘按键.PlusMinus)">+/-</button>
      </div>
    </div>
  </div>
</template>

<style scoped>
@import url('./Helvetica.css');

.wrp {
  font-family: 'Helvetica Custom';
}

/* .wrp * {
  overflow: hidden;
} */

img[alt='频谱仪设备'] {
  width: calc(2554px * 0.5);
  max-width: fit-content;
  height: calc(1626px * 0.5);
  max-height: fit-content;
}

.ppy-btn {
  display: flex; /* 使用 flex 居中文本 */
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 30px;
  padding-left: 2px;
  overflow: hidden;
  font-size: 10px;
  line-height: 1.2;
  color: #333; /* 深灰色文字 */
  text-align: left;
  text-decoration: none;
  background-color: #e0e0e0; /* 按钮浅灰色背景 */
  border: 1px solid green;
  border: 1px solid #b0b0b0; /* 添加边框 */
  border-radius: 4px;
  box-shadow:
    1px 1px 2px rgb(0 0 0 / 20%),
    /* 轻微外阴影 */ -1px -1px 2px rgb(255 255 255 / 80%); /* 轻微外高光 */

  transition: all 0.1s ease-in-out; /* 平滑过渡效果 */

  /* width: 100%; */

  /* 宽度占满 grid 单元格 */

  /* height: 100%; */

  /* 高度占满 grid 单元格 */

  /* font-size: 20px; */

  /* 调整字体大小 */

  /* font-weight: bold; */

  /* 字体加粗 */

  /* border-radius: 4px; */

  /* 按钮圆角 */
}

.ppy-btn:active {
  background-color: #d5d5d5;
  border-color: #a0a0a0;
  box-shadow:
    inset 1px 1px 3px rgb(0 0 0 / 30%),
    inset -1px -1px 3px rgb(255 255 255 / 60%);
  transform: scale(0.98);
}

.menu-item {
  /* @apply bg-gray-200/50 p-[2px]; */
  font-size: 12px;

  /* border: 1px solid white; */
}

[alt='频谱仪设备'] {
  opacity: 1;
  transition: opacity 0.3s;
}

/* li,
.ppy-btns,
[data-box='屏幕'],
[data-box='菜单标题'] {
  box-shadow: 0 0 0 1px rgba(255, 0, 0, 0.5);
} */
</style>
