<template>
  <view>
	 <tui-navigation-bar :isOpacity="false" @init="initNavigation" @change="opacityChange" :scrollTop="scrollTop" backgroundColor="#fafafa" color="#333">
	 	<view>
			<view class="nav-box">
				<view style="width: 200px;">
					<u-tabs :list="list" bg-color="#fafafa" font-size="36" active-color="var(--ui-BG-Main)" :is-scroll="false" v-model="current" @change="change"></u-tabs>
				</view>
			</view>
		</view>
	 </tui-navigation-bar>
  </view>
</template>

<script>
	import tuiNavigationBar from "@/components/thorui/tui-navigation-bar/tui-navigation-bar.vue";
	export default {
		components: {
			tuiNavigationBar,
		},
		props: {
			currentValue: {
				type: Number,
				default: 0,
			},
		},
		data() {
			return {
				list: [{
					name: '搭子'
				}, {
					name: '服务'
				}, {
					name: '社交',
				}],
				
				top: 0, //标题图标距离顶部距离
				opacity: 1,
				height: 0,
				scrollTop: 0.5,
			}
		},
		computed: {
			current() {
				return this.currentValue;
			},
		},
		methods: {
			initNavigation(e) {
				this.height = e.height;
				this.opacity = e.opacity;
				this.top = e.top;
				this.$emit('initNav', e);
			},
			opacityChange(e) {
				this.opacity = e.opacity;
			},
			change(index) {
				this.$emit('change', index);
			},
		}
	}
</script>

<style lang="scss" scoped>
	.nav-box {
		height: 44px;
		display: flex;
		justify-content: center;
		background-color: #fafafa;
		flex-direction: column;
		font-size: 22rpx;
		position: relative;
		
	}
	

</style>