<script setup lang="ts">
import { ref } from 'vue'
import { Info, Plus, Search, X } from 'lucide-vue-next'

const showDrawer = ref(false)
const newModel = ref('')
const newVersion = ref('')
const newTransVoltage = ref('1500V')
const newTransCurrent = ref('10A')

interface ConfigFile {
  configId: string
  model: string
  version: string
  createdTime: string
  status: '生效' | '已停用'
}

const configFiles: ConfigFile[] = [
  {
    configId: 'CFG-GD30-v1.2.0',
    model: 'GD-30 Supreme',
    version: 'v1.2.0',
    createdTime: '2024-03-01 10:30',
    status: '生效',
  },
  {
    configId: 'CFG-GD20-v1.5.3',
    model: 'GD-20 Supreme',
    version: 'v1.5.3',
    createdTime: '2024-02-28 14:20',
    status: '生效',
  },
]

const getStatusStyle = (status: ConfigFile['status']) => {
  switch (status) {
    case '生效':
      return {
        backgroundColor: '#F6FFED',
        color: '#52C41A',
        border: '1px solid #B7EB8F',
      }
    case '已停用':
      return {
        backgroundColor: '#FAFAFA',
        color: 'rgba(0, 0, 0, 0.45)',
        border: '1px solid #D9D9D9',
      }
  }
}
</script>

<template>
  <div class="p-6">
    <!-- Page Header -->
    <div class="mb-6">
      <div class="flex items-center justify-between mb-2">
        <h2 class="text-2xl font-semibold">配置文件管理</h2>
        <div class="flex items-center gap-3">
          <button
            class="px-4 py-2 rounded text-white flex items-center gap-2"
            style="background-color: #4a7c59"
            @click="showDrawer = true"
          >
            <Plus :size="16" />
            新建配置
          </button>
        </div>
      </div>
      <p class="text-sm" style="color: rgba(0, 0, 0, 0.45)">管理设备型号配置文件</p>
    </div>

    <!-- Info Banner -->
    <div
      class="mb-6 p-4 rounded-lg flex items-start gap-3"
      style="background-color: #eef5f0; border: 1px solid #a3c4ad"
    >
      <Info :size="20" style="color: #4a7c59; flex-shrink: 0; margin-top: 2px" />
      <div style="color: #2d5a3d">
        <div class="font-medium mb-1">配置文件说明</div>
        <div class="text-sm">
          配置文件按设备型号绑定适配，包含发射参数、采集参数、网络参数等。每个型号可以有1个配置版本。
        </div>
      </div>
    </div>

    <!-- Filter Card -->
    <div class="bg-white p-6 rounded-lg mb-6" style="box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05)">
      <div class="grid grid-cols-4 gap-4">
        <div>
          <label class="block text-sm mb-2" style="color: rgba(0, 0, 0, 0.65)">适配型号</label>
          <select
            class="w-full px-3 py-2 border rounded"
            style="border-color: #D9D9D9; background-color: #fff"
          >
            <option>全部型号</option>
            <option>GD-30 Supreme</option>
            <option>GD-20 Supreme</option>
            <option>GD-10 Supreme</option>
          </select>
        </div>
        <div>
          <label class="block text-sm mb-2" style="color: rgba(0, 0, 0, 0.65)">配置版本</label>
          <select
            class="w-full px-3 py-2 border rounded"
            style="border-color: #D9D9D9; background-color: #fff"
          >
            <option>全部版本</option>
            <option>v1.0.x</option>
            <option>v1.1.x</option>
            <option>v1.2.x</option>
          </select>
        </div>
        <div>
          <label class="block text-sm mb-2" style="color: rgba(0, 0, 0, 0.65)">关键字</label>
          <input
            type="text"
            class="w-full px-3 py-2 border rounded"
            style="border-color: #D9D9D9"
            placeholder="搜索配置文件或描述"
          />
        </div>
        <div class="flex items-end">
          <button
            class="w-full px-4 py-2 rounded text-white flex items-center justify-center gap-2"
            style="background-color: #4a7c59"
          >
            <Search :size="16" />
            查询
          </button>
        </div>
      </div>
    </div>

    <!-- Config File List -->
    <div class="bg-white rounded-lg mb-6" style="box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05)">
      <div class="p-6 border-b" style="border-color: #F0F0F0">
        <h3 class="text-lg font-semibold">配置文件列表</h3>
      </div>
      <div class="overflow-x-auto">
        <table class="w-full">
          <thead style="background-color: #FAFAFA">
            <tr>
              <th class="px-6 py-3 text-left text-sm font-medium" style="color: rgba(0, 0, 0, 0.85)">配置文件</th>
              <th class="px-6 py-3 text-left text-sm font-medium" style="color: rgba(0, 0, 0, 0.85)">适配型号</th>
              <th class="px-6 py-3 text-left text-sm font-medium" style="color: rgba(0, 0, 0, 0.85)">版本</th>
              <th class="px-6 py-3 text-left text-sm font-medium" style="color: rgba(0, 0, 0, 0.85)">创建时间</th>
              <th class="px-6 py-3 text-left text-sm font-medium" style="color: rgba(0, 0, 0, 0.85)">状态</th>
              <th class="px-6 py-3 text-left text-sm font-medium" style="color: rgba(0, 0, 0, 0.85)">操作</th>
            </tr>
          </thead>
          <tbody>
            <tr
              v-for="(config, index) in configFiles"
              :key="index"
              class="border-b"
              style="border-color: #F0F0F0"
            >
              <td class="px-6 py-4" style="color: #4a7c59">{{ config.configId }}</td>
              <td class="px-6 py-4">{{ config.model }}</td>
              <td class="px-6 py-4" style="color: rgba(0, 0, 0, 0.65)">{{ config.version }}</td>
              <td class="px-6 py-4" style="color: rgba(0, 0, 0, 0.65)">{{ config.createdTime }}</td>
              <td class="px-6 py-4">
                <span class="px-2 py-1 rounded text-xs" :style="getStatusStyle(config.status)">
                  {{ config.status }}
                </span>
              </td>
              <td class="px-6 py-4">
                <div class="flex items-center gap-3">
                  <button class="text-sm" style="color: #4a7c59">详情</button>
                  <button class="text-sm" style="color: #4a7c59">编辑</button>
                  <button class="text-sm" style="color: #4a7c59">下载</button>
                  <button class="text-sm" style="color: #FF4D4F">删除</button>
                </div>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>

    <!-- Pagination -->
    <div
      class="bg-white p-4 rounded-lg flex items-center justify-between"
      style="box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05)"
    >
      <div class="text-sm" style="color: rgba(0, 0, 0, 0.65)">显示 1-10 / 共 48 条</div>
      <div class="flex items-center gap-2">
        <button
          class="px-3 py-1 rounded border"
          style="border-color: #D9D9D9; color: rgba(0, 0, 0, 0.45)"
          disabled
        >
          上一页
        </button>
        <button class="px-3 py-1 rounded" style="background-color: #4a7c59; color: #fff">1</button>
        <button class="px-3 py-1 rounded border" style="border-color: #D9D9D9; color: rgba(0, 0, 0, 0.85)">2</button>
        <button class="px-3 py-1 rounded border" style="border-color: #D9D9D9; color: rgba(0, 0, 0, 0.85)">3</button>
        <button class="px-3 py-1 rounded border" style="border-color: #D9D9D9; color: rgba(0, 0, 0, 0.85)">下一页</button>
      </div>
    </div>

    <!-- New Config Drawer -->
    <div v-if="showDrawer" class="fixed inset-0 z-50 flex justify-end" style="background-color: rgba(0,0,0,0.45)" @click.self="showDrawer = false">
      <div class="bg-white w-[520px] h-full flex flex-col" style="box-shadow: -4px 0 12px rgba(0,0,0,0.1)">
        <div class="flex items-center justify-between p-5 border-b" style="border-color: #F0F0F0">
          <h3 class="text-lg font-semibold">新建配置文件</h3>
          <button @click="showDrawer = false" class="p-1 rounded hover:bg-gray-100" style="color: rgba(0,0,0,0.45)"><X :size="18" /></button>
        </div>

        <div class="flex-1 overflow-y-auto p-6 space-y-6">
          <!-- 基本信息 -->
          <div class="p-5 rounded-lg" style="background-color: #FAFAFA; border: 1px solid #F0F0F0">
            <h4 class="text-base font-semibold mb-4">基本信息</h4>
            <div class="space-y-4">
              <div>
                <label class="block text-sm mb-2" style="color: rgba(0,0,0,0.85)">适配型号 <span style="color: #FF4D4F">*</span></label>
                <select v-model="newModel" class="w-full px-3 py-2 border rounded text-sm" style="border-color: #D9D9D9; background-color: #fff">
                  <option value="">请选择型号</option>
                  <option>GD-30 Supreme</option>
                  <option>GD-20 Supreme</option>
                  <option>GD-10 Supreme</option>
                </select>
              </div>
              <div>
                <label class="block text-sm mb-2" style="color: rgba(0,0,0,0.85)">配置版本 <span style="color: #FF4D4F">*</span></label>
                <input v-model="newVersion" type="text" class="w-full px-3 py-2 border rounded text-sm" style="border-color: #D9D9D9" placeholder="如 v1.0.0" />
              </div>
            </div>
          </div>

          <!-- 发射参数 -->
          <div class="p-5 rounded-lg" style="background-color: #FAFAFA; border: 1px solid #F0F0F0">
            <h4 class="text-base font-semibold mb-4">发射参数</h4>
            <div class="space-y-4">
              <div>
                <label class="block text-sm mb-1" style="color: rgba(0,0,0,0.65)">最大发射电压</label>
                <select v-model="newTransVoltage" class="w-full px-3 py-2 border rounded text-sm" style="border-color: #D9D9D9; background-color: #fff">
                  <option>500V</option><option>800V</option><option>1000V</option><option>1200V</option><option>1500V</option>
                </select>
              </div>
              <div>
                <label class="block text-sm mb-1" style="color: rgba(0,0,0,0.65)">最大发射电流</label>
                <select v-model="newTransCurrent" class="w-full px-3 py-2 border rounded text-sm" style="border-color: #D9D9D9; background-color: #fff">
                  <option>2A</option><option>5A</option><option>8A</option><option>10A</option><option>15A</option>
                </select>
              </div>
                            <div>
                <label class="block text-sm mb-1" style="color: rgba(0,0,0,0.65)">占空比</label>
                <select class="w-full px-3 py-2 border rounded text-sm" style="border-color: #D9D9D9; background-color: #fff">
                  <option>50%、100%</option><option>50%</option>
                </select>
              </div>
                            <div>
                <label class="block text-sm mb-1" style="color: rgba(0,0,0,0.65)">脉宽宽度</label>
                <select class="w-full px-3 py-2 border rounded text-sm" style="border-color: #D9D9D9; background-color: #fff">
                  <option>0.25s、0.5s、1s、2s、4s、8s、16s、32s、64s</option><option>0.25s、0.5s、1s、2s、4s、8s</option>
                </select>
              </div>
              <div>
                <label class="block text-sm mb-1" style="color: rgba(0,0,0,0.65)">迭代次数</label>
                <select class="w-full px-3 py-2 border rounded text-sm" style="border-color: #D9D9D9; background-color: #fff">
                  <option>1~256</option>
                </select>
              </div>
            </div>
          </div>

          <!-- 采集参数 -->
          <div class="p-5 rounded-lg" style="background-color: #FAFAFA; border: 1px solid #F0F0F0">
            <h4 class="text-base font-semibold mb-4">采集参数</h4>
            <div class="space-y-4">
              <div>
                <label class="block text-sm mb-1" style="color: rgba(0,0,0,0.65)">支持通道数</label>
                <input type="number" class="w-full px-3 py-2 border rounded text-sm" style="border-color: #D9D9D9" value="12" />
              </div>
              <div>
                <label class="block text-sm mb-1" style="color: rgba(0,0,0,0.65)">采样率</label>
                <select class="w-full px-3 py-2 border rounded text-sm" style="border-color: #D9D9D9; background-color: #fff">
                  <option>50Hz、60Hz、100Hz、1000Hz</option><option>50Hz、60Hz</option>
                </select>
              </div>
                            <div>
                <label class="block text-sm mb-1" style="color: rgba(0,0,0,0.65)">电压测量量程</label>
                <select class="w-full px-3 py-2 border rounded text-sm" style="border-color: #D9D9D9; background-color: #fff">
                  <option>±2.5V、±80V</option><option>±80V、±600V</option>
                </select>
              </div>
              <div>
                <label class="block text-sm mb-1" style="color: rgba(0,0,0,0.65)">全波形采集</label>
                <select class="w-full px-3 py-2 border rounded text-sm" style="border-color: #D9D9D9; background-color: #fff">
                  <option>支持</option><option>不支持</option>
                </select>
              </div>
            </div>
          </div>

          <!-- 网络参数 -->
          <div class="p-5 rounded-lg" style="background-color: #FAFAFA; border: 1px solid #F0F0F0">
            <h4 class="text-base font-semibold mb-4">网络参数</h4>
            <div class="space-y-4">
              <div>
                <label class="block text-sm mb-1" style="color: rgba(0,0,0,0.65)">WiFi SSID 前缀</label>
                <input type="text" class="w-full px-3 py-2 border rounded text-sm" style="border-color: #D9D9D9" placeholder="如 GD30_" />
              </div>
            </div>
          </div>
        </div>

        <div class="flex items-center justify-end gap-3 p-5 border-t" style="border-color: #F0F0F0">
          <button class="px-4 py-2 rounded text-sm" style="border: 1px solid #D9D9D9; color: rgba(0,0,0,0.85)" @click="showDrawer = false">取消</button>
          <button class="px-4 py-2 rounded text-white text-sm" :style="{ backgroundColor: newModel && newVersion ? '#4a7c59' : '#D9D9D9' }" :disabled="!newModel || !newVersion" @click="showDrawer = false">确认生成配置文件</button>
        </div>
      </div>
    </div>
  </div>
</template>
