<template>
  <div v-loading="loading" class="ota-settings">
    <el-alert type="info" :closable="false" show-icon class="receive-alert" :title="receiveHint" />
    <el-form v-if="form" label-width="140px" size="small" class="form">
      <h4>传输</h4>
      <el-form-item label="带宽限制 (kb/s)">
        <el-input-number v-model="form.bandwidthKbps" :min="0" :max="100000" />
        <span class="hint">0 = 不限速</span>
      </el-form-item>
      <el-form-item label="并发车辆数">
        <el-input-number v-model="form.maxCar" :min="1" :max="50" />
      </el-form-item>

      <h4>网络延迟检测</h4>
      <el-form-item label="默认开启">
        <el-switch v-model="form.latencyEnabled" />
      </el-form-item>
      <el-form-item label="RTT 阈值 (ms)">
        <el-input-number v-model="form.rttThresholdMs" :min="10" :max="10000" />
      </el-form-item>
      <el-form-item label="超限策略">
        <el-radio-group v-model="form.overThreshold">
          <el-radio value="skip">跳过该车</el-radio>
          <el-radio value="confirm">仍允许（需确认）</el-radio>
        </el-radio-group>
      </el-form-item>

      <h4>备份</h4>
      <el-form-item label="周期 (分钟)">
        <el-input-number v-model="form.backupPeriodMinutes" :min="0" :max="10080" />
      </el-form-item>
      <el-form-item label="备份可执行文件">
        <el-switch v-model="form.backupExe" />
      </el-form-item>

      <h4>展示</h4>
      <el-form-item label="目标版本名称">
        <el-input v-model="form.newVersionName" placeholder="可选显示名" />
      </el-form-item>

      <el-form-item>
        <el-button type="primary" :disabled="!canWrite" :loading="saving" @click="onSave">保存设置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { ElMessage } from 'element-plus'
import { getOtaSettings, putOtaSettings } from '@/api/ota'
import type { OtaSettings } from '@/types/ota'
import { OTA_COPY } from './otaCopy'

defineProps<{ canWrite: boolean }>()
const emit = defineEmits<{ saved: [] }>()

const receiveHint = OTA_COPY.receiveHint
const form = ref<OtaSettings | null>(null)
const loading = ref(false)
const saving = ref(false)

async function load() {
  loading.value = true
  try {
    form.value = await getOtaSettings()
  } catch (e: any) {
    ElMessage.error(e?.message || '加载设置失败')
  } finally {
    loading.value = false
  }
}

async function onSave() {
  if (!form.value) return
  saving.value = true
  try {
    form.value = await putOtaSettings(form.value)
    ElMessage.success('已保存')
    emit('saved')
  } catch (e: any) {
    ElMessage.error(e?.message || '保存失败')
  } finally {
    saving.value = false
  }
}

onMounted(() => void load())
</script>

<style scoped>
.ota-settings {
  color: rgb(var(--mg-text-tint-rgb));
}
.receive-alert {
  margin-bottom: 14px;
  max-width: 720px;
}
.form {
  max-width: 560px;
}
h4 {
  margin: 16px 0 10px;
  font-size: 13px;
  color: var(--mg-primary);
  font-weight: 650;
}
.form h4:first-of-type {
  margin-top: 0;
}
.hint {
  margin-left: 10px;
  font-size: 12px;
  color: rgba(var(--mg-text-hi-rgb), 0.55);
}
</style>
