<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 flex flex-row justify-between">
          <div class="flex items-center gap-2">
            <Activity class="w-5 h-5" />
            波形显示
          </div>
          <div class="flex items-center gap-2">
            <button class="btn btn-sm btn-warning" @click="osc.stopCapture" :disabled="!osc.isCapturing.value">
              停止捕获
            </button>
            <div class="flex items-center gap-2">
              <button class="btn btn-sm btn-error" @click="osc.clearOscilloscopeData">
                清空
              </button>
            </div>
          </div>
        </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 flex-row items-center justify-between gap-4">
            <label>
              边沿触发:
              <select v-model="osc.config.triggerRisingEdge" class="select select-bordered w-24">
                <option :value="true">上升沿</option>
                <option :value="false">下降沿</option>
              </select>
            </label>
            <label>
              触发电平:
              <div class="flex items-center gap-2">
                <input type="range" min="0" max="255" step="1" v-model="osc.config.triggerLevel"
                  class="range range-sm w-50" />
                <input type="number" v-model="osc.config.triggerLevel" min="0" max="255"
                  class="input input-bordered w-24" />
              </div>
            </label>
            <label>
              水平偏移:
              <div class="flex items-center gap-2">
                <input type="range" min="0" max="1000" step="1" v-model="osc.config.horizontalShift"
                  class="range range-sm w-50" />
                <input type="number" v-model="osc.config.horizontalShift" min="0" max="1000"
                  class="input input-bordered w-24" />
              </div>
            </label>
            <label>
              抽取率:
              <div class="flex items-center gap-2">
                <input type="range" min="0" max="100" step="1" v-model="osc.config.decimationRate"
                  class="range range-sm w-50" />
                <input type="number" v-model="osc.config.decimationRate" min="0" max="100"
                  class="input input-bordered w-24" />
              </div>
            </label>
          </div>
          <div class="flex gap-4">
          </div>
          <div class="flex items-center justify-between gap-2 mt-2">
            <label>
              刷新间隔(ms):
              <div class="flex items-center gap-2">
                <input type="range" min="100" max="3000" step="100" v-model="osc.refreshIntervalMs.value"
                  class="range range-sm w-50" />
                <input type="number" min="100" max="3000" step="100" v-model="osc.refreshIntervalMs.value"
                  class="input input-bordered w-24" />
              </div>
            </label>
            <div class="flex items-center gap-2">
              <button class="btn btn-primary" type="submit" :disabled="osc.isApplying.value || osc.isCapturing.value">
                应用配置
              </button>
              <button class="btn btn-secondary" type="button" @click="osc.resetConfiguration"
                :disabled="osc.isApplying.value || osc.isCapturing.value">
                重置
              </button>
              <button class="btn btn-outline" @click="osc.refreshRAM" :disabled="osc.isApplying.value || osc.isCapturing.value">
                刷新RAM
              </button>
              <!-- <button class="btn btn-accent" @click="osc.generateTestData" :disabled="osc.isOperationInProgress.value">
              生成测试数据
            </button> -->
            </div>
          </div>
        </form>
      </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>
