<template>
	<view class="index">
			<view class="header" :style="'margin-top: ' + listHeight + 'px'">
				<view class="pair">
					<view class="search" @click="$push('pages/search/index')">
						<image src="../../static/icon/search2.png" mode="widthFix"></image>
					</view>
					<!-- <view class="pair-btn" @click="navTo('pages/pair/pair')">
						<u-button text="配对" size="small" color="linear-gradient(to bottom, #040004, #681752)"></u-button>
					</view> -->
				</view>
				<view class="menu">
					<u-tabs :list="menu" :current="currentTab" lineColor="#ff0077" :activeStyle="{
							color: '#ffffff',
							fontWeight: 'bold',
							transform: 'scale(1.05)'
						}" @click="tabChange">
					</u-tabs>
				</view>
			</view>
			<view class="list"  :style="'height:' + winheight + 'px;'">
				
			</view>
	</view>
</template>

<script>
	import * as UserProfileApi from '@/api/love-user-profile.js'
	const menu = [{
			name: '同城'
		},
		{
			name: '推荐'
		},
		{
			name: '关注'
		}
	];
	export default {
		data() {
			return {
				menu,
				currentTab: 1,
				where: {},
				windowHeight: 0 ,
				statusBarHeight: 0,
				listHeight: 0
			};
		},
		onLoad() {
			// 获取可用高度
			const sysInfo = uni.getSystemInfoSync()
			this.windowHeight = sysInfo.windowHeight
			this.statusBarHeight = sysInfo.statusBarHeight
			this.listHeight = sysInfo.windowHeight - sysInfo.statusBarHeight - 44
			this.queryList({
				page: 1,
				limit: 100
			})
		},
		methods: {
			tabChange(index) {
				this.tabIndex = index;
				//当切换tab或搜索时请调用组件的reload方法，请勿直接调用：queryList方法！！
				this.$refs.paging.reload();
			},
			queryList(where) {
				UserProfileApi.pageUserProfile(where).then(res => {
					// this.
				}).catch(res => {
					this.$refs.paging.complete(false);
				})
			},
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #0f001f !important;
	}

	.list{
		width: 750rpx;scroll-snap-type: y mandatory;overflow-x: hidden;overflow-y: auto;
	}

	.header {
		display: flex;
		z-index: 9999;
		justify-content: space-around;
		align-items: center;
		width: 750rpx;
		height: 88rpx;
		// background-color: #0f001f;

		.pair {
			position: absolute;
			left: 30rpx;
			position: absolute;
			right: 30rpx;
			display: flex;

			.search {
				image {
					padding-top: 15rpx;
					width: 40rpx;
					height: 40rpx;
				}
			}

			.pair-btn {
				margin-left: 25rpx;
			}

		}

		.menu {
			display: flex;
			justify-content: center;
			// font-size: 32rpx;
			// font-weight: 600;
			z-index: 9999;

			.link {
				color: #cfd1d7;
			}

			.curr {
				color: #ffffff;
				border-bottom: 5rpx solid #ffffff;
			}
		}

	}
</style>