<template>
  <ion-page>
    <Header title="设置" :onBack="handleBackPress" background="#f9f9f9" color="#8e8e8e" />

    <div class="settings-content">
      <SettingGroup title="账户">
        <div button @click="handleLogin" class="settings-item settings-item-clickable">
          <div class="item-text-primary">登录云同步</div>
          <div class="item-text-tertiary">未登录</div>
        </div>
      </SettingGroup>

      <SettingGroup title="偏好设置">
        <div class="settings-item settings-item-border">
          <div class="item-text-primary">云同步</div>
          <SwitchButton :model-value="settings.cloudSync" @update:model-value="toggleCloudSync" />
        </div>
      </SettingGroup>

      <SettingGroup title="关于">
        <div class="settings-item settings-item-border">
          <div class="item-text-primary">版本</div>
          <div class="item-text-tertiary">1.0.0</div>
        </div>
        <div button @click="handlePrivacyPolicy" class="settings-item settings-item-clickable settings-item-border">
          <div class="item-text-primary">隐私政策</div>
        </div>
        <div button @click="handleTermsOfService" class="settings-item settings-item-clickable">
          <div class="item-text-primary">服务条款</div>
        </div>
      </SettingGroup>
    </div>
  </ion-page>
</template>

<script setup>
import { computed, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { useAppStore } from '../stores/useAppStore'
import Header from '../components/Header.vue'
import SettingGroup from '../components/SettingGroup.vue'
import SwitchButton from '../components/SwitchButton.vue'
import { IonPage } from '@ionic/vue'

const store = useAppStore()
const router = useRouter()

// 页面挂载时加载初始数据
// 从Storage加载用户设置和便签数据
onMounted(() => {
  store.loadData()
})

// 切换云同步设置
// 调用store中的方法更新云同步状态
const toggleCloudSync = value => {
  store.toggleCloudSync()
}

// 处理登录云同步按钮点击事件
// 在完整实现中，这里会打开登录界面
const handleLogin = () => {
  console.log('Login to cloud')
}

// 处理隐私政策按钮点击事件
// 在完整实现中，这里会显示隐私政策内容
const handlePrivacyPolicy = () => {
  console.log('Privacy policy')
}

// 处理服务条款按钮点击事件
// 在完整实现中，这里会显示服务条款内容
const handleTermsOfService = () => {
  console.log('Terms of service')
}

const handleBackPress = () => {
  router.back()
}

const settings = computed(() => store.settings)
</script>

<style scoped lang="less">
.settings-content {
  background: url('/assets/icons/drawable-xxhdpi/note_setting_bg.png');
  width: 100%;
  height: 100vh;
  overflow-y: scroll;

  .item-text-primary {
    font-size: 1rem;
    color: #8e8e8e;
  }

  .item-text-tertiary {
    font-size: 0.9375rem;
    color: #b4b4b4;
  }
}
</style>
