<script setup lang="ts">
import { ArrowLeft, Eye } from 'lucide-vue-next'
import { useRouter, useRoute } from 'vue-router'
import { ref, computed } from 'vue'

const router = useRouter()
const route = useRoute()
const isNew = computed(() => route.params.configId === 'new')
const selectedModel = ref('GD30')
const configVersion = ref('v1.0.0')
const transmissionVoltage = ref('1500V')
const transmissionCurrent = ref('10A')
const voltageMeasureOptions = ref([
  { value: '±2.5V', checked: true },
  { value: '±80V', checked: true },
  { value: '±600V', checked: false },
])
const supportFullWaveform = ref(true)
const supportDuty50 = ref(true)
const supportDuty100 = ref(true)
const overvoltageProtection = ref(true)
const overvoltageThreshold = ref('1600')
const overcurrentProtection = ref(true)
const overcurrentThreshold = ref('12')
const shortCircuitProtection = ref(true)
const highTempProtection = ref(true)
const highTempThreshold = ref('75')
const pulseWidthOptions = ref([
  { value: '0.25s', checked: true },
  { value: '0.5s', checked: true },
  { value: '1s', checked: true },
  { value: '2s', checked: true },
  { value: '4s', checked: true },
  { value: '8s', checked: true },
  { value: '16s', checked: true },
  { value: '32s', checked: true },
  { value: '64s', checked: true },
])
const waveformOptions = ref([
  { value: '0+0-', checked: true },
  { value: '+0-0', checked: true },
  { value: '+-', checked: true },
])
const samplingRateOptions = ref([
  { value: '50Hz', checked: true },
  { value: '60Hz', checked: true },
  { value: '100Hz', checked: true },
  { value: '1000Hz', checked: true },
])
</script>

<template>
  <div class="p-6">
    <!-- Page Header -->
    <div class="mb-6">
      <div class="flex items-center gap-4 mb-2">
        <button
          @click="router.go(-1)"
          class="p-2 rounded hover:bg-gray-100 transition-colors"
          style="color: rgba(0, 0, 0, 0.65)"
        >
          <ArrowLeft :size="20" />
        </button>
        <h2 class="text-2xl font-semibold">{{ isNew ? '新建配置文件' : '参数配置' }}</h2>
      </div>
      <p class="text-sm ml-12" style="color: rgba(0, 0, 0, 0.45)">{{ isNew ? '选择设备型号和参数，生成配置文件' : '配置设备型号的详细参数' }}</p>
    </div>

    <!-- Model Info Card (new mode: editable, edit mode: readonly) -->
    <div class="bg-white p-6 rounded-lg mb-6" style="box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05)">
      <h3 class="text-lg font-semibold mb-6">型号信息</h3>
      <div class="grid grid-cols-3 gap-x-12 gap-y-6">
        <div>
          <label class="block text-sm mb-2" style="color: rgba(0, 0, 0, 0.45)">适配型号</label>
          <select v-if="isNew" v-model="selectedModel" class="w-full px-3 py-2 border rounded" style="border-color: #D9D9D9; background-color: #fff">
            <option value="GD30">GD30 高密度电法仪</option>
            <option value="GT20">GT20 瞬变电磁仪</option>
            <option value="GM10">GM10 大地电磁仪</option>
          </select>
          <div v-else class="font-medium">GD30 高密度电法仪</div>
        </div>
        <div>
          <label class="block text-sm mb-2" style="color: rgba(0, 0, 0, 0.45)">配置文件版本</label>
          <input v-if="isNew" type="text" v-model="configVersion" class="w-full px-3 py-2 border rounded" style="border-color: #D9D9D9" placeholder="如 v1.0.0" />
          <div v-else style="color: #4a7c59">v1.2.0</div>
        </div>
        <div>
          <div class="text-sm mb-2" style="color: rgba(0, 0, 0, 0.45)">{{ isNew ? '状态' : '最后更新时间' }}</div>
          <span v-if="isNew" class="px-2 py-1 rounded text-xs" style="background-color: #FFFBE6; color: #FAAD14; border: 1px solid #FFE58F">待生成</span>
          <div v-else style="color: rgba(0, 0, 0, 0.65)">2024-03-01 10:30</div>
        </div>
      </div>
    </div>

    <!-- Transmission Parameters Card -->
    <div class="bg-white p-6 rounded-lg mb-6" style="box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05)">
      <h3 class="text-lg font-semibold mb-6">发射参数</h3>
      <div class="grid grid-cols-2 gap-x-12 gap-y-6">
        <div>
          <label class="block text-sm mb-2" style="color: rgba(0, 0, 0, 0.85)">
            最大发射电压
          </label>
          <select
            class="w-full px-3 py-2 border rounded"
            style="border-color: #D9D9D9; background-color: #fff"
            v-model="transmissionVoltage"
          >
            <option>500V</option>
            <option>800V</option>
            <option>1000V</option>
            <option>1200V</option>
            <option>1500V</option>
          </select>
        </div>
        <div>
          <label class="block text-sm mb-2" style="color: rgba(0, 0, 0, 0.85)">
            最大发射电流
          </label>
          <select
            class="w-full px-3 py-2 border rounded"
            style="border-color: #D9D9D9; background-color: #fff"
            v-model="transmissionCurrent"
          >
            <option>2A</option>
            <option>5A</option>
            <option>8A</option>
            <option>10A</option>
            <option>15A</option>
          </select>
        </div>
        <div class="col-span-2">
          <label class="block text-sm mb-3" style="color: rgba(0, 0, 0, 0.85)">
            发射脉宽
          </label>
          <div class="flex flex-wrap gap-2">
            <label
              v-for="option in pulseWidthOptions"
              :key="option.value"
              class="px-4 py-2 rounded border cursor-pointer transition-colors"
              :style="{
                borderColor: option.checked ? '#4a7c59' : '#D9D9D9',
                backgroundColor: option.checked ? '#eef5f0' : '#fff',
                color: option.checked ? '#4a7c59' : 'rgba(0, 0, 0, 0.65)',
              }"
            >
              <input type="checkbox" class="hidden" :checked="option.checked" readonly />
              {{ option.value }}
            </label>
          </div>
        </div>
        <div class="col-span-2">
          <label class="block text-sm mb-3" style="color: rgba(0, 0, 0, 0.85)">
            发射波形
          </label>
          <div class="flex flex-wrap gap-2">
            <label
              v-for="option in waveformOptions"
              :key="option.value"
              class="px-4 py-2 rounded border cursor-pointer transition-colors"
              :style="{
                borderColor: option.checked ? '#4a7c59' : '#D9D9D9',
                backgroundColor: option.checked ? '#eef5f0' : '#fff',
                color: option.checked ? '#4a7c59' : 'rgba(0, 0, 0, 0.65)',
              }"
            >
              <input type="checkbox" class="hidden" :checked="option.checked" readonly />
              {{ option.value }}
            </label>
          </div>
        </div>
        <div>
          <label class="block text-sm mb-2" style="color: rgba(0, 0, 0, 0.85)">支持全波形测量</label>
          <label class="flex items-center gap-2 cursor-pointer">
            <input type="checkbox" v-model="supportFullWaveform" class="w-4 h-4" style="accent-color: #4a7c59" />
            <span style="color: rgba(0, 0, 0, 0.65)">{{ supportFullWaveform ? '是' : '否' }}</span>
          </label>
        </div>
        <div>
          <label class="block text-sm mb-2" style="color: rgba(0, 0, 0, 0.85)">占空比支持</label>
          <div class="flex items-center gap-6">
            <label class="flex items-center gap-2 cursor-pointer">
              <input type="checkbox" v-model="supportDuty50" class="w-4 h-4" style="accent-color: #4a7c59" />
              <span style="color: rgba(0, 0, 0, 0.65)">50% 占空比</span>
            </label>
            <label class="flex items-center gap-2 cursor-pointer">
              <input type="checkbox" v-model="supportDuty100" class="w-4 h-4" style="accent-color: #4a7c59" />
              <span style="color: rgba(0, 0, 0, 0.65)">100% 占空比</span>
            </label>
          </div>
        </div>
      </div>
    </div>

    <!-- Acquisition Parameters Card -->
    <div class="bg-white p-6 rounded-lg mb-6" style="box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05)">
      <h3 class="text-lg font-semibold mb-6">采集参数</h3>
      <div class="grid grid-cols-2 gap-x-12 gap-y-6">
        <div class="col-span-2">
          <label class="block text-sm mb-3" style="color: rgba(0, 0, 0, 0.85)">电压测量范围</label>
          <div class="flex flex-wrap gap-2">
            <label
              v-for="option in voltageMeasureOptions"
              :key="option.value"
              class="px-4 py-2 rounded border cursor-pointer transition-colors"
              :style="{
                borderColor: option.checked ? '#4a7c59' : '#D9D9D9',
                backgroundColor: option.checked ? '#eef5f0' : '#fff',
                color: option.checked ? '#4a7c59' : 'rgba(0, 0, 0, 0.65)',
              }"
              @click="option.checked = !option.checked"
            >
              {{ option.value }}
            </label>
          </div>
        </div>
        <div class="col-span-2">
          <label class="block text-sm mb-3" style="color: rgba(0, 0, 0, 0.85)">
            采样率
          </label>
          <div class="flex flex-wrap gap-2">
            <label
              v-for="option in samplingRateOptions"
              :key="option.value"
              class="px-4 py-2 rounded border cursor-pointer transition-colors"
              :style="{
                borderColor: option.checked ? '#4a7c59' : '#D9D9D9',
                backgroundColor: option.checked ? '#eef5f0' : '#fff',
                color: option.checked ? '#4a7c59' : 'rgba(0, 0, 0, 0.65)',
              }"
            >
              <input type="checkbox" class="hidden" :checked="option.checked" readonly />
              {{ option.value }}
            </label>
          </div>
        </div>
        <div>
          <label class="block text-sm mb-2" style="color: rgba(0, 0, 0, 0.85)">
            支持通道数
          </label>
          <input
            type="number"
            class="w-full px-3 py-2 border rounded"
            style="border-color: #D9D9D9"
            value="12"
          />
        </div>
        <div>
          <label class="block text-sm mb-2" style="color: rgba(0, 0, 0, 0.85)">
            迭代次数范围
          </label>
          <div class="flex items-center gap-2">
            <input
              type="number"
              class="flex-1 px-3 py-2 border rounded"
              style="border-color: #D9D9D9"
              value="1"
            />
            <span style="color: rgba(0, 0, 0, 0.45)">-</span>
            <input
              type="number"
              class="flex-1 px-3 py-2 border rounded"
              style="border-color: #D9D9D9"
              value="256"
            />
          </div>
        </div>
      </div>
    </div>

    <!-- Protection Parameters Card -->
    <div class="bg-white p-6 rounded-lg mb-6" style="box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05)">
      <h3 class="text-lg font-semibold mb-6">保护参数</h3>
      <div class="grid grid-cols-2 gap-x-12 gap-y-6">
        <div>
          <label class="block text-sm mb-2" style="color: rgba(0, 0, 0, 0.85)">过压保护</label>
          <div class="flex items-center gap-4">
            <label class="flex items-center gap-2 cursor-pointer">
              <input type="checkbox" v-model="overvoltageProtection" class="w-4 h-4" style="accent-color: #4a7c59" />
              <span style="color: rgba(0, 0, 0, 0.65)">启用</span>
            </label>
            <input v-if="overvoltageProtection" type="number" class="w-32 px-3 py-1 border rounded text-sm" style="border-color: #D9D9D9" v-model="overvoltageThreshold" />
            <span v-if="overvoltageProtection" class="text-sm" style="color: rgba(0, 0, 0, 0.45)">V</span>
          </div>
        </div>
        <div>
          <label class="block text-sm mb-2" style="color: rgba(0, 0, 0, 0.85)">过流保护</label>
          <div class="flex items-center gap-4">
            <label class="flex items-center gap-2 cursor-pointer">
              <input type="checkbox" v-model="overcurrentProtection" class="w-4 h-4" style="accent-color: #4a7c59" />
              <span style="color: rgba(0, 0, 0, 0.65)">启用</span>
            </label>
            <input v-if="overcurrentProtection" type="number" class="w-32 px-3 py-1 border rounded text-sm" style="border-color: #D9D9D9" v-model="overcurrentThreshold" />
            <span v-if="overcurrentProtection" class="text-sm" style="color: rgba(0, 0, 0, 0.45)">A</span>
          </div>
        </div>
        <div>
          <label class="block text-sm mb-2" style="color: rgba(0, 0, 0, 0.85)">短路保护</label>
          <label class="flex items-center gap-2 cursor-pointer">
            <input type="checkbox" v-model="shortCircuitProtection" class="w-4 h-4" style="accent-color: #4a7c59" />
            <span style="color: rgba(0, 0, 0, 0.65)">{{ shortCircuitProtection ? '已启用' : '未启用' }}</span>
          </label>
        </div>
        <div>
          <label class="block text-sm mb-2" style="color: rgba(0, 0, 0, 0.85)">高温保护</label>
          <div class="flex items-center gap-4">
            <label class="flex items-center gap-2 cursor-pointer">
              <input type="checkbox" v-model="highTempProtection" class="w-4 h-4" style="accent-color: #4a7c59" />
              <span style="color: rgba(0, 0, 0, 0.65)">启用</span>
            </label>
            <input v-if="highTempProtection" type="number" class="w-32 px-3 py-1 border rounded text-sm" style="border-color: #D9D9D9" v-model="highTempThreshold" />
            <span v-if="highTempProtection" class="text-sm" style="color: rgba(0, 0, 0, 0.45)">°C</span>
          </div>
        </div>
      </div>
    </div>

    <!-- Network Parameters Card -->
    <div class="bg-white p-6 rounded-lg mb-6" style="box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05)">
      <h3 class="text-lg font-semibold mb-6">网络参数</h3>
      <div class="grid grid-cols-2 gap-x-12 gap-y-6">
        <div>
          <label class="block text-sm mb-2" style="color: rgba(0, 0, 0, 0.85)">WiFi SSID</label>
          <input
            type="text"
            class="w-full px-3 py-2 border rounded"
            style="border-color: #D9D9D9"
            value="GD30_Device"
          />
        </div>
        <div>
          <label class="block text-sm mb-2" style="color: rgba(0, 0, 0, 0.85)">WiFi密码</label>
          <input
            type="password"
            class="w-full px-3 py-2 border rounded"
            style="border-color: #D9D9D9"
            value="12345678"
          />
        </div>
        <div>
          <label class="block text-sm mb-2" style="color: rgba(0, 0, 0, 0.85)">默认IP地址</label>
          <input
            type="text"
            class="w-full px-3 py-2 border rounded"
            style="border-color: #D9D9D9"
            value="192.168.1.100"
          />
        </div>
        <div>
          <label class="block text-sm mb-2" style="color: rgba(0, 0, 0, 0.85)">子网掩码</label>
          <input
            type="text"
            class="w-full px-3 py-2 border rounded"
            style="border-color: #D9D9D9"
            value="255.255.255.0"
          />
        </div>
        <div>
          <label class="block text-sm mb-2" style="color: rgba(0, 0, 0, 0.85)">默认网关</label>
          <input
            type="text"
            class="w-full px-3 py-2 border rounded"
            style="border-color: #D9D9D9"
            value="192.168.1.1"
          />
        </div>
        <div>
          <label class="block text-sm mb-2" style="color: rgba(0, 0, 0, 0.85)">DNS服务器</label>
          <input
            type="text"
            class="w-full px-3 py-2 border rounded"
            style="border-color: #D9D9D9"
            value="8.8.8.8"
          />
        </div>
      </div>
    </div>

    <!-- Action Bar -->
    <div
      class="flex items-center justify-end gap-3 p-4 bg-white rounded-lg sticky bottom-0"
      style="box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.05)"
    >
      <button
        class="px-6 py-2 rounded"
        style="border: 1px solid #D9D9D9; color: rgba(0, 0, 0, 0.85)"
        @click="router.go(-1)"
      >
        取消
      </button>
      <template v-if="isNew">
        <button
          class="px-6 py-2 rounded flex items-center gap-2"
          style="border: 1px solid #D9D9D9; color: rgba(0, 0, 0, 0.85)"
        >
          <Eye :size="16" />
          预览配置
        </button>
        <button
          class="px-6 py-2 rounded text-white"
          style="background-color: #52C41A"
          @click="router.push('/config-files')"
        >
          确认生成配置文件
        </button>
      </template>
      <template v-else>
        <button
          class="px-6 py-2 rounded"
          style="border: 1px solid #D9D9D9; color: rgba(0, 0, 0, 0.85)"
        >
          重置默认
        </button>
        <button
          class="px-6 py-2 rounded flex items-center gap-2"
          style="border: 1px solid #D9D9D9; color: rgba(0, 0, 0, 0.85)"
        >
          <Eye :size="16" />
          预览配置
        </button>
        <button
          class="px-6 py-2 rounded text-white"
          style="background-color: #4a7c59"
        >
          下发配置
        </button>
      </template>
    </div>
  </div>
</template>
