<template>
  <view class="container">
    <uni-section title="基本信息" type="line">
      <uni-list>
        <uni-list-item title="账号名称" :rightText="userInfo.username" />
        <uni-list-item
          title="手机号"
          :rightText="maskPhoneNumber(userInfo.phone)"
        />
      </uni-list>
    </uni-section>

    <view class="footer-bar">
      <button type="warn" @click="handleLogout">退出登录</button>
    </view>
  </view>
</template>

<script setup>
import { ref } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import { maskPhoneNumber } from "@/utils/tools.js";

const userInfo = ref({
  username: "",
  phone: "",
});

// 退出登录
const handleLogout = () => {
  uni.showModal({
    title: "确认退出",
    content: "是否确认退出并清除缓存？",
    success: function (res) {
      if (res.confirm) {
        uni.clearStorage();
        uni.reLaunch({
          url: "/pages/login/login",
        });
      } else if (res.cancel) {
      }
    },
  });
};

function getCacheInfo() {
  try {
    const user = uni.getStorageSync("userInfo");
    if (user) {
      userInfo.value = user;
    } else {
      console.warn("未找到用户信息缓存");
    }
  } catch (e) {
    console.error("获取缓存信息失败:", e);
  }
}

onLoad(() => {
  getCacheInfo();
});
</script>

<style lang="scss" scoped>
.footer-bar {
  position: fixed;
  bottom: 50px;
  left: 0;
  right: 0;
  padding: 0 20px;
}
</style>
