<template>
  <view class="settings-page">
    <!-- 手机号设置 -->
    <view class="setting-item">
      <view class="setting-label">手机号</view>
      <view class="setting-value">{{ phone || '未设置' }}</view>
    </view>

    <!-- 微信绑定状态 -->
    <view class="setting-item">
      <view class="setting-label">微信绑定</view>
      <view class="setting-status" :class="{ bound: isBindWx === 1, unbound: isBindWx === 0 }">
        {{ isBindWx === 1 ? '已绑定' : '未绑定' }}
      </view>
      <!-- <button v-if="isBindWx === 0" class="bind-btn" @click="bindWeChat">绑定微信</button>
      <button v-else class="unbind-btn" @click="unbindWeChat">解绑</button> -->
    </view>

    <!-- 推送通知开关 -->
    <!-- <view class="setting-item notice">
      <view class="content">
        <view class="setting-label">推送通知</view>
        <switch :checked="pushNoticeSwitch === 1" @change="onPushNoticeChange" color="#007AFF" />
      </view>
      <view class="tip">包含订单状态、优惠促销等重要信息的推送</view>
    </view> -->

    <!-- 个性化推荐开关 -->
    <!-- <view class="setting-item">
      <view class="setting-label">个性化推荐</view>
      <switch :checked="personRecommendSwitch === 1" @change="onRecommendChange" color="#007AFF" />
    </view> -->

    <!-- 退出登录 -->
    <view class="logout-section">
      <button class="logout-btn" @click="logout">退出登录</button>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue';
import { onShow } from '@dcloudio/uni-app';
import SettingApi from '@/sheep/api/setting/setting';
import AuthUtil from '@/sheep/api/member/auth';
import useUserStore from '@/sheep/store/user';
import UserApi from '@/sheep/api/member/user';

// 数据状态
const phone = ref('');
const isBindWx = ref(0); // 0:未绑定, 1:已绑定
const pushNoticeSwitch = ref(0); // 0:关闭, 1:开启
const personRecommendSwitch = ref(0); // 0:关闭, 1:开启
const userStore = useUserStore();
// 生命周期
onShow(() => {
  loadUserSettings();
});

// 加载用户设置
const loadUserSettings = async () => {
  // 这里调用后端接口获取设置数据
  const res = await SettingApi.getSetting();
  phone.value = res.data.phone;
  isBindWx.value = res.data.isBindWx;
  pushNoticeSwitch.value = res.data.pushNoticeSwitch;
  personRecommendSwitch.value = res.data.personRecommendSwitch;
};

// // 微信绑定
// const bindWeChat = () => {
//   uni.showModal({
//     title: '绑定微信',
//     content: '确定要绑定微信吗？',
//     success: async (res) => {
//       if (res.confirm) {
//         try {
//           // 这里调用绑定微信接口
//           // await uni.request({
//           // 	url: '/api/user/bind-wechat',
//           // 	method: 'POST'
//           // })

//           isBindWx.value = 1;
//           uni.showToast({
//             title: '绑定成功',
//             icon: 'success',
//           });
//         } catch (error) {
//           console.error('绑定失败:', error);
//           uni.showToast({
//             title: '绑定失败',
//             icon: 'none',
//           });
//         }
//       }
//     },
//   });
// };

// // 微信解绑
// const unbindWeChat = () => {
//   uni.showModal({
//     title: '解绑微信',
//     content: '确定要解绑微信吗？',
//     success: async (res) => {
//       if (res.confirm) {
//         try {
//           // 这里调用解绑微信接口
//           // await uni.request({
//           // 	url: '/api/user/unbind-wechat',
//           // 	method: 'POST'
//           // })

//           isBindWx.value = 0;
//           uni.showToast({
//             title: '解绑成功',
//             icon: 'success',
//           });
//         } catch (error) {
//           console.error('解绑失败:', error);
//           uni.showToast({
//             title: '解绑失败',
//             icon: 'none',
//           });
//         }
//       }
//     },
//   });
// };

// 推送通知开关改变
const onPushNoticeChange = async (e) => {
  const newValue = e.detail.value ? 1 : 0;
  try {
    // 这里调用更新设置接口
    await SettingApi.updateNoticeSetting({
      pushNoticeSwitch: newValue,
      personRecommendSwitch: personRecommendSwitch.value,
    });

    pushNoticeSwitch.value = newValue;
    uni.showToast({
      title: newValue ? '已开启推送' : '已关闭推送',
      icon: 'success',
    });
  } catch (error) {
    console.error('更新推送设置失败:', error);
    // 恢复原状态
    pushNoticeSwitch.value = pushNoticeSwitch.value === 1 ? 0 : 1;
    uni.showToast({
      title: '设置失败',
      icon: 'none',
    });
  }
};

// 个性化推荐开关改变
const onRecommendChange = async (e) => {
  const newValue = e.detail.value ? 1 : 0;
  try {
    // 这里调用更新设置接口
    await SettingApi.updateNoticeSetting({
      personRecommendSwitch: newValue,
      pushNoticeSwitch: pushNoticeSwitch.value,
    });

    personRecommendSwitch.value = newValue;
    uni.showToast({
      title: newValue ? '已开启推荐' : '已关闭推荐',
      icon: 'success',
    });
  } catch (error) {
    console.error('更新推荐设置失败:', error);
    // 恢复原状态
    personRecommendSwitch.value = personRecommendSwitch.value === 1 ? 0 : 1;
    uni.showToast({
      title: '设置失败',
      icon: 'none',
    });
  }
};

// 退出登录
const logout = () => {
  uni.showModal({
    title: '提示',
    content: '确定要退出登录吗？',
    success: (res) => {
      if (res.confirm) {
        // 调用退出登录接口
        AuthUtil.logout().then(() => {
          // 清空用户信息
          userStore.logout();

          // 跳转到登录页
          uni.reLaunch({ url: '/pages/index/index' });
        });
      }
    },
  });
};
</script>

<style lang="scss" scoped>
// 定义全局变量，方便统一管理
$primary-color: #007aff;
$danger-color: #ff4757;
$danger-active-color: #e63946;
$bg-color: #f5f5f5;
$white-color: #ffffff;
$text-primary: #333333;
$text-secondary: #666666;
$text-tertiary: #999999;

$border-radius-base: 16rpx;
$border-radius-small: 8rpx;
$padding-base: 30rpx;
$padding-small: 20rpx;

.settings-page {
  background-color: $bg-color;
  padding: $padding-small;

  // 设置项通用样式
  .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-label {
      font-size: 32rpx;
      color: $text-primary;
      font-weight: 500;
    }

    // 值样式
    .setting-value {
      font-size: 28rpx;
      color: $text-secondary;
    }

    // 状态样式
    .setting-status {
      font-size: 28rpx;
      font-weight: 500;
      margin-right: 20rpx;

      &.bound {
        color: $primary-color;
      }

      &.unbound {
        color: $text-tertiary;
      }
    }

    // 绑定/解绑按钮
    .bind-btn,
    .unbind-btn {
      background-color: $primary-color;
      color: $white-color;
      border: none;
      border-radius: $border-radius-small;
      padding: 16rpx 24rpx;
      font-size: 26rpx;

      &.unbind-btn {
        background-color: $danger-color;
      }
    }

    // 通知设置特殊样式
    &.notice {
      display: block;

      .content {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 16rpx;
      }

      .tip {
        font-size: 24rpx;
        color: $text-tertiary;
        line-height: 1.4;
      }
    }
  }

  .notice {
    display: flex;
    flex-direction: column;
  }

  // 退出登录区域
  .logout-section {
    margin-top: 60rpx;
    padding: $padding-small;

    .logout-btn {
      width: 100%;
      background-color: $danger-color;
      color: $white-color;
      border: none;
      border-radius: $border-radius-base;
      padding: $padding-base;
      font-size: 32rpx;
      font-weight: 500;

      &:active {
        background-color: $danger-active-color;
      }
    }
  }
}
</style>