<template>
	<view>
		<view class="">
			<u-navbar :border-bottom="false" :background="background" :is-back="false"  title-color="#fff" title="我的"></u-navbar>
			<view class="header">
				<view class="" style="height: 25rpx;"></view>
			    <view class="flex justify-between">
			    	<view class="flex">
			    		<view class="avatar">
			    		   <open-data  style="width: 120rpx;height: 120rpx; " type="userAvatarUrl"></open-data>
			    		</view>
			    		<view style="padding: 10rpx 20rpx;" >
			    			<text style="font-size: 32rpx;color: #FFFFFF;font-weight: 800;">{{vuex_party_person.name}}</text>
			    			<view class="text-white text-df padding-top-20">
			    				{{$cache.get('phone')}}
			    			</view>
			    		</view>
			    	</view>
			    </view>
			</view>
			
			<view class="info" @click="jump">
				<text >我的党支部</text>
				<text>{{vuex_party_branch.branchName}}</text>
			</view>
			
			<view class="item_list" >
				<view class="item">
					<text style="font-size: 32rpx;">系统功能</text>
				</view>
				<view  class="item" v-for="(item, index) in systemItemList" :key="index" @tap="jump(item.path)">
					<view class="item_content">
						<image :src="item.itemIcon"></image>
						<text>{{ item.itemName }}</text>
					</view>
					<view class="">
						<image src="http://139.9.103.171:1888/img/image/arrow.png"></image>
					</view>
				</view>
			</view>
		</view>
		 <u-tabbar 
		   @change="tabChange"
		   v-model="tabbarCurr"
		  :icon-size="tabbar.iconSize" 
		  :active-color="tabbar.activeColor" 
		  :mid-button-size="tabbar.MinButtonSize" 
		  :list="tabbar.list" :mid-button="true">
		  </u-tabbar>
	</view>
</template>

<script>
	import {tabbar} from "@/assets/js/party-tarbar.js"
	let that
	export default {
		data() {
			return {
				background:{
					backgroundColor:'#DE2910'
				},
				//tabbar
				tabbarCurr:2,
				tabbar:tabbar,
				
				systemItemList:[
					{
						itemName: '我报名的活动',
						itemIcon: '/party/static/icon/biaozhu.png',
						path:'/party/pages/activity/my-applied/my-applied'
					},
					{
						itemName: '返回园区',
						itemIcon: '/party/static/icon/back.png',
						path:'/pages/index/index'
					},
				]
			}
		},
		onLoad() {
			this.checkIsEnroll()
		},
		methods: {
			tabChange(index){
				
				if (index==0) {
					uni.redirectTo({
						url:"/party/pages/home/home"
					})
				}else if (index==1) {
					uni.redirectTo({
						url:"/party/pages/activity/activity"
					})
				}
			},
			jump(url){
				if (url=='/pages/index/index') {
					uni.switchTab({
						url
					})
					return
				}
				uni.navigateTo({
					url
				})
			},
			async checkIsEnroll(){
				let params={
					memberId:this.vuex_party_person.id
				}
				let res=await this.$api.party.checkIsEnroll(params)
				if (!this.$isEmpty(res.data.records[0])) {
					this.isEnroll=true
				}
			},
		}
	}
</script>

<style>
	page{
		background-color: #FFFFFF;
	}
</style>

<style lang="scss" scoped>
	
	
	.header{
		background-color: $party-color;
		height: 250rpx;
		
		.avatar{
			display: block;
			margin-left: 50rpx;
		    overflow:hidden;  
		    width: 120rpx;
		    height: 120rpx; 
		    left: 50%;  
		    border-radius: 50%;  
		}
		.nickname{
			display: flex;
			justify-content: center;
			align-items: center;
			padding-left: 30rpx;
			font-size: 34rpx;
		}
	}
	
	.info{
		padding:30rpx 20rpx;
		text-align: center;
		margin: -60rpx 25rpx 20rpx;
		background-color: #FFFFFF;
		border-radius: 20rpx;
		box-shadow: 0 10rpx #e7f1fd ;
		display: flex;
		justify-content: space-between;
		
		text:first-child{
			font-size: 30rpx;
			padding-left: 15rpx;
			color: #000000;
			font-weight: 800;
		}
		
		text:last-child{
			color: #333;
			padding-right: 20rpx;
			font-size: 28rpx;
		}
	}
	
	.item_list {
		display: flex;
		flex-direction: column;
		background: #fff;
		margin: 20rpx;
		border-radius: 20rpx;
		.item {
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-between;
			padding: 0 30upx;
			height: 90upx;
			border-bottom: 1upx solid #f1f1f1;
	
			.item_content {
				display: flex;
				flex-direction: row;
				align-items: center;
	
				image {
					width: 42upx;
					height: 42upx;
				}
	
				text {
					font-size: 28upx;
					color: #333333;
					margin-left: 20upx;
				}
			}
	
			image {
				width: 10upx;
				height: 18upx;
			}
		}
		
		.item:first-child{
			border: none;
		}
	
		.item:last-child {
			border: none;
		}
	}

</style>
