<template>
    <view class="waper">
    	<u-navbar :autoBack="true" :placeholder="true" bgColor="#03AE80" leftIconColor="#fff">
            <view slot='center' style="font-size: 36rpx; font-weight: bold; color: #fff;">统计</view>
        </u-navbar>
		<view class="colorLump"></view>
		<view class="tabs">
			<view :class="['tab', menuIndex == index ? 'activeTab' : '']" v-for="(item, index) in tabList" :key="index" @click="changeTab(index)">{{item}}</view>
		</view>
		<view class="list" v-if="menuIndex == 0" :style="'height: calc(100vh - (' + paddingTop + 'px))'">
			<portrayal />
		</view>
		<view class="list" v-if="menuIndex == 1" :style="'height: calc(100vh - (' + paddingTop + 'px))'">
			<analyse />
		</view>
		<view class="list" v-if="menuIndex == 2" :style="'height: calc(100vh - (' + paddingTop + 'px))'">
			<monitoring />
		</view>
    </view>
</template>

<script>
import portrayal from "./portrayal"
import analyse from "./analyse"
import monitoring from "./monitoring"
export default {
	components: {
		portrayal,
		analyse,
		monitoring
	},
    data () {
        return {
			tabList: [ '游客画像', '运营分析', '实时监控' ],
			menuIndex: 0,
			paddingTop: 0,
			bottomHight: 0
        }
    },
	onLoad(options) {
		let app = uni.getSystemInfoSync();
		this.bottomHight = app.safeAreaInsets.bottom //屏幕底部安全距离
		this.paddingTop = this.$paddingTop + this.bottomHight + uni.upx2px(90);
	},
    methods: {
		changeTab(i) {
			this.menuIndex = i;
		}
    }
}
</script>

<style lang="scss">
.waper{
    width: 100%; min-height: 100vh; box-sizing: border-box; background-color: #F6F6F6;
	.colorLump {
		width: 750rpx;
		height: 228rpx;
		background: #03AE80;
	}
	.tabs {
		margin-top: -208rpx;
		display: flex;
		align-items: center;
		justify-content: space-around;
		.tab {
			font-weight: 400;
			font-size: 28rpx;
			color: #FFFFFF;
			line-height: 33rpx;
		}
		.activeTab {
			font-weight: 500; position: relative;
			&::after {
				content: ""; width: 30rpx; height: 6rpx; background: #FFF; border-radius: 14rpx; position: absolute; left: 50%; top: 42rpx; transform: translateX(-50%);
			}
		}
	}
	.list {
		margin-top: 36rpx;
		padding: 0 32rpx 10rpx;
		box-sizing: border-box;
	}
}
</style>