<template>
  <view class="rule-container">
    <view class="header">
      <text class="title">分润规则配置</text>
    </view>
    
    <view class="form-container">
      <uni-forms :model="ruleForm" ref="formRef">
        <uni-forms-item label="分销员ID" required>
          <uni-easyinput v-model="ruleForm.distributor_id" placeholder="请输入分销员ID" type="number" />
        </uni-forms-item>
        
        <uni-forms-item label="分润比例" required>
          <uni-easyinput v-model="ruleForm.profit_ratio" placeholder="请输入分润比例（%）" type="number" />
        </uni-forms-item>
        
        <uni-forms-item label="规则名称" required>
          <uni-easyinput v-model="ruleForm.rule_name" placeholder="请输入规则名称" />
        </uni-forms-item>
        
        <uni-forms-item label="规则描述">
          <uni-easyinput v-model="ruleForm.rule_desc" placeholder="请输入规则描述" type="textarea" />
        </uni-forms-item>
        
        <uni-forms-item label="生效时间">
          <uni-datetime-picker v-model="ruleForm.effective_time" type="datetime" placeholder="请选择生效时间" />
        </uni-forms-item>
        
        <uni-forms-item label="失效时间">
          <uni-datetime-picker v-model="ruleForm.expire_time" type="datetime" placeholder="请选择失效时间" />
        </uni-forms-item>
      </uni-forms>
    </view>
    
    <view class="btn-container">
      <button class="cancel-btn" @click="handleCancel">取消</button>
      <button class="submit-btn" @click="handleSubmit">提交</button>
    </view>
  </view>
</template>

<script setup>
  import { ref, onMounted } from "vue"

  const formRef = ref(null)
  const distributorId = ref(uni.getStorageSync('__uni_route_query')?.id || '')
  
  const ruleForm = ref({
    distributor_id: distributorId.value,
    profit_ratio: '',
    rule_name: '',
    rule_desc: '',
    effective_time: '',
    expire_time: ''
  })

  // 初始化加载数据
  onMounted(() => {
    fetchRuleDetail()
  })

  // 获取分润规则详情
  function fetchRuleDetail() {
    // 这里应该调用后端API获取数据
    // 模拟数据
    setTimeout(() => {
      ruleForm.value = {
        distributor_id: distributorId.value,
        profit_ratio: '10',
        rule_name: '默认分润规则',
        rule_desc: '基础分润规则',
        effective_time: new Date().toISOString(),
        expire_time: ''
      }
    }, 500)
  }

  // 取消
  function handleCancel() {
    uni.navigateBack()
  }

  // 提交
  function handleSubmit() {
    formRef.value.validate().then(() => {
      // 这里应该调用后端API提交数据
      uni.showToast({ title: '配置成功' })
      uni.navigateTo({ url: '/pages/distributor/index' })
    }).catch(err => {
      console.log('表单验证失败', err)
    })
  }
</script>

<style lang="scss" scoped>
  .rule-container {
    padding: 20rpx;
    background-color: #f5f5f5;
    min-height: 100vh;
  }
  
  .header {
    margin-bottom: 20rpx;
    padding-bottom: 20rpx;
    border-bottom: 1rpx solid #e5e5e5;
  }
  
  .title {
    font-size: 32rpx;
    font-weight: bold;
    color: #333;
  }
  
  .form-container {
    background-color: #fff;
    border-radius: 8rpx;
    padding: 20rpx;
    margin-bottom: 20rpx;
  }
  
  .btn-container {
    display: flex;
    gap: 20rpx;
  }
  
  .cancel-btn {
    flex: 1;
    background-color: #909399;
    color: #fff;
    border: none;
    padding: 20rpx;
    border-radius: 4rpx;
    font-size: 28rpx;
  }
  
  .submit-btn {
    flex: 1;
    background-color: #409eff;
    color: #fff;
    border: none;
    padding: 20rpx;
    border-radius: 4rpx;
    font-size: 28rpx;
  }
</style>