<template>
  <view>
    <custom-nav-bar position="fixed" color="black" left-text="设置" left-arrow />

    <view class="page-content">
      <view class="cell">
        <view class="cell-left">
          <view class="title">头像</view>
        </view>
        <view class="cell-right">
          <view class="cell-right-number">
            <view class="portrait">
              <image class="portrait-img" data-name="just" :src="userInfo.avatar"></image>
            </view>
          </view>
          <view class="arrow">
            <van-icon name="arrow" size="18px" />
          </view>
        </view>
      </view>
      <view class="cell">
        <view class="cell-left">
          <view class="title">名称</view>
        </view>
        <view class="cell-right">
          <view class="cell-right-number">
            {{ userInfo.nickName }}
          </view>
          <view class="arrow">
            <van-icon name="arrow" size="18px" />
          </view>
        </view>
      </view>
      <view class="cell">
        <view class="cell-left">
          <view class="title">手机号</view>
        </view>
        <view class="cell-right">
          <view class="cell-right-number">
            {{ userInfo.mobile }}
          </view>
          <view class="arrow">
            <van-icon name="arrow" size="18px" />
          </view>
        </view>
      </view>
      <view class="cell">
        <view class="cell-left">
          <view class="title">版本信息</view>
        </view>
        <view class="cell-right">
          <view class="arrow">
            <van-icon name="arrow" size="18px" />
          </view>
        </view>
      </view>
      <view class="cell">
        <view class="cell-left">
          <view class="title">帮助中心</view>
        </view>
        <view class="cell-right">
          <view class="arrow">
            <van-icon name="arrow" size="18px" />
          </view>
        </view>
      </view>
    </view>
    <view class="log-out">
      <view class="button" @tap="signOut">退出账号</view>
    </view>
  </view>
</template>

<script>
  //index.js
  export default {
    components: {},
    data() {
      return {
        userInfo: uni.getStorageSync('userInfoData')
      };
    },
    async onLoad() {},
    onShow() {
      this.userInfo = uni.getStorageSync('userInfoData')
    },
    methods: {
      signOut() {
        uni.showModal({
          title: '提示',
          content: '确定退出当前账号？',
          success(res) {
            if (res.confirm) {
              uni.removeStorage({
                key: 'isLogin'
              });
              uni.removeStorage({
                key: 'token'
              });
              uni.removeStorage({
                key: 'userInfoData'
              });
              uni.removeStorage({
                key: 'userRoles'
              });
              uni.showToast({
                title: '退出登录成功',
                icon: 'none'
              });
              uni.switchTab({
                url: '/pages/my/my'
              });
            }
          }
        });
      }
    }
  };
</script>
<style lang="less">
  /* pages/people/people.wxss */
  page {
    --nav-bar-background-color: transparent;
    --nav-bar-text-color: #ffffff; // 导航栏左侧文案样式
  }

  .page-content {
    margin-top: 20rpx;
    padding-left: 36rpx;
    padding-right: 36rpx;

    .cell {
      width: 100%;
      height: 120rpx;
      background: #ffffff;
      border-bottom: 1rpx solid #efefef;
      display: flex;
      justify-content: space-between;

      .cell-left {
        height: 100%;
        display: flex;
        align-items: center;

        .icon {
          height: 40rpx;
          width: 40rpx;
          margin-right: 32rpx;

          image {
            height: 100%;
            width: 100%;
          }
        }

        .title {
          font-size: 32rpx;

          font-weight: 400;
          color: #333333;
          line-height: 32rpx;
        }
      }

      .cell-right {
        height: 100%;
        width: 400rpx;
        display: flex;
        align-items: center;
        justify-content: flex-end;

        .cell-right-number {
          font-size: 32rpx;

          font-weight: 400;
          color: #666666;
          margin-right: 28rpx;
        }
      }
    }
  }

  .portrait {
    width: 88rpx;
    height: 88rpx;
    overflow: hidden;
    border-radius: 50%;

    .portrait-img {
      width: 100%;
      height: 100%;
    }
  }

  .log-out {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 77rpx 36rpx 24rpx;

    .button {
      text-align: center;
      width: 100%;
      height: 80rpx;
      background: #e0383e;
      border-radius: 8rpx;
      font-size: 32rpx;
      font-weight: 500;
      color: #ffffff;
      line-height: 80rpx;
    }
  }
</style>