<template>
	<view class="">
		<view class="header-com" :style="{paddingTop:headerArea.status_height+'px'}">
			<view class="header-com-content" :style="{height:headerArea.title_height+'px',lineHeight:headerArea.title_height+'px',fontSize:headerArea.fontSize+'px'}">
				<view class="header-com-title" v-if="left" :style="{height:headerArea.title_height+'px'}">
					<img v-if="!isindex && comback" class="header-com-comback" :src="cssUrl+'header_back.svg'" :style="{width:headerArea.backwidth+'px',height:headerArea.backheight+'px'}">
					<view v-if="(!isindex && comback) || showClouldPhoto" @click="headerComeBack" class="header-com-comback header-com-comback-opc" :style="{width:headerArea.backwidth+'px',height:headerArea.title_height+'px',padding:'0rpx 0rpx 0rpx 36rpx',left:'-18rpx'}"></view>
					
					<img v-if="!showClouldPhoto && !showUserSetting" class="header-com-logo" :src="cssUrl+'logo.png'" :style="{width:headerArea.logowidth+'px',height:headerArea.logoheight+'px'}">
					<view class="header-com-line" :style="{height:headerArea.lineheight+'px'}" v-if="is_admin && !showClouldPhoto"></view>
					<view class="header-com-role font24rpx PingFangSCMedium" v-if="is_admin && !showClouldPhoto && !showUserSetting">管理员</view>
					<view v-if="showClouldPhoto && typeClouldPhoto == 1" class="clouldPhoto">云相册选择图片</view>
					<view v-if="showClouldPhoto && typeClouldPhoto == 2" class="clouldPhoto">云相册选择封面</view>
					<view v-if="showUserSetting" class="userSetting">修改资料</view>
				</view>
			</view>
		</view>

		<view class="header-com-bt" :style="{width:'100%',height:(headerArea.btheight)+'px'}"></view>
	</view>
</template>
 
<script>
	export default {
		name:'header',
		data() {
			return {
				cssUrl:this.cssUrl
			}
		},
		props:{
			left:{
				type:Boolean,
				default:()=>false
			},
			comback:{
				type:Boolean,
				default:()=>true
			},
			showClouldPhoto:{
				type:Boolean,
				default:()=>false
			},
			typeClouldPhoto:{
				type:Number,
				default:()=>0
			},
			showUserSetting:{
				type:Boolean,
				default:()=>false
			},
			isindex:{
				type:Boolean,
				default:()=>false
			},
			role:{
				type:String,
				default:()=>'',
			},
			is_admin:{
				type: Boolean,
				default: false
			}
		},
		computed:{
			headerArea() {
			  let area = uni.getSystemInfoSync();
			  // #ifdef MP-WEIXIN
			  return this.getHeaderInfo();
			  // #endif
			  // #ifndef MP-WEIXIN
			  return {
			    status_height: area.statusBarHeight,
			    title_height: uni.upx2px(80),
			    menuLeft: 0,
				fontSize:uni.upx2px(34),
			  };
			  // #endif
			}
		},
		methods: {
			async getUser() {
				await this.$http.req('userapi/index2/getUser').then(data=>{
					if(data == -1) return;
					uni.removeStorageSync('uuid');
					uni.removeStorageSync('nickname');
					uni.removeStorageSync('avatar');
					uni.removeStorageSync('level_id');
					uni.removeStorageSync('level_name');
					uni.removeStorageSync('is_admin');
					uni.removeStorageSync('avatar_full');
					uni.removeStorageSync('create');
					uni.removeStorageSync('uuid_str');

					if(data.is_admin) uni.removeStorageSync('is_admin');
					uni.setStorageSync('uuid', data.userId);
					uni.setStorageSync('uuid_str', data.userIdStr);
					uni.setStorageSync('nickname', data.nickname);
					uni.setStorageSync('avatar', data.avatar);
					uni.setStorageSync('avatar_full', data.avatar_full);
					uni.setStorageSync('level_id', data.level_id);
					uni.setStorageSync('level_name', data.level_name);
					uni.setStorageSync('create', data.create);
					if(data.is_admin) uni.setStorageSync('is_admin', data.is_admin);
				});
			},
			getHeaderInfo() {
				let area = uni.getSystemInfoSync();
				// #ifdef MP-WEIXIN
				let menu = uni.getMenuButtonBoundingClientRect();
				var conheight = menu.height + (menu.top - area.statusBarHeight) * 2;
				return {
					status_height: area.statusBarHeight,
					title_height: conheight,
					menuLeft: menu.left,
					menuHeight:menu.height,
					btheight:menu.top+conheight,
					fontSize:uni.upx2px(34),
					backwidth: ((22/38)*(conheight*0.5)),
					backheight:conheight*0.5,
					logowidth: ((556/80)*(conheight*0.48)),
					logoheight:conheight*0.48,
					lineheight:conheight*0.3
				};
				// #endif
			},
			headerComeBack(e){
				if(this.showClouldPhoto){
					this.$parent.hideClouldPhoto()
					return
				}
				var hpages = getCurrentPages();
				if(hpages.length > 1){
					uni.navigateBack({
					});
				}else{
					uni.reLaunch({
						url:'/pages/index/index'
					});
				}
			}
		}
	}
</script>
 
<style>
	.header-com{
		overflow: hidden;
		width: 100%;
		position: fixed;
		background: #FFFFFF;
		z-index: 189;
	}
	.header-com-content{
		width: 100%;
		box-sizing: border-box;
		color: #292929;
		text-align: center;
		font-family: MiSans;
		font-style: normal;
		font-weight: 600;
		line-height: normal;
		box-sizing: border-box;
		overflow: hidden;
		box-sizing: border-box;
	}
	.header-com-title{
		position: relative;
		display: flex;
		align-items: center;
		height: 100%;
		overflow: hidden;
		box-sizing: border-box;
	}
	.header-com-comback{
		color: #000000;
		margin-left: 36rpx;
	}
	.header-com-logo{
		margin-left: 36rpx;
	}
	.header-com-line{
		width: 3rpx;
		background: #D8D8D8;
		border-radius: 1rpx;
		margin-left: 20rpx;
	}
	.header-com-role{
		margin-left: 20rpx;
		font-weight: 500;
		color: #999999;
	}
	.header-com-bt{
		background: #FFFFFF;
	}
	.clouldPhoto{
		width: 100%;
		position: absolute;
		left: 0;
		top: 0;
		text-align: center;
	}
	.header-com-comback-opc{
		position: absolute;
		left: 0;
		top: 0;
		opacity: 0;
		z-index:8;
	}
</style>