<template>
	<view class="matchmaking" style="margin-bottom:10px;">
		<view v-if='navs.listStyle == 1' >
			<waterfallsFlow  :single="true" :list="navs.list"  @wapper-lick='goDetail()'>
				<view v-for="(item, index) of navs.list" :key="index" slot="slot{{index}}">
					<view class="pb-box">
						<u-avatar :src="item.Photo" size="72"></u-avatar>
						<image class="gstyle2" v-if="item.SexStr=='男'" src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/basic-nan-b.png" ></image>
						<image class="gstyle2" v-if="item.SexStr=='女'" src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/basic-nv-b.png" ></image>
						<view class="boxt-center">
							<view class="row">
								<view class="box-name">{{item.name}}</view>
							</view>
							<view class="row">
								<view class="boxtc-b-item">{{item.Age}}岁</view>
							</view>
						</view>
					</view>
				</view>
			</waterfallsFlow>
		</view>
		<view class="matchmaking-box" v-for="(item,index) in navs.list" :key='index' @click="goDetail(item)" v-if="navs.listStyle==-1 || navs.listStyle==0">
			<view class="box-top">
				<u-avatar :src="item.Photo" size="80"></u-avatar>
				<image class="gstyle" v-if="item.SexStr=='男'" src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/basic-nan-b.png" ></image>
				<image class="gstyle" v-if="item.SexStr=='女'" src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/basic-nv-b.png" ></image>
				<view class="boxt-center">
					<view class="row">
						<view class="box-name">{{item.name}}</view>
					</view>
					<view class="row">
						<view class="boxtc-b-item">{{item.Age}}岁</view>
						<view class="boxtc-b-item">{{item.Education}}</view>
						<view class="boxtc-b-item">{{item.Marriage}}</view>
					</view>
				</view>
				<view class="boxt-r" v-if="item.MatchingRate>0">
					匹配度 {{item.MatchingRate}}%
				</view>
			</view>
			<view class="box-img">
				<view v-if="navs.listStyle==-1" class="box-img-one">
					<image :src="item.AlbumList[0]" mode="aspectFill" style="width: 100%;height: 100%;border-radius: 15px;"></image>
				</view>
				<view v-if="navs.listStyle==0" class="box-img-two">
					<view class="box-img-two-item" v-for="(x,y) in item.AlbumList" :key='y'>
						<image :src="x" mode="aspectFill" style="width: 100%;height: 100%;border-radius: 15px;"></image>
					</view>
					<view style="width: 1px;height: 10px;"></view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import waterfallsFlow from './maramlee-waterfalls-flow.vue'
	export default {
		props: ["navs"],
		components: { waterfallsFlow },
		data(){
			return{
				type:2,
				mainColor: '',
				secondary: '',
			}
		},
		created() {
			this.mainColor = this.$uiConfig.mainColor;
			this.secondary = this.$uiConfig.secondary;
		},
		methods:{
			goDetail(x){
				uni.navigateTo({
					url: '/pages/blindDate/persondetails?UserId=' + x.id
				});
			}
		}
	}
	
</script>

<style>
	.matchmaking-box{
		display: flex;
		flex-direction: column;
		padding: 10px 0;
		background-color: #fff;
	}
	.matchmaking .box-top{
		width: 100%;
		padding:0 15px;
		height: 80rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		position: relative;
	}

	.matchmaking  .gstyle{
		position: absolute;
		left: 78rpx;
		bottom: 0;
		width: 32rpx;
		height: 32rpx;
	}
	
	.matchmaking .boxt-center{
		width: 1px;
		flex: 1;
		height: 80rpx;
		margin-left: 10px;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}
	.matchmaking .boxt-r{
		width: 70px;
		font-size: 11px;
		color: #888888;
		text-align: right;
	}
	.matchmaking .row{
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	.matchmaking .boxtc-t-f{
		width: 28px;
		height:14px ;
		border-radius: 3px;
		font-size: 10px;
		background: #B2EEEC;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.matchmaking .box-name{
		font-size: 14px;
		color: #111111;
		margin-left: 5px;
		width: calc(100vw - 30px - 40px - 28px - 15px - 70px);
		overflow: hidden;display: inline-block;white-space: nowrap; text-overflow:ellipsis
	}
	.matchmaking .boxtc-b-item{
		font-size: 10px;
		color: #858687;
		height: 16px;
		padding: 0 6px;
		border-radius: 8px;
		background: #F8F8F8;
		margin-right: 5px;
	}
	.matchmaking .box-img{
		width: 100%;
		margin-top: 15px;
	}
	.matchmaking .box-img-one{
		padding: 0 15px;
		border-radius: 15px;
		width: 100%;
		height: 420rpx;
	}
	.matchmaking .box-img-two{
		display: -webkit-box;
		overflow-x: scroll;
		-webkit-overflow-scrolling: touch;
		padding: 0 15px;
	}
	/* 隐藏下方的滚动条 */
	.box-img-two::-webkit-scrollbar {
		background-color: transparent;
	}

	.matchmaking .box-img-two-item{
		width: 323px;
		height: 450px;
		border-radius: 15px;
		margin-right: 10px;
		overflow: hidden;
	}
	
	.matchmaking .pb-box{
		width: 100%;
		padding: 10px 5px;
		background: #FFF;
		border-bottom-left-radius: 6px;
		border-bottom-right-radius: 6px;
		display: flex;
		align-items: center;
		position: relative;
	}
	.matchmaking .gstyle2{
		position: absolute;
		left: 64rpx;
		top: 64rpx;
		width: 24rpx;
		height: 24rpx;
	}
</style>
