<template>
  <div class="bg-base-100 flex flex-col gap-10 mb-5">
    <!-- 逻辑信号展示 -->
    <div class="card bg-base-200 shadow-xl mx-5">
      <div class="card-body">
        <h2 class="card-title flex justify-between items-center">
          <div class="flex items-center gap-2">
            <Zap class="w-5 h-5" />
            逻辑信号分析
          </div>
          <div class="flex items-center gap-2">
            <button class="btn btn-sm btn-error" @click="handleDeleteData">
              清空
            </button>
          </div>
        </h2>
        <LogicalWaveFormDisplay />
      </div>
    </div>

    <!-- 触发设置 -->
    <div class="card bg-base-200 shadow-xl mx-5">
      <div class="card-body">
        <h2 class="card-title">
          <Settings class="w-5 h-5" />
          触发设置
        </h2>
        <TriggerSettings />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { Zap, Settings, Layers } from "lucide-vue-next";
import { useEquipments } from "@/stores/equipments";
import {
  LogicalWaveFormDisplay,
  TriggerSettings,
  useLogicAnalyzerState,
} from "@/components/LogicAnalyzer";
import { useRequiredInjection } from "@/utils/Common";

const analyzer = useRequiredInjection(useLogicAnalyzerState);


function handleDeleteData() {
  analyzer.logicData.value = undefined;
}

// 使用全局设备配置
const equipments = useEquipments();
</script>
