<route lang="json5" type="page">
{
  style: {
    navigationBarTitleText: '设置',
  },
}
</route>

<template>
  <view class="flex flex-col bg-[#f8f8f8] h-screen">
    <view
      class="mx-[32rpx] bg-[#fff] rounded-[8rpx] mt-[32rpx] text-[28rpx] text-[#303030] font-bold"
    >
      <view
        class="flex items-center justify-between mx-[32rpx] py-[28rpx] not-last-child"
        @click="toAbout"
      >
        <text>关于我们</text>
        <view class="i-carbon-chevron-down rotate-270 text-[#BFBFBF]"></view>
      </view>
      <view class="flex items-center justify-between mx-[32rpx] py-[28rpx]" @click.stop="toPrivacy">
        <text>用户隐私协议</text>
        <view class="i-carbon-chevron-down rotate-270 text-[#BFBFBF]"></view>
      </view>
    </view>

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

<script setup lang="ts">
import { useUserStore } from '@/store/user'

const userStore = useUserStore()

const handleLogout = () => {
  userStore.clearUserInfo()
  uni.switchTab({
    url: '/pages/home/index/index',
  })
}

const toAbout = () => {
  uni.navigateTo({
    url: '/pages-sub/ucenter/setting/about',
  })
}

const toPrivacy = () => {
  uni.navigateTo({
    url: '/login-sub/privacyPolicy',
  })
}
</script>

<style scoped lang="scss">
.not-last-child {
  border-bottom: 2rpx solid #f5f5f5;
}

.logout-btn {
  background: linear-gradient(90deg, #ff5454 0%, #ff9882 100%);
  border-radius: 80rpx;
  padding: 22rpx 0;
  font-weight: 600;
  font-size: 36rpx;
  color: #ffffff;
  line-height: 1;
  margin: 90rpx 32rpx 0;
}
</style>
