<template>
  <div class="app-container param-config-page">
    <!-- 顶部说明卡片 -->
    <div class="param-hero">
      <div class="param-hero-left">
        <div class="param-hero-title">运行参数配置</div>
        <div class="param-hero-desc">
          当前页面为前端占位版，用于展示后续机器人运行参数配置方式。
          参数保存、恢复默认和下发机器人能力待后端及机器人侧接口确认后接入。
        </div>
      </div>
      <div class="param-hero-right">
        <el-tag type="info" effect="plain">前端占位</el-tag>
      </div>
    </div>

    <!-- 参数分组 Tab -->
    <div class="param-tabs-card">
      <el-tabs v-model="activeGroup" @tab-change="handleTabChange">
        <el-tab-pane
          v-for="group in paramGroups"
          :key="group.code"
          :label="group.name"
          :name="group.code"
        />
      </el-tabs>

      <!-- 当前分组说明 -->
      <div class="group-summary">
        <span class="group-summary-name">{{ currentGroup.name }}</span>
        <span class="group-summary-sep">—</span>
        <span class="group-summary-desc">{{ currentGroup.desc }}</span>
        <span class="group-summary-count">（共 {{ currentParams.length }} 个参数）</span>
      </div>

      <!-- 当前分组参数配置表单 -->
      <div class="param-grid">
        <div
          v-for="param in currentParams"
          :key="param.paramCode"
          class="param-card"
        >
          <div class="param-card-header">
            <div class="param-card-title">
              <span class="param-name">{{ param.paramName }}</span>
              <el-tag v-if="param.required" type="danger" size="small" effect="plain">必填</el-tag>
            </div>
            <div class="param-card-status">
              <el-tag :type="param.editable ? 'success' : 'warning'" size="small" effect="plain">
                {{ param.editable ? '可编辑' : '只读' }}
              </el-tag>
            </div>
          </div>

          <div class="param-card-code">{{ param.paramCode }}</div>

          <div class="param-card-control">
            <!-- string -->
            <el-input
              v-if="param.valueType === 'string'"
              v-model="param.paramValue"
              :disabled="!param.editable"
              :placeholder="param.remark"
              clearable
            />
            <!-- int -->
            <el-input-number
              v-else-if="param.valueType === 'int'"
              v-model="param.paramValue"
              :disabled="!param.editable"
              :min="param.min"
              :max="param.max"
              :precision="0"
              controls-position="right"
              style="width: 100%"
            />
            <!-- float -->
            <el-input-number
              v-else-if="param.valueType === 'float'"
              v-model="param.paramValue"
              :disabled="!param.editable"
              :min="param.min"
              :max="param.max"
              :precision="2"
              controls-position="right"
              style="width: 100%"
            />
            <!-- boolean -->
            <el-switch
              v-else-if="param.valueType === 'boolean'"
              v-model="param.paramValue"
              :disabled="!param.editable"
              inline-prompt
              active-text="开"
              inactive-text="关"
            />
            <!-- enum -->
            <el-select
              v-else-if="param.valueType === 'enum'"
              v-model="param.paramValue"
              :disabled="!param.editable"
              placeholder="请选择"
              style="width: 100%"
            >
              <el-option
                v-for="opt in param.options"
                :key="opt.value"
                :label="opt.label"
                :value="opt.value"
              />
            </el-select>
          </div>

          <div class="param-card-meta">
            <span v-if="param.unit" class="param-unit">单位：{{ param.unit }}</span>
            <span class="param-default">默认值：{{ param.defaultValue }}</span>
            <span v-if="param.min !== undefined && param.max !== undefined" class="param-range">
              范围：{{ param.min }}~{{ param.max }}
            </span>
          </div>

          <div class="param-card-remark">{{ param.remark }}</div>
        </div>
      </div>

      <!-- 底部操作按钮 -->
      <div class="param-actions">
        <el-button @click="refreshParams">刷新</el-button>
        <el-button type="warning" plain @click="resetCurrentGroup">恢复当前分组默认值</el-button>
        <el-button type="primary" @click="saveCurrentGroup">保存当前分组</el-button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, computed, getCurrentInstance } from 'vue'

const { proxy } = getCurrentInstance()

const activeGroup = ref('audio')

const paramGroups = [
  { code: 'audio', name: '音频参数', desc: '扬声器、麦克风、远程喊话相关参数' },
  { code: 'screen', name: '屏幕参数', desc: '亮度、待机、触摸交互相关参数' },
  { code: 'network', name: '网络参数', desc: '本地服务、视频流、网络连接相关参数' },
  { code: 'device', name: '设备参数', desc: '电量、充电、设备运行相关参数' },
  { code: 'service', name: '服务参数', desc: '问答、播报、视频、TTS 等服务参数' },
  { code: 'system', name: '系统参数', desc: '日志、存储、系统维护相关参数' }
]

const mockParams = reactive({
  audio: [
    {
      paramCode: 'speaker_volume',
      paramName: '扬声器音量',
      paramValue: 70,
      defaultValue: 70,
      valueType: 'int',
      unit: '%',
      editable: true,
      required: true,
      min: 0,
      max: 100,
      remark: '控制机器人扬声器播放音量'
    },
    {
      paramCode: 'mic_gain',
      paramName: '麦克风增益',
      paramValue: 60,
      defaultValue: 60,
      valueType: 'int',
      unit: '%',
      editable: true,
      required: true,
      min: 0,
      max: 100,
      remark: '调整麦克风采集灵敏度'
    },
    {
      paramCode: 'shout_volume',
      paramName: '远程喊话音量',
      paramValue: 80,
      defaultValue: 80,
      valueType: 'int',
      unit: '%',
      editable: true,
      required: false,
      min: 0,
      max: 100,
      remark: '远程喊话时的扬声器输出音量'
    },
    {
      paramCode: 'broadcast_enabled',
      paramName: '启用播报',
      paramValue: true,
      defaultValue: true,
      valueType: 'boolean',
      editable: true,
      required: false,
      remark: '关闭后将不执行语音播报'
    }
  ],
  screen: [
    {
      paramCode: 'screen_brightness',
      paramName: '屏幕亮度',
      paramValue: 80,
      defaultValue: 80,
      valueType: 'int',
      unit: '%',
      editable: true,
      required: true,
      min: 0,
      max: 100,
      remark: '调整机器人屏幕显示亮度'
    },
    {
      paramCode: 'standby_timeout',
      paramName: '待机超时时间',
      paramValue: 300,
      defaultValue: 300,
      valueType: 'int',
      unit: '秒',
      editable: true,
      required: false,
      min: 10,
      max: 3600,
      remark: '无操作后进入待机页的时间'
    },
    {
      paramCode: 'touch_wakeup_enabled',
      paramName: '触摸唤醒',
      paramValue: true,
      defaultValue: true,
      valueType: 'boolean',
      editable: true,
      required: false,
      remark: '待机时触摸屏幕是否唤醒服务页'
    },
    {
      paramCode: 'theme_mode',
      paramName: '主题模式',
      paramValue: '1',
      defaultValue: '1',
      valueType: 'enum',
      editable: true,
      required: false,
      options: [
        { value: '1', label: '默认' },
        { value: '2', label: '简洁' },
        { value: '3', label: '高对比' }
      ],
      remark: '屏幕显示主题模式'
    }
  ],
  network: [
    {
      paramCode: 'local_service_port',
      paramName: '本地服务端口',
      paramValue: 8080,
      defaultValue: 8080,
      valueType: 'int',
      editable: true,
      required: true,
      min: 1,
      max: 65535,
      remark: '本地后台服务监听端口'
    },
    {
      paramCode: 'video_stream_url',
      paramName: '视频流地址',
      paramValue: 'rtsp://192.168.1.100:554/stream',
      defaultValue: 'rtsp://192.168.1.100:554/stream',
      valueType: 'string',
      editable: true,
      required: false,
      remark: '机器人摄像头视频流地址'
    },
    {
      paramCode: 'network_check_enabled',
      paramName: '启用网络检测',
      paramValue: true,
      defaultValue: true,
      valueType: 'boolean',
      editable: true,
      required: false,
      remark: '定期检测网络连通状态'
    },
    {
      paramCode: 'network_check_interval',
      paramName: '网络检测间隔',
      paramValue: 60,
      defaultValue: 60,
      valueType: 'int',
      unit: '秒',
      editable: true,
      required: false,
      min: 10,
      max: 3600,
      remark: '两次网络检测之间的间隔'
    }
  ],
  device: [
    {
      paramCode: 'low_battery_threshold',
      paramName: '低电量阈值',
      paramValue: 20,
      defaultValue: 20,
      valueType: 'int',
      unit: '%',
      editable: true,
      required: true,
      min: 5,
      max: 50,
      remark: '低于该值时触发低电量告警'
    },
    {
      paramCode: 'auto_charge_enabled',
      paramName: '启用自动回充',
      paramValue: true,
      defaultValue: true,
      valueType: 'boolean',
      editable: true,
      required: false,
      remark: '低电量时自动返回充电桩'
    },
    {
      paramCode: 'max_work_temperature',
      paramName: '最高工作温度',
      paramValue: 45.0,
      defaultValue: 45.0,
      valueType: 'float',
      unit: '℃',
      editable: true,
      required: false,
      min: 0,
      max: 80,
      remark: '机器人温度超过该值时触发告警'
    },
    {
      paramCode: 'device_mode',
      paramName: '设备运行模式',
      paramValue: '1',
      defaultValue: '1',
      valueType: 'enum',
      editable: true,
      required: false,
      options: [
        { value: '1', label: '普通' },
        { value: '2', label: '安防' },
        { value: '3', label: '接待' }
      ],
      remark: '机器人当前运行场景模式'
    }
  ],
  service: [
    {
      paramCode: 'qa_service_enabled',
      paramName: '启用问答服务',
      paramValue: true,
      defaultValue: true,
      valueType: 'boolean',
      editable: true,
      required: false,
      remark: '关闭后机器人不响应问答服务'
    },
    {
      paramCode: 'tts_service_enabled',
      paramName: '启用 TTS 服务',
      paramValue: true,
      defaultValue: true,
      valueType: 'boolean',
      editable: true,
      required: false,
      remark: '关闭后不进行语音合成播报'
    },
    {
      paramCode: 'tts_voice_type',
      paramName: 'TTS 音色',
      paramValue: '1',
      defaultValue: '1',
      valueType: 'enum',
      editable: true,
      required: false,
      options: [
        { value: '1', label: '标准女声' },
        { value: '2', label: '标准男声' },
        { value: '3', label: '亲和女声' }
      ],
      remark: 'TTS 语音合成音色选择'
    },
    {
      paramCode: 'video_service_enabled',
      paramName: '启用视频服务',
      paramValue: true,
      defaultValue: true,
      valueType: 'boolean',
      editable: true,
      required: false,
      remark: '关闭后不提供视频预览'
    }
  ],
  system: [
    {
      paramCode: 'log_level',
      paramName: '日志级别',
      paramValue: '2',
      defaultValue: '2',
      valueType: 'enum',
      editable: true,
      required: true,
      options: [
        { value: '1', label: 'DEBUG' },
        { value: '2', label: 'INFO' },
        { value: '3', label: 'WARN' },
        { value: '4', label: 'ERROR' }
      ],
      remark: '系统日志记录的最低级别'
    },
    {
      paramCode: 'log_retention_days',
      paramName: '日志保留天数',
      paramValue: 180,
      defaultValue: 180,
      valueType: 'int',
      unit: '天',
      editable: true,
      required: false,
      min: 1,
      max: 365,
      remark: '本地运行日志保留天数'
    },
    {
      paramCode: 'storage_warning_threshold',
      paramName: '存储告警阈值',
      paramValue: 80,
      defaultValue: 80,
      valueType: 'int',
      unit: '%',
      editable: true,
      required: false,
      min: 50,
      max: 95,
      remark: '存储使用率超过该阈值时触发告警'
    },
    {
      paramCode: 'auto_cleanup_enabled',
      paramName: '启用自动清理',
      paramValue: false,
      defaultValue: false,
      valueType: 'boolean',
      editable: true,
      required: false,
      remark: '是否自动清理过期日志和缓存'
    }
  ]
})

const currentGroup = computed(() => paramGroups.find(item => item.code === activeGroup.value) || paramGroups[0])
const currentParams = computed(() => mockParams[activeGroup.value] || [])

function handleTabChange() {
  // Tab 切换时无需额外处理，computed 会自动更新
}

function refreshParams() {
  proxy.$modal.msgWarning('参数接口暂未接入，当前为前端模拟数据')
}

function resetCurrentGroup() {
  proxy.$modal.confirm('确认恢复当前分组参数为默认值吗？').then(() => {
    const params = currentParams.value
    for (const item of params) {
      item.paramValue = item.defaultValue
    }
    proxy.$modal.msgSuccess('已恢复当前分组默认值，保存接口暂未接入')
  }).catch(() => {})
}

function validateCurrentGroup() {
  for (const item of currentParams.value) {
    if (item.required && (item.paramValue === '' || item.paramValue === null || item.paramValue === undefined)) {
      proxy.$modal.msgError(`${item.paramName}不能为空`)
      return false
    }
    if ((item.valueType === 'int' || item.valueType === 'float') && item.paramValue !== '' && item.paramValue !== null && item.paramValue !== undefined) {
      const value = Number(item.paramValue)
      if (Number.isNaN(value)) {
        proxy.$modal.msgError(`${item.paramName}必须为数字`)
        return false
      }
      if (item.min !== undefined && value < item.min) {
        proxy.$modal.msgError(`${item.paramName}不能小于${item.min}`)
        return false
      }
      if (item.max !== undefined && value > item.max) {
        proxy.$modal.msgError(`${item.paramName}不能大于${item.max}`)
        return false
      }
    }
  }
  return true
}

function saveCurrentGroup() {
  if (!validateCurrentGroup()) return
  proxy.$modal.msgSuccess('参数保存接口暂未接入，当前仅完成前端配置演示')
}
</script>

<style scoped>
.param-config-page {
  padding-bottom: 24px;
}

/* 顶部说明卡片 */
.param-hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 16px 20px;
  background: #ffffff;
  border-radius: 4px;
  border: 1px solid #ebeef5;
  margin-bottom: 16px;
}
.param-hero-title {
  font-size: 16px;
  font-weight: 600;
  color: #303133;
  margin-bottom: 6px;
}
.param-hero-desc {
  font-size: 13px;
  color: #909399;
  line-height: 1.6;
}
.param-hero-right {
  flex-shrink: 0;
  margin-left: 16px;
  padding-top: 2px;
}

/* Tab 卡片 */
.param-tabs-card {
  background: #ffffff;
  border-radius: 4px;
  border: 1px solid #ebeef5;
  padding: 0 20px 20px;
}

/* 分组说明 */
.group-summary {
  font-size: 13px;
  color: #606266;
  margin-bottom: 16px;
  padding: 10px 0 0;
  border-top: 1px solid #f0f0f0;
}
.group-summary-name {
  font-weight: 600;
  color: #303133;
}
.group-summary-sep {
  margin: 0 6px;
  color: #c0c4cc;
}
.group-summary-count {
  color: #909399;
  margin-left: 4px;
}

/* 参数卡片网格 */
.param-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 20px;
}

@media (max-width: 1200px) {
  .param-grid {
    grid-template-columns: 1fr;
  }
}

/* 参数卡片 */
.param-card {
  background: #fafafa;
  border: 1px solid #f0f0f0;
  border-radius: 6px;
  padding: 14px 16px;
}
.param-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}
.param-card-title {
  display: flex;
  align-items: center;
  gap: 6px;
}
.param-name {
  font-size: 14px;
  font-weight: 600;
  color: #303133;
}
.param-card-code {
  font-size: 12px;
  color: #909399;
  font-family: 'Courier New', monospace;
  margin-bottom: 10px;
}
.param-card-control {
  margin-bottom: 8px;
}
.param-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  font-size: 12px;
  color: #909399;
  margin-bottom: 6px;
}
.param-card-remark {
  font-size: 12px;
  color: #c0c4cc;
  line-height: 1.5;
}

/* 底部操作按钮 */
.param-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding-top: 16px;
  border-top: 1px solid #f0f0f0;
}
</style>
