<template>
  <div>
    <Navbar title="个人中心" :showBack="false" />
    <div class="content">
      <div class="user-info">
        <u--image :src="avatar" shape="circle" width="60" height="60"></u--image>
        <div class="user-item">{{ userName }}</div>
        <div class="user-item">{{ phone }}</div>
      </div>
    </div>
    <u-cell-group>
      <u-cell icon="/static/images/imgs/user-info.png" title="个人信息" @click="goUserInfo">
        <u-icon slot="value" name="/static/images/imgs/back-right.png" size="22"></u-icon>
      </u-cell>
      <u-cell icon="/static/images/imgs/notice.png" title="升级公告" @click="goNotice">
        <u-icon slot="value" name="/static/images/imgs/back-right.png" size="22"></u-icon>
      </u-cell>
      <u-cell icon="/static/images/imgs/password.png" title="修改密码" @click="editPassword">
        <u-icon slot="value" name="/static/images/imgs/back-right.png" size="22"></u-icon>
      </u-cell>
    </u-cell-group>

    <!-- 退出登录按钮 -->
    <div style="padding: 50px 20px">
      <u-button type="primary" shape="circle" @click="logout">退出登录</u-button>
    </div>
    
    <Tabbar />
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 头像 url
      avatar: '',
      userName: '',
      phone: ''
    }
  },
  created() {
    // 获取用户信息
    const userInfo = uni.getStorageSync('userInfo')
    console.log('🚀 ~ created ~ userInfo:', userInfo)
    this.avatar = userInfo.avatar || '/static/images/imgs/user-info.png'
    this.userName = userInfo.nickName
    this.phone = userInfo.phonenumber
  },
  methods: {
    // 个人信息
    goUserInfo() {
      console.log('跳转到个人信息页面')
      uni.navigateTo({
        url: '/pages/mine/info/index'
      })
    },
    // 升级公告
    goNotice() {
      console.log('跳转到升级公告页面')
      uni.showToast({
        title: '功能正在开发中, 敬请期待',
        icon: 'none',
      })
      // uni.navigateTo({
      //   url: '/pages/notice/index'
      // })
    },
    // 修改密码
    editPassword() {
      console.log('跳转到修改密码页面')
      uni.navigateTo({
        url: '/pages/mine/pwd/index'
      })
    },
    // 退出登录
    logout() {
      console.log('退出登录')
      uni.showModal({
        title: '提示',
        content: '确定退出登录吗？',
        success: (res) => {
          if (res.confirm) {
            console.log('用户点击确定')
            uni.removeStorageSync('userInfo')
            uni.removeStorageSync('App-Token')
            uni.removeStorageSync('tabbarValue')
            uni.removeStorageSync('phone-platform')
            uni.reLaunch({
              url: '/pages/login/index'
            })
          } else if (res.cancel) {
            console.log('用户点击取消')
          }
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.content {
  .user-info {
    margin: 0 25px 36px;
    display: flex;
    align-items: center;
    flex-direction: column;

    .user-item {
      margin-top: 10px;
      font-weight: 500;
      font-size: 14px;
      color: #0a2640;
    }
  }

  .user-info-page {
    display: flex;
    justify-content: space-between;
  }
}
</style>
