<template>
  <view class="rate-config-detail-container">
    <NavBar title="费率模板详情" @back="goBack">
      <template #right>
        <text class="nav-save" @click="saveConfig">保存</text>
      </template>
    </NavBar>
    
    <!-- 表单内容 -->
    <scroll-view class="form-content" scroll-y>
      <view class="form-section">
        <view class="form-item">
          <text class="label">模板名称</text>
          <input 
            class="input" 
            v-model="rateForm.name" 
            placeholder="请输入模板名称"
          />
        </view>
      </view>

      <view class="form-section">
        <view class="form-item">
          <text class="label">平台服务费比例 (%)</text>
          <input 
            class="input" 
            type="digit"
            v-model="rateForm.feeRatePercent" 
            placeholder="例如: 10 (表示10%)"
          />
        </view>
        <view class="form-item">
          <text class="label">充值冻结金额比例 (%)</text>
          <input 
            class="input" 
            type="digit"
            v-model="rateForm.frozenRatioPercent" 
            placeholder="例如: 30 (表示30%)"
          />
        </view>
        <view class="form-item">
          <text class="label">提现手续费率 (%)</text>
          <input 
            class="input" 
            type="digit"
            v-model="rateForm.withdrawalFeeRatePercent" 
            placeholder="例如: 0.6 (表示0.6%)"
          />
        </view>
      </view>
    </scroll-view>

    <!-- 底部操作栏 -->
    <view class="bottom-action">
      <button class="submit-btn" @click="saveConfig" :loading="loading">
        {{ isEditMode ? '更新价格模板' : '立即添加模板' }}
      </button>
    </view>

    <!-- 加载状态 -->
    <view class="loading-overlay" v-if="loading">
      <view class="loading-spinner"></view>
      <text class="loading-text">处理中...</text>
    </view>
  </view>
</template>

<script setup>
import { ref, computed } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { showToast } from '../../utils/index.js'
import { addPlatformFeeRate, modifyPlatformFeeRate, getPlatformFeeRateList } from '../../api/rate.js'

const id = ref(null)
const loading = ref(false)

const rateForm = ref({
  id: null,
  name: '',
  feeRatePercent: '',
  frozenRatioPercent: '',
  withdrawalFeeRatePercent: ''
})

const isEditMode = computed(() => !!id.value)

onLoad((options) => {
  if (options.id) {
    id.value = options.id
    loadData()
  }
})

const loadData = async () => {
  loading.value = true
  try {
    // 列表接口通常返回所有，我们从中找
    const res = await getPlatformFeeRateList({ page: 1, pageSize: 1000 })
    if (res && res.code === 200) {
      const records = res.data.records || res.data || []
      const item = records.find(r => r.id == id.value)
      if (item) {
        rateForm.value = {
          id: item.id,
          name: item.name,
          feeRatePercent: (item.feeRate * 100).toString(),
          frozenRatioPercent: (item.frozenRatio * 100).toString(),
          withdrawalFeeRatePercent: (item.withdrawalFeeRate * 100).toString()
        }
      }
    }
  } catch (error) {
    console.error('加载详情失败:', error)
  } finally {
    loading.value = false
  }
}

const saveConfig = async () => {
  if (!rateForm.value.name) {
    showToast('请输入名称')
    return
  }

  const data = {
    id: rateForm.value.id,
    name: rateForm.value.name,
    feeRate: parseFloat(rateForm.value.feeRatePercent) / 100,
    frozenRatio: parseFloat(rateForm.value.frozenRatioPercent) / 100,
    withdrawalFeeRate: parseFloat(rateForm.value.withdrawalFeeRatePercent) / 100
  }

  loading.value = true
  try {
    const res = isEditMode.value 
      ? await modifyPlatformFeeRate(data)
      : await addPlatformFeeRate(data)
    
    if (res && res.code === 200) {
      showToast('保存成功')
      setTimeout(() => {
        goBack()
      }, 1500)
    } else {
      showToast(res.message || '保存失败')
    }
  } catch (error) {
    console.error('保存失败:', error)
    showToast('保存失败')
  } finally {
    loading.value = false
  }
}

const goBack = () => {
  uni.navigateBack()
}
</script>

<style scoped>
.rate-config-detail-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background-color: #F5F7FA;
}

/* 右侧保存按钮 */
.nav-save {
  font-size: 30rpx;
  color: #FFFFFF;
  font-weight: 600;
}

.form-content {
  flex: 1;
  height: 0;
  padding: 20rpx;
  box-sizing: border-box;
}

/* 底部操作栏 */
.bottom-action {
  padding: 20rpx 30rpx;
  padding-bottom: calc(20rpx + var(--window-bottom));
  background-color: #FFFFFF;
  box-shadow: 0 -4rpx 16rpx rgba(0, 0, 0, 0.05);
}

.submit-btn {
  width: 100%;
  height: 88rpx;
  line-height: 88rpx;
  background: #C6171E;
  color: #FFFFFF;
  border-radius: 44rpx;
  font-size: 30rpx;
  font-weight: 600;
  border: none;
  box-shadow: 0 8rpx 20rpx rgba(198, 23, 30, 0.3);
}

.submit-btn:active {
  transform: scale(0.98);
  opacity: 0.9;
}

.form-section {
  background-color: #FFFFFF;
  border-radius: 16rpx;
  padding: 24rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.06);
}

.form-item {
  margin-bottom: 24rpx;
}

.form-item:last-child {
  margin-bottom: 0;
}

.label {
  font-size: 26rpx;
  color: #666666;
  margin-bottom: 12rpx;
  display: block;
}

.input {
  width: 100%;
  height: 80rpx;
  border: 1rpx solid #E0E0E0;
  border-radius: 12rpx;
  padding: 0 20rpx;
  font-size: 28rpx;
  box-sizing: border-box;
  background-color: #F9F9F9;
}

.loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.4);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 999;
}

.loading-text {
  font-size: 28rpx;
  color: #fff;
}
</style>
