<template>
  <view class="ctr">
    <view class="fixed-top">
      <me-top title="我的" :is-show-icon="false"></me-top>
    </view>

    <me-empty-space :height="listMarginTop"></me-empty-space>
    <view class="header flex-l">
      <view class="avatar" :style="{background: 'var(--defaultUserAvatar)'}"></view>
      <view class="info">
        <view class="name">刘强西</view>
        <view class="phone">18628195903</view>
      </view>
      <view class="decorate"></view>
    </view>

    <view class="menus">
      <view class="item flex-sb" hover-class="auto-mask-layer-radius8" hover-start-time="0" hover-stay-time="50">
        <view class="icon flex-c">
          <me-icon type="icon-logout" color="var(--descriptionColor)" size="56rpx"></me-icon>
        </view>
        <view class="menu flex-sb">
          <view class="left flex-l">退出登录</view>
          <view class="right flex-r">
            <me-icon type="icon-arrow-right" color="var(--contentBgColor)" size="56rpx"></me-icon>
          </view>
        </view>
      </view>
    </view>

    <me-empty-space height="100"></me-empty-space>
  </view>
</template>

<script setup>
import {onLoad, onShow} from '@dcloudio/uni-app'
import {ref, reactive, computed, watch, inject} from 'vue'
import MeIcon from "../../components/me-icon/me-icon";
import MeButton from "../../components/me-button/me-button";
import MeEmptySpace from "../../components/me-empty-space/me-empty-space.vue";
import MeTop from "../../components/me-top/me-top.vue";
const listMarginTop = computed(() => {
  return (inject('globalData').statusBarH + (inject('globalData').customBarH - inject('globalData').statusBarH)) * 2
})
</script>

<style lang="scss" scoped>
.ctr {
  padding: 0 32rpx;
  box-sizing: border-box;
  .fixed-top {
    position: fixed;
    top: 0;
    background-color: var(--pageBgColor);
    width: 100%;
  }
  .header {
    width: 100%;
    height: 200rpx;
    background: var(--containerBgColor);
    border-radius: 16rpx;
    padding: 40rpx 32rpx;
    margin-top: 20rpx;
    box-sizing: border-box;
    position: relative;
    .avatar {
      width: 120rpx;
      height: 120rpx;
      border-radius: 60rpx;
    }
    .info {
      margin-left: 20rpx;
      width: 482rpx;
      height: 120rpx;
      .name,.phone {
        width: 100%;
        height: 60rpx;
        line-height: 60rpx;
        text-align: left;
      }
      .name {
        font-weight: 500;
        font-size: 34rpx;
        color: var(--titleColor);
      }
      .phone {
        font-size: 30rpx;
        color: var(--summaryColor);
      }
    }
    .decorate {
      width: 240rpx;
      height: 200rpx;
      position: absolute;
      right: 0;
      background: url("/static/img/user-bg.png") no-repeat center / 100%;
      border-radius: 0 16rpx 16rpx 0;
    }
  }
  .menus {
    margin-top: 32rpx;
    width: 100%;
    background: var(--containerBgColor);
    border-radius: 16rpx;
    padding: 20rpx;
    box-sizing: border-box;
    .item {
      width: 100%;
      height: 120rpx;
      .icon {
        width: 100rpx;
        height: 120rpx;
      }
      .menu {
        width: 546rpx;
        height: 120rpx;
        .left {
          width: 266rpx;
          height: 100%;
          font-size: 30rpx;
          color: var(--titleColor);
        }
        .right {
          width: 280rpx;
          height: 100%;
        }
      }
    }
  }
}
</style>
