<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>
        <AppIcon name="chevron-right" size="14" color="#CCCCCC" />
      </view>
      
      <view class="menu-item" @click="navigateToDeviceConfig">
        <view class="menu-info">
          <text class="menu-title">设备参数模板</text>
          <text class="menu-desc">管理设备参数模板（价格、时间、模式等）</text>
        </view>
        <AppIcon name="chevron-right" size="14" color="#CCCCCC" />
      </view>

      <view class="menu-item" @click="navigateToDeviceBinding">
        <view class="menu-info">
          <text class="menu-title">设备绑定管理</text>
          <text class="menu-desc">设备与参数模板、费率模板的绑定</text>
        </view>
        <AppIcon name="chevron-right" size="14" color="#CCCCCC" />
      </view>
    </view>

    <!-- 系统管理菜单 -->
    <view class="section-divider">
      <text class="divider-text">系统管理</text>
    </view>

    <view class="setting-menu">
      <view class="menu-item" @click="navigateTo('/pages/station/list')">
        <view class="menu-info">
          <text class="menu-title">站点清单</text>
          <text class="menu-desc">查看管理所有洗车站点</text>
        </view>
        <AppIcon name="chevron-right" size="14" color="#CCCCCC" />
      </view>

      <view class="menu-item" @click="navigateTo('/pages/user/list')">
        <view class="menu-info">
          <text class="menu-title">用户列表</text>
          <text class="menu-desc">查看App用户信息及余额</text>
        </view>
        <AppIcon name="chevron-right" size="14" color="#CCCCCC" />
      </view>

      <view class="menu-item" @click="navigateTo('/pages/system/feedback')">
        <view class="menu-info">
          <text class="menu-title">反馈上报</text>
          <text class="menu-desc">查看用户提交的反馈信息</text>
        </view>
        <AppIcon name="chevron-right" size="14" color="#CCCCCC" />
      </view>

      <view class="menu-item" @click="navigateTo('/pages/system/notice')">
        <view class="menu-info">
          <text class="menu-title">系统公告</text>
          <text class="menu-desc">管理系统公告通知</text>
        </view>
        <AppIcon name="chevron-right" size="14" color="#CCCCCC" />
      </view>

      <view class="menu-item" @click="navigateTo('/pages/system/log')">
        <view class="menu-info">
          <text class="menu-title">操作日志</text>
          <text class="menu-desc">查看后台操作审计日志</text>
        </view>
        <AppIcon name="chevron-right" size="14" color="#CCCCCC" />
      </view>

      <view class="menu-item" @click="navigateTo('/pages/system/dict')">
        <view class="menu-info">
          <text class="menu-title">数据字典</text>
          <text class="menu-desc">查看系统数据字典配置</text>
        </view>
        <AppIcon name="chevron-right" size="14" color="#CCCCCC" />
      </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'
  })
}

// 通用导航
const navigateTo = (url) => {
  uni.navigateTo({ url })
}
</script>

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

/* 顶部导航栏 */
.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: #C6171E;
  box-shadow: 0 4rpx 16rpx rgba(198, 23, 30, 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;
}

/* 分组分隔 */
.section-divider {
  padding: 30rpx 20rpx 20rpx;
}
.divider-text {
  font-size: 26rpx;
  color: #999999;
  font-weight: 500;
}
</style>