<template>
  <div class="settings-page">
    <a-page-header title="系统设置" sub-title="配置系统全局参数" />
    
    <div class="settings-container">
      <a-card title="签到奖励设置" class="setting-card">
        <a-form :model="signInConfig" layout="vertical">
          <a-form-item label="每日签到奖励 (Code币)" help="用户每日签到固定获取的奖励数量">
            <a-input-number v-model:value="signInConfig.dailyReward" :min="1" :max="1000" style="width: 200px">
              <template #addonAfter>币</template>
            </a-input-number>
          </a-form-item>
          
          <a-form-item label="补签消耗 (Code币)" help="用户补签因错过签到日期的消耗，0表示不可补签">
            <a-input-number v-model:value="signInConfig.makeupCost" :min="0" :max="1000" style="width: 200px">
              <template #addonAfter>币</template>
            </a-input-number>
          </a-form-item>

          <a-form-item label="允许补签天数" help="允许补签过去多少天内的记录">
            <a-input-number v-model:value="signInConfig.makeupDays" :min="0" :max="30" style="width: 200px">
              <template #addonAfter>天</template>
            </a-input-number>
          </a-form-item>

          <a-form-item>
            <a-button type="primary" :loading="saving" @click="handleSaveSignInConfig">
              保存配置
            </a-button>
          </a-form-item>
        </a-form>
      </a-card>

      <!-- 可以在此添加其他设置卡片 -->
      <a-card title="其他设置" class="setting-card">
        <a-empty description="暂无其他设置项" image="simple" />
      </a-card>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { message } from 'ant-design-vue'

const saving = ref(false)

const signInConfig = reactive({
  dailyReward: 10,
  makeupCost: 5,
  makeupDays: 7
})

async function handleSaveSignInConfig() {
  saving.value = true
  // 模拟保存接口调用
  await new Promise(resolve => setTimeout(resolve, 800))
  saving.value = false
  message.success('签到配置已保存')
}
</script>

<style scoped>
.settings-page {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.settings-container {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: 800px;
}

.setting-card {
  border-radius: 8px;
}
</style>

