<template>

  <home-card desc="Config" title="系统配置">

    <el-form ref="formRef" :model="form" label-width="120px" v-loading="loading">
      <el-form-item label="Scrapyd服务器数量">
        <span style="margin-left: 20px">{{ scrapyd_count }}</span>
      </el-form-item>

      <el-form-item label="默认用户名">
        <el-input v-model="form.username" disabled />
      </el-form-item>
      
      <el-form-item label="密码">
        <el-input
          v-model="form.password"
          type="password"
          show-password
          placeholder="请输入新密码，不修改请留空"
        />
      </el-form-item>
      
      <el-form-item label="Token过期时间">
        <el-input-number
          v-model="form.token_expire_minutes"
          :min="1"
          :max="10080"
        />
        <span class="form-tip">分钟</span>
      </el-form-item>
      
      <el-form-item label="调度历史保留">
        <el-input-number
          v-model="form.schedule_history_keep_days"
          :min="1"
          :max="365"
        />
        <span class="form-tip">天</span>
      </el-form-item>
      
      <el-form-item label="登录历史保留">
        <el-input-number
          v-model="form.login_history_keep_days"
          :min="1"
          :max="365"
        />
        <span class="form-tip">天</span>
      </el-form-item>
      
      <el-form-item>
        <el-button type="primary" @click="submitForm" :loading="submitting">保存</el-button>
        <el-button @click="resetForm">重置</el-button>
      </el-form-item>
    </el-form>
  </home-card>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import type { FormInstance } from 'element-plus'
import HomeCard from './HomeCard.vue'
import * as systemApi from '@/api/system'

const formRef = ref<FormInstance>()
const loading = ref(false)
const submitting = ref(false)

const form = reactive({
  username: 'admin',
  password: '',
  token_expire_minutes: 1440,  // 默认1天
  schedule_history_keep_days: 30,
  login_history_keep_days: 30
})

// 获取系统配置
const getSystemConfig = async () => {
  loading.value = true
  try {
    const res = await systemApi.getSystemConfig()
    if (res.code === 0) {
      // 避免直接覆盖整个表单，只更新需要的字段
      form.username = res.data.username || 'admin'
      form.token_expire_minutes = res.data.token_expire_minutes || 1440
      form.schedule_history_keep_days = res.data.schedule_history_keep_days || 30
      form.login_history_keep_days = res.data.login_history_keep_days || 30
      // 不设置密码，避免无意修改
      form.password = ''
    }
  } catch (error) {
    console.error('获取系统配置失败:', error)
  } finally {
    loading.value = false
  }
}

// 提交表单
const submitForm = async () => {
  if (!formRef.value) return
  
  submitting.value = true
  try {
    // 如果密码为空，不包含密码字段
    const data = form.password 
      ? { ...form }
      : { 
          username: form.username,
          token_expire_minutes: form.token_expire_minutes,
          schedule_history_keep_days: form.schedule_history_keep_days,
          login_history_keep_days: form.login_history_keep_days
        }
    
    const res = await systemApi.updateSystemConfig(data)
    if (res.code === 0) {
      ElMessage({
        type: 'success',
        message: '保存成功!'
      })
      // 清空密码字段
      form.password = ''
    }
  } catch (error) {
    console.error('更新系统配置失败:', error)
  } finally {
    submitting.value = false
  }
}

// 重置表单
const resetForm = () => {
  getSystemConfig()
}

const scrapyd_count = ref(0)
const getScrapydServerListInfo = async () => {
  try {
    const res = await systemApi.getScrapydServerList()
    if (res.code === 0) {
      scrapyd_count.value = res.data.total
    }
  } catch (error) {
    console.error('获取Scrapyd服务器列表失败:', error)
  }
}

onMounted(() => {
  getSystemConfig()

  getScrapydServerListInfo()
})
</script>

<style lang="scss" scoped>
.form-tip {
  margin-left: 10px;
  color: #909399;
  font-size: 14px;
}
</style>
