<script setup>
  import { useUserStore } from '@/stores/user'
  import { navigateTo } from '../../../utils/router'

  // 基础设置
  const basicSetting = [
    { name: '字体大小', value: '', url: '' },
    // { name: '聊天背景', value: '', url: '' },
    { name: '朋友圈设置', value: '', url: '' },
    { name: '消息通知', value: '', url: '' },
    // { name: '安全设置', value: '', url: '' },
    // { name: '群发消息', value: '', url: '' },
    { name: '登录设备', value: '', url: '' }
  ]

  // 系统设置
  const systemSetting = [
    { name: '隐私设置', value: '', url: '' },
    { name: '清除缓存', value: '', url: '' },
    { name: '意见反馈', value: '', url: '' },
    { name: '关于我们', value: '', url: '/pages/discover/company' }
  ]

  const { clearUserInfo } = useUserStore()

  const onItem = item => {
    item.url && navigateTo(item.url)
  }
</script>

<template>
  <view class="set-up-index">
    <view class="card-box">
      <view
        v-for="(item, index) in basicSetting"
        :key="index"
        class="item"
        @click="onItem(item)"
      >
        <text class="left-title">{{ item.name }}</text>
        <view class="right-box">
          <!-- <text class="name">2112</text> -->
          <uni-icons type="right" size="16" color="#999999"></uni-icons>
        </view>
      </view>
    </view>

    <view class="card-box">
      <view
        v-for="(item, index) in systemSetting"
        :key="index"
        class="item"
        @click="onItem(item)"
      >
        <text class="left-title">{{ item.name }}</text>
        <view class="right-box">
          <!-- <text class="name">2112</text> -->
          <uni-icons type="right" size="16" color="#999999"></uni-icons>
        </view>
      </view>
    </view>

    <view class="bottom-btn">
      <button @click="clearUserInfo()">退出登录</button>
    </view>
  </view>
</template>

<style lang="scss" scoped>
  @import '../styles/index.scss';

  .set-up-index {
    padding: 32rpx 24rpx;

    .card-box + .card-box {
      margin-top: 16rpx;
    }

    .card-box {
      background: #fff;
      border-radius: 16rpx;
      padding: 0 32rpx;
      .item {
        padding: 20rpx 0;
        font-family: PingFang SC, PingFang SC;
        text-align: left;
        font-style: normal;
        text-transform: none;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .left-title {
          font-weight: 500;
          font-size: 28rpx;
          color: #333333;
        }
        .right-box {
          display: flex;
          align-items: center;
          .name {
            font-weight: 500;
            font-size: 28rpx;
            color: #999999;
            margin-right: 8rpx;
          }
        }
      }
    }

    .bottom-btn {
      margin-top: 46rpx;
      button {
        height: 80rpx;
        line-height: 80rpx;
        background: #fff;
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 28rpx;
        color: #eb1c26;
        font-style: normal;
        text-transform: none;
        border-radius: 16rpx;
        &::after {
          display: none;
        }
      }
    }
  }
</style>
