<template>
    <view class="me">
        <custom-navbar class="custom-navbar" />
        <!-- 背景图片 -->
        <image class="bg-img" :src="require('@/static/me/bg.png')" @click="goEditUserPage"/>
        <!-- 用户信息 -->
        <view class="user" >
            <view class="user-ava" >
              <open-data  type="userAvatarUrl" />
            </view>
            
            <view class="user-info">
                <view class="user-name van-ellipsis">
                   {{userInfoData.name || '请登录'}}
                </view>
                
                <view class="user-auth" @click="goOptionsPage({id: 3})" >  <!-- @click="goRolePage" -->
                    <image class="user-auth-ava" :src="staticImg.authFlag" />
                    <text> 代理商</text>
                </view>
            </view>
        </view>
        <!-- 各种分类 -->
        <view class="category">
            <view class="category-item" 
                v-for="item in categoryList" 
                :key="item.id"
                @click="goSettingPage"
            >
                <view class="left">
                    <image class="category-ava" mode="aspectFill"  :src="item.ava" />
                    <text>{{item.label}}</text>
                </view>
                <view class="right">
                    <van-icon name="arrow" size="24rpx" color="#999" />
                </view>
            </view>
        </view>
    </view>
</template>

<script>
import CustomNavbar from '@/components/CustomNavbar/index'
import { getUserInfo } from '@/api/user'
const categoryList = Object.freeze([
              {
                  id: 4,
                  ava: require('@/static/me/setting.png'),
                  label: '我的设置'
              },
          ])

export default {
  name: 'Me',
  components: {
    CustomNavbar
  },
  computed: {
  },
  onLoad () {
    this.getUserInfo()
  },
  data () {
      return {
        categoryList,
        staticImg: {
            authFlag: require('@/static/me/auth-flag.png'),
        },
        userInfoData: {},
      }
  },
  methods: {
    goSettingPage () {
      uni.navigateTo({
        url: '/pages/setting/index'
      })
    },
    //   获取个人信息
    async getUserInfo () {
       const {status, data} = await getUserInfo()
       if (status === 200) {
          
           this.userInfoData = Object.freeze(data)
       }
    },
  }

}
</script>
<style scoped lang="less">
.me {
    .custom-navbar {
        visibility: hidden;
    }
    .bg-img {
        width: 490rpx;
        height: 320rpx;
        position: fixed;
        top: 0;
        left: 0;
        z-index: -1;
    }
    .user {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 64rpx;
        box-sizing: border-box;
        margin-top: 72rpx;
        &-ava {
            width: 160rpx;
            height: 160rpx;
            border: 6rpx solid #FFFFFF;
            box-sizing: border-box;
            border-radius: 50%;
            margin-right: 56rpx;
            overflow: hidden;
        }
        &-info {
            flex: 1;
            .user-name {
                width: 406rpx;
                font-size: 44rpx;
                font-weight: 600;
                color: #333333;
            }
            .user-auth {
                font-size: 24rpx;
                font-weight: 400;
                color: #999999;
                margin-top: 16rpx;
                display: flex;
                align-items: center;
                .user-auth-ava {
                    width: 20rpx;
                    height: 20rpx;
                    margin-right: 10rpx;
                    display: block;
                }
                text {
                    margin-right: 10rpx;
                }
            }
        }
    }
    .attention {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0rpx 88rpx 0rpx 90rpx;
        box-sizing: border-box;
        margin-top: 64rpx;
        .attention-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            .label {
                font-size: 24rpx;
                font-weight: 400;
                color: #999999;
                margin-bottom: 26rpx;
                display: block;
            }
            .num {
                font-size: 40rpx;
                font-weight: 600;
                color: #333333;
                display: block;
            }
        }
         
    }

    .category {
        margin-top: 60rpx;
        &-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0rpx 64rpx 0rpx 86rpx;
            box-sizing: border-box;
            height: 124rpx;
            .left {
                display: flex;
                align-items: center;
                .category-ava {
                    width: 40rpx;
                    height: 44rpx;
                    margin-right: 30rpx;
                    display: block;
                }
                text {
                    font-size: 30rpx;
                    font-weight: 400;
                    color: #333333;
                }
            }
            .right {
                width: 24rpx;
                height: 24rpx;
            }
        }
    }
}
</style>