<template>
	<view class="headers_box">
		<view :style="{ height: mobileTopHeight + 'px' }" class="statusBar">	
		</view>
		<h2>{{projectTitle}}</h2>
		<view class="headers_nav">
			<ul >
				<li v-for="(item, index) in navList" :key="index" :class="{'active': tabIndex == index}" @click="changTab(index)">{{item.name}}</li>
			</ul>
		</view>
		<slot></slot>
	</view>
</template>

<script>
	export default {
		props:{
			tabIndex:{
				type:Number,
				default:0
			},
			navList:{
				type: Array
			}
		},
		data(){
			return {
				projectTitle: "天之骄子一期项目",
				mobileTopHeight: 0
			}
		},
		mounted(){
			var that = this
			uni.getSystemInfo({
				success(res) {
					that.mobileTopHeight = res.statusBarHeight
					uni.setStorageSync('systemInfo',res)
					console.log(res)
				}
			})
		},
		methods:{
			changTab(index){
				if(index == 0){
					uni.redirectTo({
						url: '/pages/workstation/workstationIndex/workstationIndex'
					})
				} else if (index == 1) {
					uni.redirectTo({
						url: '/pages/workstation/worfStationNotice/worfStationNotice'
					})
				} else if (index == 2) {
					uni.redirectTo({
						url: '/pages/workstation/workStationSchedule/workStationSchedule'
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.statusBar{
		background-color: #2a2b5b;
	}
	.headers_box{
		background: #127FEC;
		padding-bottom: 4rpx;
		// border-radius: 0px 0px 40rpx 40rpx;
		h2{
			color: #fff;
			font-weight: normal;
			font-size: 40rpx;
			text-align: center;
			line-height: 92rpx;
			margin-bottom: 12rpx;
		}
		.headers_nav {
			margin-bottom: 30rpx;
			ul{
				width: 692rpx;
				height: 84rpx;
				background: #fff;
				list-style: none;
				display: flex;
				margin: 0 auto;
				padding: 0;
				justify-content: space-between;
				align-items: center;
				border-radius: 42rpx;
				padding: 0 6rpx;
				box-sizing: border-box;
				li{
					color: #6C7178;
					font-size: 28rpx;
					flex: 1;
					text-align: center;
					width: 226rpx;
					height: 72rpx;
					line-height: 72rpx;
				}
				.active{
					border-radius: 36rpx;
					box-shadow: 0px 1px 6px 0px rgba(0, 129, 255, 0.67);
					color: #107EEE;
					font-weight: 900;
				}
			}	
		}
		.headers_statistics{
			margin-bottom: 30rpx;
			ul{
				display: flex;
				align-items: center;
				justify-content: center;
				list-style: none;
				width: 100%;
				height: 54rpx;
				padding: 0;
				border-bottom: 1px solid rgba(255, 255, 255, 0.2);
				border-top: 1px solid rgba(255, 255, 255, 0.2);
				li{
					flex: 1;
					color: rgba(255, 255, 255, 0.6);
					line-height: 54rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					font-size: 28rpx;
					span{
						font-size: 36rpx;
						color: #fff;
						margin-left: 20rpx;
					}
				}
				.item_center{
					border-left: 1px solid rgba(255, 255, 255, 0.2);
					border-right: 1px solid rgba(255, 255, 255, 0.2);
				}
			}
		}
		.list_title{
			display: flex;
			align-items: center;
			justify-content: space-between;
			.list_h2{
				color: #fff;
				font-size: 30rpx;
				font-weight: 500;
				margin-left: 54rpx;
			}
			.list_btn{
				margin-right: 30rpx;
				ul{
					list-style: none;
					display: flex;
					justify-content: center;
					align-items: center;
					border-radius: 12rpx;
					background: rgba(255, 255, 255, 0.2);
					padding: 0;
					overflow: hidden;
					li{
						color: rgba(255, 255, 255, 0.6);
						width: 120rpx;
						height: 46rpx;
						line-height: 46rpx;
						font-size: 28rpx;
						text-align: center;
					}
					.activeNav{
						background: #fff;
						color: #127FEC;
					}
				}
			}
		}
	}
</style>
