<template>
  <div class="settings-page">
    <div class="settings-card">
      <el-tabs>
        <el-tab-pane label="基础设置">
          <el-form :model="settings" label-width="160px">
            <el-form-item label="渠道费率 (%)"><el-input-number v-model="settings.payment_channel_fee_rate" :precision="2" /></el-form-item>
            <el-form-item label="首重运费"><el-input-number v-model="settings.shipping_fee_first_weight" :precision="2" /></el-form-item>
            <el-form-item label="续重单价"><el-input-number v-model="settings.shipping_fee_per_gram" :precision="2" /></el-form-item>
            <el-form-item label="服务费率 (%)"><el-input-number v-model="settings.service_fee_rate" :precision="2" /></el-form-item>
            <el-form-item label="税费 (%)"><el-input-number v-model="settings.tax_rate" :precision="2" /></el-form-item>
            <el-form-item label="邀请奖励积分"><el-input-number v-model="settings.invite_credit_reward" /></el-form-item>
            <el-form-item label="验证码功能"><el-switch v-model="verifyEnabled" active-value="true" inactive-value="false" /></el-form-item>
            <el-form-item><el-button type="primary" @click="saveSettings">保存</el-button></el-form-item>
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="SMTP设置">
          <el-form :model="smtp" label-width="160px">
            <el-form-item label="SMTP服务器"><el-input v-model="smtp.smtp_host" /></el-form-item>
            <el-form-item label="端口"><el-input v-model="smtp.smtp_port" /></el-form-item>
            <el-form-item label="用户名"><el-input v-model="smtp.smtp_user" /></el-form-item>
            <el-form-item label="密码"><el-input v-model="smtp.smtp_password" type="password" show-password /></el-form-item>
            <el-form-item label="发件人"><el-input v-model="smtp.smtp_from" /></el-form-item>
            <el-form-item><el-button type="primary" @click="saveSMTP">保存</el-button></el-form-item>
          </el-form>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { adminApi } from '../../api'

const settings = reactive<Record<string, any>>({ 
  payment_channel_fee_rate: 0, 
  shipping_fee_first_weight: 0, 
  shipping_fee_per_gram: 0, 
  service_fee_rate: 0,
  tax_rate: 0,
  invite_credit_reward: 0 
})
const verifyEnabled = ref('true')
const smtp = reactive({ smtp_host: '', smtp_port: '587', smtp_user: '', smtp_password: '', smtp_from: '' })

async function fetchSettings() {
  const res: any = await adminApi.getSettings()
  const data = res.data || {}
  Object.keys(settings).forEach(k => { if (data[k] !== undefined) settings[k] = data[k] })
  verifyEnabled.value = data.verification_code_enabled || 'true'
  Object.keys(smtp).forEach(k => { if (data[k] !== undefined) (smtp as any)[k] = data[k] })
}

async function saveSettings() {
  await adminApi.updateSettings({ settings: { ...settings, verification_code_enabled: verifyEnabled.value } })
  ElMessage.success('保存成功')
}

async function saveSMTP() {
  await adminApi.updateSMTP(smtp)
  ElMessage.success('保存成功')
}

onMounted(fetchSettings)
</script>

<style scoped lang="scss">
.settings-page { padding: 0; }
.settings-card { background: #2d2d44; border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 12px; padding: 24px; }

:deep(.el-checkbox__label) { color: rgba(255, 255, 255, 0.8); }
:deep(.el-checkbox__input.is-checked .el-checkbox__inner) { background: #4e6ef2; border-color: #4e6ef2; }
:deep(.el-divider__text) { color: rgba(255, 255, 255, 0.6); background: #2d2d44; }
</style>
