<template>
	<div :style="{'background-color': '#FFF','height': '100vh','overflow': 'hidden'}" class='userListstyle'>
		<view style="display: flex; align-items: center;">
			<view style="flex:1;overflow: hidden;">
				<u-tabs bg-color="#FFF" :is-scroll="false" name="Name" :list="typeList" :active-color="mainColor"
					:current="active" @change="changeHandler" :show-bar="true"  height="100"
					 font-size="28"></u-tabs>
			</view>
			<div style="width: 80rpx;height: 70rpx;display: flex; align-items: center;justify-content: center;" @click="show=true,Styletype = data.listStyle">
				<u-icon name="filter-o" color="#111" size="42"></u-icon>
			</div>
		</view>
		<u-empty v-if="data.list.length == 0" text="暂无内容" mode="list"></u-empty>
		
		<view style="height: calc(100vh - 100rpx)" v-if="data.list.length > 0">
			<scroll-view :scroll-y="true" :enable-back-to-top="true" :enable-flex="true" @scrolltolower="lower"
				style="height: 100%; padding-bottom: 0px;">
					<matchmaking :navs="data" ></matchmaking>
				<u-loadmore
				  :status="status"
				  :load-text="loadText"
				  :font-size="24"
				  :margin-top="20"
				  :margin-bottom="20"
				  bg-color="#FFF"
				/>
				
			</scroll-view>
		</view>
		<u-popup v-model="show"
			mode="right"
			length="90%"
			height='100%'
		>
			<view style="width: 100%;height: 100vh;position: relative;">
				<scroll-view :scroll-y="true" :enable-back-to-top="true" :enable-flex="true"
					 style="height: calc(100% - 65px)">
					<view class="popupbox_text" style="margin-top: 15px;">布局模式</view>
					<view class="popup_item">
						<u-radio-group v-model="Styletype">
							<u-radio 
								shape="circle"
								v-for="(item, index) in Stylelist" :key="index" 
								:name="item.Id"
								:disabled="item.disabled"
								:active-color='mainColor'
							>
								{{item.Name}}
							</u-radio>
						</u-radio-group>
					</view>
					<view class="popupbox_text" style="margin-top: 15px;">年龄
						<text style="margin-left: 15px;">{{msg.Age}}~{{msg.EndAge}}岁</text>
					</view>
					<!-- 区间滑块 -->
					<view class="popup_item" style="margin-top: 0;">
						<rangeSlider :width="592" :height="120" :liveMode="true" background-color="#DADCE6D9"
							:block-size="36" :active-color="mainColor" min="0" max="100" @rangechange="rangechange"
							:values="ages"></rangeSlider>
					</view>
					
					<view class="popupbox_text" style="margin-top: 0px;">身高
						<text style="margin-left: 15px;">{{msg.Height}}~{{msg.EndHeight}}cm</text>
					</view>
					<!-- 区间滑块 -->
					<view class="popup_item" style="margin-top: 0;">
						<rangeSlider :width="592" :height="120" :liveMode="true" background-color="#DADCE6D9"
							:block-size="36" :active-color="mainColor" min="0" max="230" @rangechange="rangechange2"
							:values="Heights"></rangeSlider>
					</view>
					
					<view class="popupbox_text" style="margin-top: 0px;">体重
						<text style="margin-left: 15px;">{{msg.Weight}}~{{msg.EndWeight}}kg</text>
					</view>
					<!-- 区间滑块 -->
					<view class="popup_item" style="margin-top: 0;">
						<rangeSlider :width="592" :height="120" :liveMode="true" background-color="#DADCE6D9"
							:block-size="36" :active-color="mainColor" min="0" max="200" @rangechange="rangechange3"
							:values="Weights"></rangeSlider>
					</view>
					
					<view class="popupbox_text" style="margin-top: 0px;">年收入
						<text style="margin-left: 15px;">{{msg.YearMoney}}~{{msg.EndYearMoney}}万</text>
					</view>
					<!-- 区间滑块 -->
					<view class="popup_item">
						<rangeSlider :width="592" :height="120" :liveMode="true" background-color="#DADCE6D9"
							:block-size="36" :active-color="mainColor" min="0" max="500" @rangechange="rangechange4"
							:values="YearMoeys"></rangeSlider>
					</view>
					<view class="popupbox_text" style="margin-top: 0px;">学历</view>
					<view class="popup_item" >
						<text v-if='education.length==0' style="width: 100%;display: flex;align-items: center;justify-content: center;color: #999999;">暂无数据</text>
						<u-radio-group v-model="msg.EducationType" v-if='education.length>0'>
							<u-radio 
								shape="circle"
								style='margin-bottom: 5px;'
								v-for="(item, index) in education" :key="index" 
								:name="item.Id"
								:active-color='mainColor'
							>
								{{item.Name}}
								
							</u-radio>
						</u-radio-group>
					</view>
					<view class="popupbox_text" style="margin-top: 10px;">婚姻</view>
					<view class="popup_item" >
						<text v-if='marriage.length==0' style="width: 100%;display: flex;align-items: center;justify-content: center;color: #999999;">暂无数据</text>
						
						<u-radio-group v-model="msg.Marriage" v-if='marriage.length>0'>
							<u-radio 
								shape="circle"
								style='margin-bottom: 5px;'
								v-for="(item, index) in marriage" :key="index" 
								:name="item.Id"
								:active-color='mainColor'
							>
								{{item.Name}}
								
							</u-radio>
						</u-radio-group>
					</view>
					<view class="popupbox_text" style="margin-top: 10px;">房产</view>
					<view class="popup_item" >
						<text v-if='house.length==0' style="width: 100%;display: flex;align-items: center;justify-content: center;color: #999999;">暂无数据</text>
						
						<u-radio-group v-model="msg.HouseInfo" v-if='house.length>0'>
							<u-radio 
								shape="circle"
								style='margin-bottom: 5px;'
								v-for="(item, index) in house" :key="index" 
								:name="item.Id"
								:active-color='mainColor'
							>
								{{item.Name}}
								
							</u-radio>
						</u-radio-group>
					</view>
					<view class="popupbox_text" style="margin-top: 10px;">车产</view>
					<view class="popup_item" style="margin-bottom: 10px;">
						<text v-if='car.length==0' style="width: 100%;display: flex;align-items: center;justify-content: center;color: #999999;">暂无数据</text>
						
						<u-radio-group v-model="msg.CarInfo" v-if='car.length>0'>
							<u-radio 
								shape="circle"
								style='margin-bottom: 5px;'
								v-for="(item, index) in car" :key="index" 
								:name="item.Id"
								:active-color='mainColor'
							>
								{{item.Name}}
								
							</u-radio>
						</u-radio-group>
					</view>
					
					
					
					
				</scroll-view>
				<view class="popup_b" :style="{height:cHeight+'px'}">
					<view class="popup_b_item" style="background: #FAF8F9;color: #000000;" @click="goreset()">
						<text>重置</text>
					</view>
					<view class="popup_b_item" :style="{background:mainColor }" @click="determine()">
						<text>确定</text>
					</view>
				</view>
			</view>
				
		</u-popup>
	</div>
</template>

<script>
	import matchmaking from "@/components/matchmaking/index"
	import rangeSlider from "./components/range-slider.vue"
	export default {
		components:{
			matchmaking,
			rangeSlider
		},
		data() {
			return {
				show:false,
				mainColor: '',
				active: 0,
				searchKey:"",
				typeList: [{'Name':'男神',Id:1},{'Name':'女神',Id:2}],
				Stylelist:[{Name:'列表模式',Id:-1},{Name:'瀑布流',Id:1}],
				Styletype:-1,
				msg:{
					QueryId:0,
					pageIndex:1,
					pageSize:20,
					Sex:1,
					Age:0,
					EndAge:0,
					Height:0,
					EndHeight:0,
					Weight:0,
					EndWeight:0,
					YearMoney:0,
					EndYearMoney:0,
					CarInfo:0,
					HouseInfo:0,
					EducationType:0,
					Marriage:0,
				},
				loadText: {
					loadmore: "轻轻上拉，加载更多",
					loading: "努力加载中",
					nomore: "没有更多了",
				},
				page_count:1,
				status: "loadmore",
				data:{
					listStyle:-1,
					list:[],
				},
				width:0,//滑块的高度
				cHeight:0,
				ages:[0,0],//年龄
				Heights:[0,0],//身高
				Weights:[0,0],//体重
				YearMoeys:[0,0],//年收入
				education:[],
				marriage:[],
				house:[],
				car:[],
				queryList:[],//获取刷选的数据
			};
		},	
		onLoad(options) {
			if(options && options.Sex){
				this.msg.Sex = options.Sex;
				if(this.msg.Sex==2){
						this.active =1
				}
			}
			this.cHeight = this.$uiConfig.is_bang ? 60 : 52;
			if(uni.getStorageSync('blindDate_listStyle')){//从缓存里获取图片模式
				this.data.listStyle = uni.getStorageSync('blindDate_listStyle').style;
				this.Styletype = uni.getStorageSync('blindDate_listStyle').style;
			}else{
				uni.setStorageSync("blindDate_listStyle",{style:this.data.listStyle});//吧当前时间存起来
			}
			this.GetBaseInfoQueryList()//获取筛选数据
			this.getEnumList();//学历
			this.getMarriage();//婚姻
			this.GetHouseList()//获取房屋枚举 
			this.GetCarList()//获取车辆枚举 
		},
		created() {
			this.mainColor = this.$uiConfig.mainColor;
			this.width = this.$utils.SystemInfo().windowWidth*0.9;
		},
		mounted() {
			uni.setNavigationBarTitle({
				title: '用户列表',
			});
			
		},
		methods: {
			GetBaseInfoQueryList(){
				this.request2(
					{
						url: '/api/AppletMiai/GetBaseInfoQueryList',
						data: {}
					},
					res => {
						if(res.resultCode==1){
							this.queryList = res.data;
							this.getscreen(this.queryList)
						}
					}
				);
			},
			getscreen(){
				if(this.queryList.length>0){
					this.queryList.map(x=>{
						if(x.Sex == this.msg.Sex){
							this.msg.QueryId = x.Id;
							this.msg.Age = x.Age;
							this.msg.EndAge = x.EndAge;
							this.msg.Height = x.Height;
							this.msg.EndHeight = x.EndHeight;
							this.msg.Weight = x.Weight;
							this.msg.EndWeight = x.EndWeight;
							this.msg.YearMoney = x.YearMoney;
							this.msg.EndYearMoney = x.EndYearMoney;
							this.msg.CarInfo = x.CarInfo;
							this.msg.HouseInfo = x.HouseInfo;
							this.msg.EducationType = x.EducationType;
							this.msg.Marriage = x.Marriage;
							
							this.ages=[x.Age,x.EndAge];//年龄
							this.Heights=[x.Height,x.EndHeight];//身高
							this.Weights=[x.Weight,x.EndWeight];//体重
							this.YearMoeys=[x.YearMoney,x.EndYearMoney];//年收入
						}
					})
				}
				this.init();//获取了筛选条件再调用接口
			},
			init() {
			  this.request2(
			  	{
			  		url: '/api/AppletMiai/GetBaseInfoPageList',
			  		data: this.msg
			  	},
			  	res => {
			  		if(res.resultCode==1){
						this.data.list = this.data.list.concat(res.data.pageData);
						 this.page_count = res.data.pageCount;
						 if (this.page_count == 1) {
						   this.status = "nomore";
					}
			  		}
			  	}
			  );
			},
			lower(e) {

			  if (this.msg.pageIndex < this.page_count) {
			    this.msg.pageIndex++;
				this.status = "loading";
			    this.init();
			  } else {
			    
				this.status = "nomore";
			  }
			},
			changeHandler(i) {
				this.active = i;
				this.msg.Sex = this.typeList[i].Id;
				this.msg.pageIndex = 1;
				this.data.list= [];
				this.getscreen(this.queryList)
			},
			goreset(){//重置
				let data = {
					QueryId:this.msg.QueryId,
					pageIndex:1,
					pageSize:20,
					Sex:this.msg.Sex,
					Age:0,
					EndAge:0,
					Height:0,
					EndHeight:0,
					Weight:0,
					EndWeight:0,
					YearMoney:0,
					EndYearMoney:0,
					CarInfo:0,
					HouseInfo:0,
					EducationType:0,
					Marriage:0,
				}
				this.ages=[0,0];//年龄
				this.Heights=[0,0];//身高
				this.Weights=[0,0];//体重
				this.YearMoeys=[0,0];//年收入
				this.msg = data;
				this.data.list= [];
				this.init();
				this.show = false
			},
			determine(){//确定
				this.msg.pageIndex = 1;
				this.data.list= [];
				this.data.listStyle = this.Styletype
				uni.setStorageSync("blindDate_listStyle",{style:this.data.listStyle});//吧当前时间存起来
				this.init();
				this.show = false
			},
			rangechange(e){//年龄
				this.msg.Age = e.minValue;
				this.msg.EndAge = e.maxValue;
			},
			rangechange2(e){//体重
				this.msg.Height = e.minValue;
				this.msg.EndHeight = e.maxValue;
			},
			rangechange3(e){//身高
				this.msg.Weight = e.minValue;
				this.msg.EndWeight = e.maxValue;
			},
			rangechange4(e){//年收入
				this.msg.YearMoney = e.minValue;
				this.msg.EndYearMoney = e.maxValue;
			},
			getEnumList(){//学历
				this.request2(
					{
						url: '/api/AppletMiai/GetEducationTypeEnumList',
						data: {}
					},
					res => {
						if(res.resultCode==1){
							if(res.data.length > 0){
								this.education = res.data
								this.education.unshift({Name:'不限','Id':0})
							}
						}
					}
				);
			},
			getMarriage(){
				this.request2(
					{
						url: '/api/AppletMiai/GetMarriageEnumList',
						data: {}
					},
					res => {
						if(res.resultCode==1){
							if(res.data.length > 0){
								this.marriage = res.data
								this.marriage.unshift({Name:'不限','Id':0})
							}
						}
					}
				);
			},
			GetHouseList(){
				this.request2(
					{
						url: '/api/AppletMiai/GetHouseInfoEnumList',
						data: {}
					},
					res => {
						if(res.resultCode==1){
							if(res.data.length > 0){
								this.house = res.data
								this.house.unshift({Name:'不限','Id':0})
							}
						}
					}
				);
			},
			GetCarList(){
				this.request2(
					{
						url: '/api/AppletMiai/GetCarInfoEnumList',
						data: {}
					},
					res => {
						if(res.resultCode==1){
							if(res.data.length > 0){
								this.car = res.data
								this.car.unshift({Name:'不限','Id':0})
							}
						}
					}
				);
			},
			
		}
	};
</script>

<style>
	.userListstyle {
		position: relative;
		padding-bottom: 12px;
		border: 1rpx solid transparent;
		border-radius: 10rpx;
		overflow: hidden;
		box-shadow: 0 4px 10px 1px #e6e5e5;
		background-color: #fff;
	}
	
	.userListstyle .tips {
		width: 64rpx;
		height: 64rpx;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 4;
	}
	
	.userListstyle .img-box {
		width: 100%;
		height: 0;
		padding-top: 100%;
		position: relative;
		overflow: hidden;
	}
	
	.userListstyle .img-box .img-show {
		position: absolute;
		left: 0;
		top: 0;
		bottom: 0;
		right: 0;
		width: 100%;
		height: 338rpx;
		overflow: hidden;
	}
	
	.userListstyle .guding {
		position: relative;
	}
	
	.userListstyle .guding .img-box {
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		top: 0;
	}
	
	.userListstyle .good-info {
		padding: 15rpx;
		height: 112rpx;
	}
	
	.userListstyle .good-info .good-name {
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
		margin-bottom: 8px;
		color: #111111;
		font-size: 26rpx;
		font-weight: bold;
	}
	
	.userListstyle .good-info .good-price-info {
		display: flex;
		color: #999999;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
		font-size: 22rpx;
	}
	
	.userListstyle .good-info .good-price-info .price {
		color: #999999;
		/* flex: 1; */
		font-size: 11px;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
	}
	
	.userListstyle .good-info .good-price-info .buy {
		width: 24px;
		text-align: right;
	}
	.userListstyle .popupbox{
			width: 100%;
			height: 100%;
			display: flex;
			flex-direction: column;
			position: relative;
			overflow-y: auto;
			
		}
		.userListstyle .popupbox_text{
			font-size: 12px;
			color: #111111;
			margin-left: 5%;
		}
		.userListstyle .popup_item{
			width: 90%;
			/* height: 35px; */
			margin-left: 5%;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-between;
			padding: 5px;
			margin-top: 10px;
			/* background: #F1F1F1; */
		}
		.userListstyle .inputM{
			width: 100%;
		}
		.userListstyle .popup_b{
			width: 100%;
			position: absolute;
			left: 0;
			bottom: 0;
			display: flex;
			flex-direction: row;
			align-items: center;
			color: #FFFFFF;
			
		}
		.userListstyle .popup_b_item{
			width: 50%;
			height: 100%;
			display: flex;
			flex-direction: row;
			align-items: flex-start;
			justify-content: center;
			font-size: 14px;
			padding-top: 15px;
		}
</style>
