<template>
  <view class="privacy-settings-page">
    <!-- 隐私设置列表 -->
    <view class="settings-container">
      <view class="section">
        <view class="section-title">主页展示</view>
        <!-- 运动轨迹 -->
        <view class="setting-item">
          <view class="setting-info">
            <view class="setting-name">运动轨迹</view>
            <view class="setting-desc">开启后，将对其他用户展示您近半年内的运动活跃程度</view>
          </view>
          <switch :checked="movementLocusSwitch === 1" @change="onMovementLocusChange" color="#007AFF" />
        </view>

        <!-- 共同喜好 -->
        <view class="setting-item">
          <view class="setting-info">
            <view class="setting-name">共同喜好</view>
            <view class="setting-desc">开启后，将对其他用户显示你们共同喜好的教练和课程</view>
          </view>
          <switch :checked="commonInterestSwitch === 1" @change="onCommonInterestChange" color="#007AFF" />
        </view>
      </view>
      <view class="section">
        <view class="section-title">门店TV展示</view>
        <!-- 勋章和好友竞赛 -->
        <view class="setting-item">
          <view class="setting-info">
            <view class="setting-name">勋章和好友竞赛</view>
            <view class="setting-desc">开启后，门店TV电视将展示你的勋章排行、获得播报、好友竞赛情况等信息</view>
          </view>
          <switch :checked="medalFriendSwitch === 1" @change="onMedalFriendChange" color="#007AFF" />
        </view>
      </view>
      <view class="section">
        <view class="section-title">课程预约</view>
        <!-- 团课约课信息 -->
        <view class="setting-item">
          <view class="setting-info">
            <view class="setting-name">团课约课信息</view>
            <view class="setting-desc">开启后，预约团课时将对外展示您的头像和昵称</view>
          </view>
          <switch :checked="leagueClassSwitch === 1" @change="onLeagueClassChange" color="#007AFF" />
        </view>

        <!-- 私教训练报告 -->
        <view class="setting-item">
          <view class="setting-info">
            <view class="setting-name">私教训练报告</view>
            <view class="setting-desc">开启后，将允许教练对外分享您的训练报告</view>
          </view>
          <switch :checked="personalTrainingSwitch === 1" @change="onPersonalTrainingChange" color="#007AFF" />
        </view>

        <!-- 小班课战队信息 -->
        <view class="setting-item">
          <view class="setting-info">
            <view class="setting-name">小班课战队信息</view>
            <view class="setting-desc">开启后，战队详情将不对外展示您的信息</view>
          </view>
          <switch :checked="miniClassTeamSwitch === 1" @change="onMiniClassTeamChange" color="#007AFF" />
        </view>
      </view>
      <view class="section">
        <view class="section-title">账号设置</view>
        <!-- 主页私密账户 -->
        <view class="setting-item">
          <view class="setting-info">
            <view class="setting-name">主页私密账户</view>
            <view class="setting-desc">开启后，您的会员主页将不对外展示任何信息</view>
          </view>
          <switch :checked="homepagePrivacySwitch === 1" @change="onHomepagePrivacyChange" color="#007AFF" />
        </view>

        <!-- 排行榜 -->
        <view class="setting-item">
          <view class="setting-info">
            <view class="setting-name">排行榜</view>
            <view class="setting-desc">开启后，在会员排行榜上将展示您的头像和昵称</view>
          </view>
          <switch :checked="rankingSwitch === 1" @change="onRankingChange" color="#007AFF" />
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import SettingApi from '@/sheep/api/setting/setting';
import { onShow, onUnload } from '@dcloudio/uni-app';
import { ref, computed } from 'vue';

// 隐私设置数据状态
const movementLocusSwitch = ref(0); // 运动轨迹
const commonInterestSwitch = ref(0); // 共同喜好
const medalFriendSwitch = ref(0); // 勋章和好友竞赛
const leagueClassSwitch = ref(0); // 团课约课信息
const personalTrainingSwitch = ref(0); // 私教训练报告
const miniClassTeamSwitch = ref(0); // 小班课战队信息
const homepagePrivacySwitch = ref(0); // 主页私密账户
const rankingSwitch = ref(0); // 排行榜

// 生命周期
onShow(() => {
  loadPrivacySettings();
});
// 页面隐藏时保存变更
onUnload(() => {
  saveSettings();
});
// 获取当前设置
const getCurrentSettings = () => ({
  movementLocusSwitch: movementLocusSwitch.value,
  commonInterestSwitch: commonInterestSwitch.value,
  medalFriendSwitch: medalFriendSwitch.value,
  leagueClassSwitch: leagueClassSwitch.value,
  personalTrainingSwitch: personalTrainingSwitch.value,
  miniClassTeamSwitch: miniClassTeamSwitch.value,
  homepagePrivacySwitch: homepagePrivacySwitch.value,
  rankingSwitch: rankingSwitch.value,
});

// 加载隐私设置
const loadPrivacySettings = async () => {
  try {
    // 这里调用后端接口获取隐私设置
    const res = await SettingApi.getPrivacySetting();
    movementLocusSwitch.value = res.data.movementLocusSwitch || 0; // 运动轨迹
    commonInterestSwitch.value = res.data.commonInterestSwitch || 0; // 共同喜好
    medalFriendSwitch.value = res.data.medalFriendSwitch || 0; // 勋章和好友竞赛
    leagueClassSwitch.value = res.data.leagueClassSwitch || 0; // 团课约课信息
    personalTrainingSwitch.value = res.data.personalTrainingSwitch || 0; // 私教训练报告
    miniClassTeamSwitch.value = res.data.miniClassTeamSwitch || 0; // 小班课战队信息
    homepagePrivacySwitch.value = res.data.homepagePrivacySwitch || 0; // 主页私密账户
    rankingSwitch.value = res.data.rankingSwitch || 0; // 排行榜
  } catch (error) {
    console.error('加载隐私设置失败:', error);
    uni.showToast({
      title: '加载设置失败',
      icon: 'none',
    });
  }
};

// 保存隐私设置
const saveSettings = async () => {
  const settings = getCurrentSettings();
  try {
    // 这里调用后端接口保存隐私设置
    await SettingApi.updatePrivacySetting(settings);
  } catch (error) {
    console.error('保存隐私设置失败:', error);
    uni.showToast({
      title: '保存失败',
      icon: 'none',
    });
  }
};
// 各个开关的变更处理函数
const onMovementLocusChange = (e) => {
  const newValue = e.detail.value ? 1 : 0;
  updateSetting('movementLocusSwitch', newValue);
};

const onCommonInterestChange = (e) => {
  const newValue = e.detail.value ? 1 : 0;
  updateSetting('commonInterestSwitch', newValue);
};

const onMedalFriendChange = (e) => {
  const newValue = e.detail.value ? 1 : 0;
  updateSetting('medalFriendSwitch', newValue);
};

const onLeagueClassChange = (e) => {
  const newValue = e.detail.value ? 1 : 0;
  updateSetting('leagueClassSwitch', newValue);
};

const onPersonalTrainingChange = (e) => {
  const newValue = e.detail.value ? 1 : 0;
  updateSetting('personalTrainingSwitch', newValue);
};

const onMiniClassTeamChange = (e) => {
  const newValue = e.detail.value ? 1 : 0;
  updateSetting('miniClassTeamSwitch', newValue);
};

const onHomepagePrivacyChange = (e) => {
  const newValue = e.detail.value ? 1 : 0;
  updateSetting('homepagePrivacySwitch', newValue);
};

const onRankingChange = (e) => {
  const newValue = e.detail.value ? 1 : 0;
  updateSetting('rankingSwitch', newValue);
};

// 更新设置的通用方法
const updateSetting = (key, value) => {
  const refMap = {
    movementLocusSwitch: movementLocusSwitch,
    commonInterestSwitch: commonInterestSwitch,
    medalFriendSwitch: medalFriendSwitch,
    leagueClassSwitch: leagueClassSwitch,
    personalTrainingSwitch: personalTrainingSwitch,
    miniClassTeamSwitch: miniClassTeamSwitch,
    homepagePrivacySwitch: homepagePrivacySwitch,
    rankingSwitch: rankingSwitch,
  };

  if (refMap[key]) {
    refMap[key].value = value;
  }
};

// 返回上一页
// const goBack = () => {
//   if (hasChanges.value) {
//     uni.showModal({
//       title: '提示',
//       content: '您有未保存的修改，确定要离开吗？',
//       success: (res) => {
//         if (res.confirm) {
//           uni.navigateBack();
//         }
//       },
//     });
//   } else {
//     uni.navigateBack();
//   }
// };
</script>

<style lang="scss" scoped>
// 定义全局样式变量，便于统一管理和修改
$bg-color: #f5f5f5;
$white-color: #ffffff;
$text-primary: #333333;
$text-secondary: #666666;
$text-tertiary: #999999;
$primary-color: #007aff;

$border-radius-base: 16rpx;
$border-radius-large: 50rpx;
$padding-base: 30rpx;
$padding-small: 20rpx;
$padding-xs: 10rpx;

.privacy-settings-page {
  background-color: $bg-color;
  min-height: 100vh;

  // 设置容器样式
  .settings-container {
    padding: $padding-small;

    // 分区标题
    .section-title {
      font-size: 28rpx;
      color: $text-tertiary;
      margin-bottom: $padding-small;
      padding-left: $padding-xs;
    }

    // 设置项样式
    .setting-item {
      background-color: $white-color;
      margin-bottom: $padding-small;
      padding: $padding-base;
      border-radius: $border-radius-base;
      display: flex;
      align-items: center;
      justify-content: space-between;
      box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);

      // 设置项信息区域
      .setting-info {
        flex: 1;
        margin-right: $padding-small;

        // 设置项名称
        .setting-name {
          font-size: 32rpx;
          color: $text-primary;
          font-weight: 500;
          margin-bottom: 8rpx;
        }

        // 设置项描述
        .setting-desc {
          font-size: 26rpx;
          color: $text-tertiary;
          line-height: 1.4;
        }
      }
    }
  }

  // 保存提示框样式
  // .save-notice {
  //   position: fixed;
  //   bottom: 60rpx;
  //   left: 40rpx;
  //   right: 40rpx;
  //   background-color: $white-color;
  //   border-radius: $border-radius-large;
  //   padding: $padding-small $padding-base;
  //   display: flex;
  //   align-items: center;
  //   justify-content: space-between;
  //   box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);

  //   .notice-content {
  //     display: flex;
  //     align-items: center;

  //     .notice-icon {
  //       font-size: 32rpx;
  //       margin-right: 16rpx;
  //     }

  //     .notice-text {
  //       font-size: 28rpx;
  //       color: $text-secondary;
  //     }
  //   }

  //   .save-text {
  //     font-size: 28rpx;
  //     color: $primary-color;
  //     font-weight: 500;
  //   }
  // }
}
</style>