<template>
  <div class="app-container">
    <el-card>
      <div slot="header">
        <span>京粉订单设置</span>
      </div>
      
      <el-form :model="settings" :rules="rules" ref="settingsForm" label-width="120px">
        <el-form-item label="自动同步" prop="autoSync">
          <el-switch v-model="settings.autoSync" active-text="开启" inactive-text="关闭"></el-switch>
          <span style="margin-left: 10px; color: #666;">自动同步京东订单数据</span>
        </el-form-item>
        
        <el-form-item label="同步频率" prop="syncInterval" v-if="settings.autoSync">
          <el-select v-model="settings.syncInterval" placeholder="请选择同步频率">
            <el-option label="每5分钟" value="5"></el-option>
            <el-option label="每10分钟" value="10"></el-option>
            <el-option label="每30分钟" value="30"></el-option>
            <el-option label="每小时" value="60"></el-option>
          </el-select>
        </el-form-item>
        
        <el-form-item label="佣金计算" prop="commissionType">
          <el-radio-group v-model="settings.commissionType">
            <el-radio label="estimate">预估佣金</el-radio>
            <el-radio label="actual">实际佣金</el-radio>
          </el-radio-group>
        </el-form-item>
        
        <el-form-item label="订单状态" prop="orderStatus">
          <el-checkbox-group v-model="settings.orderStatus">
            <el-checkbox label="1">待确认</el-checkbox>
            <el-checkbox label="2">已确认</el-checkbox>
            <el-checkbox label="17">已完成</el-checkbox>
            <el-checkbox label="27">已结算</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        
        <el-form-item label="数据保留" prop="dataRetention">
          <el-input-number v-model="settings.dataRetention" :min="1" :max="365" label="数据保留天数"></el-input-number>
          <span style="margin-left: 10px; color: #666;">天（超过天数的数据将被清理）</span>
        </el-form-item>
        
        <el-form-item label="导出格式" prop="exportFormat">
          <el-radio-group v-model="settings.exportFormat">
            <el-radio label="excel">Excel</el-radio>
            <el-radio label="csv">CSV</el-radio>
            <el-radio label="json">JSON</el-radio>
          </el-radio-group>
        </el-form-item>
        
        <el-form-item label="通知设置" prop="notifications">
          <el-checkbox-group v-model="settings.notifications">
            <el-checkbox label="newOrder">新订单通知</el-checkbox>
            <el-checkbox label="commission">佣金到账通知</el-checkbox>
            <el-checkbox label="error">错误通知</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        
        <el-form-item label="API配置" prop="apiConfig">
          <el-input v-model="settings.apiConfig.url" placeholder="API接口地址" style="margin-bottom: 10px;"></el-input>
          <el-input v-model="settings.apiConfig.key" placeholder="API密钥" show-password></el-input>
        </el-form-item>
        
        <el-form-item>
          <el-button type="primary" @click="saveSettings">保存设置</el-button>
          <el-button @click="resetSettings">重置</el-button>
          <el-button @click="testConnection">测试连接</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    
    <el-card style="margin-top: 20px;">
      <div slot="header">
        <span>系统信息</span>
      </div>
      
      <el-descriptions :column="2" border>
        <el-descriptions-item label="最后同步时间">{{ systemInfo.lastSyncTime }}</el-descriptions-item>
        <el-descriptions-item label="同步状态">
          <el-tag :type="systemInfo.syncStatus === 'success' ? 'success' : 'danger'">
            {{ systemInfo.syncStatus === 'success' ? '成功' : '失败' }}
          </el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="数据总量">{{ systemInfo.totalRecords }}</el-descriptions-item>
        <el-descriptions-item label="今日新增">{{ systemInfo.todayRecords }}</el-descriptions-item>
        <el-descriptions-item label="系统版本">{{ systemInfo.version }}</el-descriptions-item>
        <el-descriptions-item label="运行时间">{{ systemInfo.uptime }}</el-descriptions-item>
      </el-descriptions>
    </el-card>
  </div>
</template>

<script>
export default {
  name: "OrderSettings",
  data() {
    return {
      settings: {
        autoSync: true,
        syncInterval: '30',
        commissionType: 'actual',
        orderStatus: ['1', '2', '17', '27'],
        dataRetention: 90,
        exportFormat: 'excel',
        notifications: ['newOrder', 'commission'],
        apiConfig: {
          url: '/jarvis/orderrows/list',
          key: 'your-api-key'
        }
      },
      rules: {
        syncInterval: [
          { required: true, message: '请选择同步频率', trigger: 'change' }
        ],
        commissionType: [
          { required: true, message: '请选择佣金计算方式', trigger: 'change' }
        ],
        orderStatus: [
          { required: true, message: '请选择订单状态', trigger: 'change' }
        ],
        dataRetention: [
          { required: true, message: '请输入数据保留天数', trigger: 'blur' }
        ],
        exportFormat: [
          { required: true, message: '请选择导出格式', trigger: 'change' }
        ]
      },
      systemInfo: {
        lastSyncTime: '2025-01-27 15:30:25',
        syncStatus: 'success',
        totalRecords: 4307,
        todayRecords: 45,
        version: 'v1.0.0',
        uptime: '15天 8小时 32分钟'
      }
    }
  },
  methods: {
    saveSettings() {
      this.$refs.settingsForm.validate((valid) => {
        if (valid) {
          this.$message.success('设置保存成功')
          console.log('保存的设置:', this.settings)
        } else {
          this.$message.error('请检查表单填写')
        }
      })
    },
    resetSettings() {
      this.$confirm('确定要重置所有设置吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.settings = {
          autoSync: true,
          syncInterval: '30',
          commissionType: 'actual',
          orderStatus: ['1', '2', '17', '27'],
          dataRetention: 90,
          exportFormat: 'excel',
          notifications: ['newOrder', 'commission'],
          apiConfig: {
            url: '/jarvis/orderrows/list',
            key: 'your-api-key'
          }
        }
        this.$message.success('设置已重置')
      })
    },
    testConnection() {
      this.$message.info('正在测试API连接...')
      // 这里可以添加实际的API连接测试逻辑
      setTimeout(() => {
        this.$message.success('API连接测试成功')
      }, 1000)
    }
  }
}
</script>

<style scoped>
.el-form-item {
  margin-bottom: 20px;
}
</style> 