<template>
  <div class="bg-base-100 flex flex-col gap-4">
    <!-- 波形展示 -->
    <div class="card bg-base-200 shadow-xl mx-5">
      <div class="card-body">
        <h2 class="card-title">
          <Activity class="w-5 h-5" />
          波形显示
        </h2>
        <OscilloscopeWaveformDisplay />
      </div>
    </div>

    <!-- 示波器配置 -->
    <div class="card bg-base-200 shadow-xl mx-5">
      <div class="card-body">
        <h2 class="card-title">示波器配置</h2>
        <form class="flex flex-col gap-2" @submit.prevent="applyConfiguration">
          <div class="flex gap-4">
            <label>
              触发电平:
              <input
                type="number"
                v-model="osc.config.triggerLevel"
                min="0"
                max="255"
                class="input input-bordered w-24"
              />
            </label>
            <label>
              边沿:
              <select
                v-model="osc.config.triggerRisingEdge"
                class="select select-bordered w-24"
              >
                <option :value="true">上升沿</option>
                <option :value="false">下降沿</option>
              </select>
            </label>
            <label>
              水平偏移:
              <input
                type="number"
                v-model="osc.config.horizontalShift"
                class="input input-bordered w-24"
              />
            </label>
            <label>
              抽取率:
              <input
                type="number"
                v-model="osc.config.decimationRate"
                min="0"
                class="input input-bordered w-24"
              />
            </label>
            <label>
              自动刷新RAM:
              <input
                type="checkbox"
                v-model="osc.config.autoRefreshRAM"
                class="checkbox"
              />
            </label>
          </div>
          <div class="flex gap-2 mt-2">
            <button
              class="btn btn-primary"
              type="submit"
              :disabled="osc.isOperationInProgress.value"
            >
              应用配置
            </button>
            <button
              class="btn btn-secondary"
              type="button"
              @click="osc.resetConfiguration"
              :disabled="osc.isOperationInProgress.value"
            >
              重置
            </button>
          </div>
        </form>
      </div>
    </div>

    <!-- 捕获控制 -->
    <div class="card bg-base-200 shadow-xl mx-5">
      <div class="card-body flex gap-2">
        <h2 class="card-title">捕获控制</h2>
        <button
          class="btn btn-success"
          @click="osc.startCapture"
          :disabled="osc.isOperationInProgress.value"
        >
          开始捕获
        </button>
        <button
          class="btn btn-warning"
          @click="osc.stopCapture"
          :disabled="!osc.isCapturing.value"
        >
          停止捕获
        </button>
        <button
          class="btn btn-info"
          @click="osc.getOscilloscopeData"
          :disabled="osc.isOperationInProgress.value"
        >
          获取数据
        </button>
        <button
          class="btn btn-accent"
          @click="osc.generateTestData"
          :disabled="osc.isOperationInProgress.value"
        >
          生成测试数据
        </button>
      </div>
    </div>

    <!-- RAM刷新 -->
    <div class="card bg-base-200 shadow-xl mx-5">
      <div class="card-body flex gap-2">
        <h2 class="card-title">RAM 操作</h2>
        <button
          class="btn btn-outline"
          @click="osc.refreshRAM"
          :disabled="osc.isOperationInProgress.value"
        >
          刷新RAM
        </button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { Activity } from "lucide-vue-next";
import { OscilloscopeWaveformDisplay } from "@/components/Oscilloscope";
import { useEquipments } from "@/stores/equipments";
import { useOscilloscopeState } from "@/components/Oscilloscope/OscilloscopeManager";
import { useRequiredInjection } from "@/utils/Common";

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

// 获取示波器状态和操作
const osc = useRequiredInjection(useOscilloscopeState);

// 应用配置
const applyConfiguration = () => osc.applyConfiguration();
</script>
