<template>
  <view class="system-settings">
    <!-- 顶部导航栏 -->
    <view class="nav-bar">
      <view class="nav-back" @click="navigateBack">
        <u-icon name="arrow-left" size="24" color="#606266"></u-icon>
      </view>
      <view class="nav-title">系统设置</view>
      <view class="nav-right"></view>
    </view>

    <!-- 系统参数设置 -->
    <view class="settings-section">
      <view class="section-title">系统参数设置</view>
      <u-cell-group>
        <u-cell 
          title="最大上传图片大小" 
          :right-text="`${maxImageSize}MB`"
          is-link
          @click="showImageSizeModal = true"
        ></u-cell>
        <u-cell 
          title="图片审核时效" 
          :right-text="`${reviewTimeLimit}小时`"
          is-link
          @click="showReviewTimeModal = true"
        ></u-cell>
        <u-cell 
          title="数据自动备份" 
          :right-icon="'arrow-right'"
        >
          <template #right>
            <u-switch v-model="autoBackup"></u-switch>
          </template>
        </u-cell>
        <u-cell 
          title="通知提醒" 
          :right-icon="'arrow-right'"
        >
          <template #right>
            <u-switch v-model="enableNotifications"></u-switch>
          </template>
        </u-cell>
      </u-cell-group>
    </view>

    <!-- 数据管理 -->
    <view class="settings-section">
      <view class="section-title">数据管理</view>
      <u-cell-group>
        <u-cell 
          title="手动备份数据" 
          :right-icon="'arrow-right'"
          is-link
          @click="navigateTo('data-backup')"
        ></u-cell>
        <u-cell 
          title="清理缓存" 
          :right-text="cacheSize"
          is-link
          @click="navigateTo('clear-cache')"
        ></u-cell>
        <u-cell 
          title="操作日志" 
          :right-icon="'arrow-right'"
          is-link
          @click="navigateTo('operation-logs')"
        ></u-cell>
      </u-cell-group>
    </view>

    <!-- 关于系统 -->
    <view class="settings-section">
      <view class="section-title">关于系统</view>
      <u-cell-group>
        <u-cell 
          title="系统版本" 
          :right-text="systemVersion"
        ></u-cell>
        <u-cell 
          title="开发团队" 
          :right-text="'技术部'"
        ></u-cell>
        <u-cell 
          title="服务协议" 
          is-link
          @click="viewAgreement"
        ></u-cell>
        <u-cell 
          title="隐私政策" 
          is-link
          @click="viewPrivacy"
        ></u-cell>
      </u-cell-group>
    </view>

    <!-- 退出登录 -->
    <view class="logout-section">
      <u-button type="error" @click="logout">退出登录</u-button>
    </view>

    <!-- 图片大小设置弹窗 -->
    <u-popup v-model="showImageSizeModal" mode="center" :closeable="true">
      <view class="modal-content">
        <view class="modal-title">设置最大上传图片大小</view>
        <view class="slider-container">
          <u-slider v-model="maxImageSize" :min="1" :max="20" :step="1"></u-slider>
          <view class="slider-value">{{ maxImageSize }}MB</view>
        </view>
        <view class="modal-buttons">
          <u-button @click="showImageSizeModal = false" style="flex: 1; margin-right: 20rpx;">取消</u-button>
          <u-button type="primary" @click="confirmImageSize" style="flex: 1;">确定</u-button>
        </view>
      </view>
    </u-popup>

    <!-- 审核时效设置弹窗 -->
    <u-popup v-model="showReviewTimeModal" mode="center" :closeable="true">
      <view class="modal-content">
        <view class="modal-title">设置图片审核时效</view>
        <view class="slider-container">
          <u-slider v-model="reviewTimeLimit" :min="1" :max="48" :step="1"></u-slider>
          <view class="slider-value">{{ reviewTimeLimit }}小时</view>
        </view>
        <view class="modal-buttons">
          <u-button @click="showReviewTimeModal = false" style="flex: 1; margin-right: 20rpx;">取消</u-button>
          <u-button type="primary" @click="confirmReviewTime" style="flex: 1;">确定</u-button>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        // 系统参数
        maxImageSize: 10,
        reviewTimeLimit: 24,
        autoBackup: true,
        enableNotifications: true,
        cacheSize: '12.3MB',
        systemVersion: 'v1.0.0',
        
        // 弹窗控制
        showImageSizeModal: false,
        showReviewTimeModal: false,
        tempImageSize: 10,
        tempReviewTime: 24
      }
    },
    methods: {
      navigateBack() {
        uni.navigateBack()
      },
      // 导航到子页面
      navigateTo(pageName) {
        uni.navigateTo({
          url: `./${pageName}`
        })
      },
      confirmImageSize() {
        this.tempImageSize = this.maxImageSize
        this.showImageSizeModal = false
        uni.showToast({ title: '设置成功', icon: 'success' })
      },
      confirmReviewTime() {
        this.tempReviewTime = this.reviewTimeLimit
        this.showReviewTimeModal = false
        uni.showToast({ title: '设置成功', icon: 'success' })
      },
      viewAgreement() {
        uni.showToast({ title: '查看服务协议', icon: 'none' })
      },
      viewPrivacy() {
        uni.showToast({ title: '查看隐私政策', icon: 'none' })
      },
      logout() {
        uni.showModal({
          title: '提示',
          content: '确定要退出登录吗？',
          success: (res) => {
            if (res.confirm) {
              uni.redirectTo({
                url: '/pages/login/index'
              })
            }
          }
        })
      }
    }
  }
</script>

<style lang="scss">
  .system-settings {
    padding-bottom: 40rpx;
    background-color: #f5f5f5;

    .nav-bar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 88rpx;
      padding: 0 30rpx;
      background-color: #fff;
      box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);

      .nav-title {
        font-size: 36rpx;
        font-weight: bold;
        color: #333;
      }
    }

    .settings-section {
      margin-top: 20rpx;
      padding: 0 20rpx;

      .section-title {
        font-size: 28rpx;
        color: #666;
        margin-bottom: 10rpx;
        padding-left: 10rpx;
      }
    }

    .logout-section {
      margin-top: 40rpx;
      padding: 0 30rpx;
    }

    .modal-content {
      padding: 30rpx;
      width: 80%;
      background-color: #fff;
      border-radius: 12rpx;

      .modal-title {
        font-size: 36rpx;
        font-weight: bold;
        text-align: center;
        margin-bottom: 30rpx;
        color: #333;
      }

      .slider-container {
        margin-bottom: 30rpx;

        .slider-value {
          text-align: center;
          margin-top: 20rpx;
          font-size: 32rpx;
          color: #007AFF;
        }
      }

      .modal-buttons {
        display: flex;
      }
    }
  }
</style>