<template>
  <view class="setting-container">
    <!-- 顶部导航栏 -->
    <view class="header-nav">
      <view class="nav-left"></view>
      <text class="nav-title">平台配置</text>
      <view class="nav-right"></view>
    </view>
    
    <!-- 配置菜单列表 -->
    <view class="setting-menu">
      <view class="menu-item" @click="navigateToRateConfig">
        <view class="menu-info">
          <text class="menu-title">平台费率配置</text>
          <text class="menu-desc">设置平台相关费率及提现手续费</text>
        </view>
        <text class="menu-arrow">→</text>
      </view>
      
      <view class="menu-item" @click="navigateToDeviceConfig">
        <view class="menu-info">
          <text class="menu-title">设备参数模板</text>
          <text class="menu-desc">管理设备参数模板（价格、时间、模式等）</text>
        </view>
        <text class="menu-arrow">→</text>
      </view>

      <view class="menu-item" @click="navigateToDeviceBinding">
        <view class="menu-info">
          <text class="menu-title">设备绑定管理</text>
          <text class="menu-desc">设备与参数模板、费率模板的绑定</text>
        </view>
        <text class="menu-arrow">→</text>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue'

// 导航到平台费率配置
const navigateToRateConfig = () => {
  uni.navigateTo({
    url: '/pages/setting/rate-config'
  })
}

// 导航到设备配置
const navigateToDeviceConfig = () => {
  uni.navigateTo({
    url: '/pages/setting/device-config'
  })
}

// 导航到设备绑定
const navigateToDeviceBinding = () => {
  uni.navigateTo({
    url: '/pages/setting/device-binding'
  })
}
</script>

<style scoped>
.setting-container {
  min-height: 100vh;
  background-color: #F8F9FA;
}

/* 顶部导航栏 */
.header-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: calc(24rpx + var(--status-bar-height));
  padding-right: 30rpx;
  padding-bottom: 24rpx;
  padding-left: 30rpx;
  background: linear-gradient(135deg, #667EEA 0%, #764BA2 100%);
  box-shadow: 0 4rpx 16rpx rgba(102, 126, 234, 0.2);
}

.nav-left {
  width: 180rpx; /* 增加宽度以平衡右侧胶囊按钮空间 */
}

.nav-title {
  font-size: 34rpx;
  color: #FFFFFF;
  font-weight: 600;
  flex: 1;
  text-align: center;
  white-space: nowrap;
}

.nav-right {
  width: 180rpx;
}

/* 配置菜单列表 */
.setting-menu {
  margin: 20rpx;
  background-color: #FFFFFF;
  border-radius: 16rpx;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
}

.menu-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24rpx 30rpx;
  border-bottom: 1rpx solid #F0F0F0;
}

.menu-item:last-child {
  border-bottom: none;
}

.menu-info {
  flex: 1;
}

.menu-title {
  font-size: 30rpx;
  color: #1A1A1A;
  font-weight: 600;
  margin-bottom: 8rpx;
  display: block;
}

.menu-desc {
  font-size: 24rpx;
  color: #999999;
  display: block;
}

.menu-arrow {
  font-size: 30rpx;
  color: #CCCCCC;
}
</style>