<template>
	<view class="search">
		<view class="search-hd">
			<view class="a">
				<image src="@/static/search.png"></image>
				<input type="search" placeholder="请输入名称搜索" />
				<view class="btn">搜索</view>
			</view>
			<view class="b" @click="openPage(1)">
				<image src="@/static/filter.png"></image>
			</view>
		</view>
		<view class="search-bd">
			<view class="item" v-for="i in 3" :key="i">
				<view class="pic">
					<image src="@/static/nv.png"></image>
				</view>
				<view class="info">
					<view class="name">李哈哈<view class="vip">VIP1</view></view>
					<view class="desc">26岁/178cm</view>
				</view>
				<view class="chat">
					<image src="@/static/xin.png"></image>
					{{type == 1?'搭讪':'约玩'}}
				</view>
			</view>
			<view class="empty">
				<image src="@/static/empty.png"></image>
				<view class="txt">暂无数据</view>
			</view>
		</view>
		<unverified :isPopup="isPopup" />
		<insufficient :isCoins="isCoins" />
		<u-popup v-model="show" mode="center" border-radius="20">
			<view class="filter">
				<view class="title">筛选</view>
				<view class="content">
					<view class="a">
						<view class="fl">年龄</view>
						<view class="fr">18-80</view>
					</view>
					<view class="b">
						<sliderRange
						  :value="rangeValue"
						  :min="18"
						  :max="80"
						  :step="1"
						  :bar-height="3"
						  :block-size="26"
						  background-color="#EEEEF6"
						  active-color="#222222"
						  :decorationVisible="false"
						  @change="handleRangeChange"
						></sliderRange>
					</view>
				</view>
				<view class="btns">
					<view class="reset" @click="openPage(1)">重置</view>
					<view class="sure" @click="openPage(2)">确定</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import sliderRange from '@/components/sliderRange.vue'
	export default {
		components: {
			sliderRange
		},
		data() {
			return {
				rangeValue: [18,80],
				show: false,
				isPopup: false,
				isCoins: false,
				type: 1
			};
		},
		onLoad(o) {
			this.type = o.type
		},
		methods: {
			openPage(index){
				if(index == 1){
					this.show = !this.show
				}else if(index == 2){
					this.show = false
				}
			},
			handleRangeChange(e){
				console.log(e)
			},
		}
	}
</script>

<style scoped lang="scss">
.search{
	.filter{
		width: 630rpx;
		height: 500rpx;
		.title{
			padding: 40rpx 0 30rpx;
			font-weight: 500;
			font-size: 36rpx;
			color: #222222;
			text-align: center;
			border-bottom: 1px solid #EAEAEA;
		}
		.content{
			padding: 40rpx;
			overflow: hidden;
			.a{
				display: flex;
				align-items: center;
				font-weight: 500;
				font-size: 30rpx;
				color: #222222;
				justify-content: space-between;
			}
			.b{
				width: 100%;
				display: flex;
				align-items: center;
				font-weight: bold;
				font-size: 30rpx;
				color: #222222;
				justify-content: space-between;
				position: relative;
				margin-top: 45rpx;
			}
		}
		.btns{
			height: 90rpx;
			border-top: 1px solid #EAEAEA;
			display: flex;
			align-items: center;
			.reset{
				flex: 1;
				border-right: 1px solid #EAEAEA;
				text-align: center;
				font-size: 30rpx;
				color: #222222;
				font-weight: 500;
				text-align: center;
				line-height: 90rpx;
			}
			.sure{
				flex: 1;
				text-align: center;
				font-size: 30rpx;
				color: #222222;
				font-weight: 500;
				text-align: center;
				line-height: 90rpx;
			}
		}
	}
	&-hd{
		width: 100%;
		height: 110rpx;
		background: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 20rpx;
		box-sizing: border-box;
		.a{
			width: 620rpx;
			height: 70rpx;
			background: #F6F6F6;
			border-radius: 70rpx;
			border: 1px solid #EAEAEA;
			display: flex;
			align-items: center;
			padding-left: 30rpx;
			box-sizing: border-box;
			image{
				width: 30rpx;
				height: 30rpx;
				margin-right: 14rpx;
			}
			input{
				height: 50rpx;
				line-height: 50rpx;
				font-weight: 500;
				font-size: 24rpx;
				color: #212121;
				flex: 1;
			}
			.btn{
				width: 100rpx;
				line-height: 60rpx;
				background: linear-gradient(0deg, #000000, #3D3B38);
				box-shadow: 0px 4rpx 18rpx 0px rgba(42,41,39,0.34);
				border-radius: 60rpx;
				text-align: center;
				font-weight: 500;
				font-size: 24rpx;
				color: #FFFFFF;
			}
		}
		.b{
			flex: 1;
			text-align: center;
			image{
				width: 44rpx;
				height: 44rpx;
			}
		}
	}
	&-bd{
		padding: 0 25rpx 25rpx;
		overflow: hidden;
		.empty{
			padding: 150rpx 0;
			text-align: center;
			font-weight: 500;
			font-size: 28rpx;
			color: #222222;
			image{
				display: block;
				width: 460rpx;
				height: 400rpx;
				margin: 0 auto;
			}
		}
		.item{
			width: 100%;
			height: 200rpx;
			background: #FFFFFF;
			box-shadow: 0px 4rpx 10rpx 0px rgba(0,0,0,0.06);
			border-radius: 20rpx;
			padding: 30rpx;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-top: 20rpx;
			.pic{
				width: 140rpx;
				height: 140rpx;
				border-radius: 10rpx;
				overflow: hidden;
				margin-right: 20rpx;
				image{
					width: 100%;
					height: 100%;
				}
			}
			.info{
				flex: 1;
				.name{
					font-weight: 500;
					font-size: 32rpx;
					color: #222222;
					display: flex;
					align-items: center;
					.vip{
						width: 60rpx;
						line-height: 32rpx;
						background: url(@/static/vip-bg.png) center top no-repeat;
						background-size: contain;
						text-align: center;
						font-weight: 500;
						font-size: 20rpx;
						color: #FFFFFF;
						overflow: hidden;
						margin-left: 20rpx;
					}
				}
				.desc{
					width: 180rpx;
					line-height: 40rpx;
					background: #F2F2F2;
					border-radius: 40rpx;
					font-weight: 500;
					font-size: 24rpx;
					color: #000000;
					text-align: center;
					margin-top: 20rpx;
				}
			}
			.chat{
				width: 150rpx;
				height: 90rpx;
				background: linear-gradient(0deg, #000000, #3D3B38);
				box-shadow: 0px 4rpx 18rpx 0px rgba(42,41,39,0.34);
				border-radius: 90rpx;
				margin-left: 20rpx;
				text-align: center;
				font-weight: 500;
				font-size: 24rpx;
				color: #FFFFFF;
				image{
					width: 65rpx;
					height: 32rpx;
					display: block;
					margin: 15rpx auto 5rpx;
				}
			}
		}
	}
}
</style>
