<template>
  <view class="page">
    <view class="bgbg">
      <view class="flex">
		  <view class="imgbox">
			  <image v-if="state.user.avatar"  :src="state.user.avatar"/>
			<image v-else src="@/static/nodata.png"/>
		  </view>
        <text class="name">{{ state.user.userName }}</text>
      </view>
    </view>
	<view class="rMainBox">
		<uni-list :border="false" class="myList">
			<uni-list-item thumb="/static/user_icon01.png"  title="团体信息" showArrow clickable @click="goPath('/myCenter/teamInfo')">
			</uni-list-item>
			
			<uni-list-item thumb="/static/user_icon02.png"  title="会员认证" showArrow clickable @click="goPath('/myCenter/auth')">
			</uni-list-item>
			
<!-- 			<uni-list-item thumb="/static/user_icon03.png" v-show="userType==2"  title="账户信息" showArrow clickable>
			</uni-list-item> -->
			
			<uni-list-item thumb="/static/user_icon03.png"  title="账号安全" showArrow clickable @click="goPath('/myCenter/safe')">
			</uni-list-item>
			
		</uni-list>
		
	</view>
	
	<view class="fixedBottom" style="background: transparent;box-shadow: none;">
		<button @click="loginOut" class="btn btn-red" style="border-radius: 50px;">退出登录</button>
	</view>
  </view>
</template>

<script setup>
import * as api from '@/common/api.js';
import * as loginServer from '@/common/login.js';
import config from '@/config.js'
import {
  onLoad,
  onShow,
  onReady,
  onPullDownRefresh
} from '@dcloudio/uni-app';
import {
  ref,reactive,
  getCurrentInstance
} from 'vue';


const {
  proxy
} = getCurrentInstance()
const app = getApp();
const userType = ref('1')
const memberInfo = ref({})

let proId;
const svId = ref(null);
const numData = ref({});

const messageList = ref([])
const state = reactive({
  user: {},
  roleGroup: {},
  postGroup: {}
})
onShow(() => {
  if (app.globalData.isLogin) {
    init()
  } else {
    app.firstLoadCallback = () => {
      init()
    };
  }
})
onLoad(option => {
  if (option.scene) {
    proId = decodeURIComponent(option.scene);
  } else {
    proId = option.proId;
  }
  if(uni.showShareMenu){
    uni.showShareMenu({
      withShareTicket: true,
      menus: ['shareAppMessage', 'shareTimeline']
    });
  }
});

function loginOut() {
  uni.showModal({
    content: `确认退出吗？`,
    success: function(res) {
      if (res.confirm) {
        loginServer.logout().finally(() => {
          let path = '/login/login';
          uni.reLaunch({
            url: path
          });
        })
      }
    }
  })
}
function getUser() {
  api.getUserProfile().then((response) => {
    state.user = response.data.user
	if(state.user.avatar&&state.user.avatar.indexOf('http')==-1){
		state.user.avatar = config.baseUrl_api+state.user.avatar
	}
    state.roleGroup = response.data.roleGroup
    state.postGroup = response.data.postGroup
	uni.hideLoading();
  })
}
function init() {
  uni.showLoading({
    title: '加载中'
  });
  getUser()
  loginServer.getMyOwnMemberInfo().then(res => {
    userType.value = app.globalData.userType
    memberInfo.value = app.globalData.memberInfo
		uni.hideLoading();
  })
}
function goPath(url){
	uni.navigateTo({
		url:url
	})
}

</script>
<style scope lang="scss">
	.uni-list:after{display: none;}
	.page {
		width: 100vw;
		overflow: hidden;
	}
.bgbg{
	.flex{align-items: center;}
	height: 280rpx;padding:30rpx;
	.name{margin-left: 20rpx;
	font-size: 36rpx;}
		.imgbox{width: 120rpx;
	height: 120rpx;overflow: hidden;
	// background: #C7C7CD;
	// border: 4rpx solid #FFFFFF;
	border-radius: 50%;
		image{height: 120rpx;width: 120rpx;object-fit: cover;}
	}
}
	.loginOutIcon {
		position: relative;
		left: 60rpx;
		// top: 180rpx;

		image {
			width: 50rpx;
			height: 50rpx;
		}
	}

	.flexbox {
		display: flex;
		justify-content: space-around;
		text-align: center;

		image {
			width: 90rpx;
			height: 90rpx;
			display: block;
			margin: auto;
		}
	}

	.image {
		width: 25px;
		height: 25px;
	}

	:deep(.uni-section) {
		background-color: transparent;
	}

	:deep(.uni-section .uni-section-header__content) {
		font-size: 44rpx;
		font-weight: bold;
		color: #29343C;
	}

	:deep(.uni-section .uni-section-header) {
		padding: 0 30rpx;
	}

	.potag {
		position: absolute;
		right: 60rpx;
		top: 0;
	}

	.girdFather {
		background: #fff;
		position: relative;
		top: -15rpx;
		padding: 1rpx 0 0;
		border-radius: 20rpx 20rpx 0rpx 0rpx;
		box-sizing: border-box;

		.girdBox {
			top: 0;
			padding: 0 0 15rpx;
			border-bottom: 20rpx solid #ecf0f6
		}

		.ttt {
			margin: 30rpx 0 20rpx;
			padding: 0 20rpx 0;
		}
	}
	.rMainBox {position: relative;top:-120rpx;
		box-sizing: border-box;padding: 20rpx 20rpx;
		background-color: #fff;
		border-radius: 15rpx;
		margin: 25rpx;overflow: hidden;
	}
</style>