<style>
	.userListstyle .titleh {
		width: 100%;
		height: 40px;
		background: #f2f3f1;
		padding: 0 15px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 12px;
		color: #999999;
	}
	.userListstyle .vipbtn{
		width: 150rpx;height: 50rpx;border-radius: 30rpx;
		display: flex;align-items: center;justify-content: center;color: #FFF;background: linear-gradient(270deg, #f7796b 0%, #e85c69 100%);
	}
	.userListstyle .subpicker{
		width: 100%;
		height: 45px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 15px;
		font-size: 14px;
		border-bottom: 1px solid #E2E2E2;
		
	}
</style>
<template>
	<div :style="{'background-color': '#FFF','height': '100vh','overflow': 'hidden'}" class='userListstyle'>
		<view style="display: flex; align-items: center;border-bottom: 1px solid #E2E2E2;">
			<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>
		</view>
		<view style="height: calc(100vh - 100rpx)">
			<scroll-view :scroll-y="true" :enable-back-to-top="true" :enable-flex="true" @scrolltolower="lower"
				style="height: 100%; padding-bottom: 0px;">
				<view style="width: 100%;height: 100vh;position: relative;">
					<view class="titleh">
						按如下条件帮你筛选
					</view>
					<!-- <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="subpicker">
						<text>学历</text>
						<text>{{Educationstr}}</text>
						<picker mode ="selector"  range-key='Name'  :range="education" @change="changPicker($event,1)">
							<view style="display: flex;align-items: center;">
								<text style="color: #686868;font-size: 12px; ">
									修改
								</text>
								<u-icon size='32' color='#999999' name="arrow"></u-icon>
							</view>
						</picker>
					</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="80" :liveMode="true" background-color="#DADCE6D9"
							:block-size="36" :active-color="mainColor" min="0" max="100" @rangechange="rangechange"
							:values="ages"></rangeSlider>
					</view>
					
				

					<view class="titleh">
						<text>高级筛选</text>
						<view class="vipbtn" :style="{background:mainColor}">
							vip筹建中
						</view>
					</view>
					<view style="width: 100%;padding: 10px 0;margin-bottom: 120rpx;">
						<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="80" :liveMode="true" background-color="#DADCE6D9"
								:block-size="36" :active-color="mainColor" min="0" max="0" @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="80" :liveMode="true" background-color="#DADCE6D9"
								:block-size="36" :active-color="mainColor" min="0" max="0" @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" style="margin-top: 0;">
							<rangeSlider :width="592" :height="80" :liveMode="true" background-color="#DADCE6D9"
								:block-size="36" :active-color="mainColor" min="0" max="0" @rangechange="rangechange4"
								:values="YearMoeys"></rangeSlider>
						</view>
						
						<view class="subpicker">
							<text>婚姻</text>
							<text>{{Marriagestr}}</text>
							<picker mode ="selector"  range-key='Name' :disabled="disabled"  :range="marriage" @change="changPicker($event,2)">
								<view style="display: flex;align-items: center;">
									<text style="color: #686868; font-size: 12px;">
										{{disabled== true ? '无法修改':'修改'}}
									</text>
									<u-icon size='32' color='#999999' name="arrow"></u-icon>
								</view>
							</picker>
						</view>
					
						<view class="subpicker">
							<text>房产</text>
							<text>{{HouseInfostr}}</text>
							<picker mode ="selector"  range-key='Name' :disabled="disabled"  :range="house" @change="changPicker($event,3)">
								<view style="display: flex;align-items: center;">
									<text style="color: #686868;font-size: 12px; ">
										{{disabled== true ? '无法修改':'修改'}}
									</text>
									<u-icon size='32' color='#999999' name="arrow"></u-icon>
								</view>
							</picker>
						</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"
								:disabled="true"
									:key="index" :name="item.Id" :active-color='mainColor'>
									{{item.Name}}
						
								</u-radio>
							</u-radio-group>
						</view> -->
						<view class="subpicker">
							<text>车产</text>
							<text>{{CarInfostr}}</text>
							<picker mode ="selector"  range-key='Name' :disabled="disabled"  :range="car" @change="changPicker($event,4)">
								<view style="display: flex;align-items: center;">
									<text style="color: #686868;font-size: 12px; ">
										{{disabled== true ? '无法修改':'修改'}}
									</text>
									<u-icon size='32' color='#999999' name="arrow"></u-icon>
								</view>
							</picker>
						</view>
					</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>

			</scroll-view>
		</view>
		<auth v-if="showAuth" @changeuserinfo="reloadUserinfo" @gbAuth= 'gbAuth'></auth>
	</div>
</template>

<script>
	
	import rangeSlider from "../components/range-slider.vue"
	import auth from "@/components/auth/index.vue";
	export default {
		components: {
			rangeSlider,
			auth
		},
		data() {
			return {
				showAuth:false,
				u:{},
				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,
				},
				Educationstr:'无要求',
				Marriagestr:'无要求',
				HouseInfostr:'无要求',
				CarInfostr:'无要求',
				loadText: {
					loadmore: "轻轻上拉，加载更多",
					loading: "努力加载中",
					nomore: "没有更多了",
				},
				page_count: 1,
				status: "loadmore",
				
				width: 0, //滑块的高度
				cHeight: 0,
				ages: [0, 0], //年龄
				Heights: [0, 0], //身高
				Weights: [0, 0], //体重
				YearMoeys: [0, 0], //年收入
				education: [],
				marriage: [],
				house: [],
				car: [],
				queryList: [], //获取刷选的数据
				disabled:true,//true 不是会员
			};
		},
		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;
			
			this.u = uni.getStorageSync("mall_UserInfo");
			if (!this.u) {
			  this.u = {
				nickName: "未登录",
				avatarUrl: ""
			  };
			  this.showAuth = true;
			}	else{
				this.getmethod()
			}
			
		},
		created() {
			this.mainColor = this.$uiConfig.mainColor;
			this.width = this.$utils.SystemInfo().windowWidth * 0.9;
		},
		mounted() {
			let pageTitle = '匹配要求'
			let currentPages = getCurrentPages();
			let u = "/" + currentPages[currentPages.length - 1].route;
			let pages = wx.getStorageSync("basedata") ?
				wx.getStorageSync("basedata").bar_title : [];
				pages.forEach((x) => {
					if (x.value == u) {
						pageTitle = x.new_name ? x.new_name : x.name;
					}
				});
			uni.setNavigationBarTitle({
				title: pageTitle,
			});


		},
		methods: {
			getmethod(){
				
				this.getEnumList(); //学历
				// this.getMarriage(); //婚姻
				// this.GetHouseList() //获取房屋枚举 
				// this.GetCarList() //获取车辆枚举 
			},
			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.education.map(j=>{
								if(j.Id== this.msg.EducationType){
									this.Educationstr = j.Name
								}
							})
							this.marriage.map(j=>{
								if(j.Id== this.msg.Marriage){
									this.Marriagestr = j.Name
								}
							})
							this.house.map(j=>{
								if(j.Id== this.msg.HouseInfo){
									this.HouseInfostr = j.Name
								}
							})
							this.car.map(j=>{
								if(j.Id== this.msg.CarInfo){
									this.CarInfostr = j.Name
								}
							})

							this.ages = [x.Age, x.EndAge]; //年龄
							this.Heights = [x.Height, x.EndHeight]; //身高
							this.Weights = [x.Weight, x.EndWeight]; //体重
							this.YearMoeys = [x.YearMoney, x.EndYearMoney]; //年收入
						}
					})
				}
				
			},
			init(type) {
				this.request2({
						url: '/api/AppletMiai/GetBaseInfoPageList',
						data: this.msg
					},
					res => {
						if (res.resultCode == 1) {
							this.GetBaseInfoQueryList()
							if(type==1){
								uni.showToast({
									title: "保存成功"
								})
							}else{
								uni.showToast({
									title: "重置成功"
								})
							}
							
						}
					}
				);
			},
			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.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.init(2);

			},
			determine() { //确定
				this.msg.pageIndex = 1;
				
				
				this.init(1);
				this.show = false
			},
			rangechange(e) { //年龄
				this.msg.Age = e.minValue;
				this.msg.EndAge = e.maxValue;
			},
			// TODO 4.29 暂时放在这里 没有vip功能不让选择
			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
								})
							}
						}
					}
				);
				this.getMarriage()
			},
			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
								})
							}
						}
					}
				);
				this.GetHouseList()
			},
			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
								})
							}
						}
					}
				);
				this.GetCarList()
			},
			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
								})
							}
						}
					}
				);
				this.GetBaseInfoQueryList() //获取筛选数据
			},
			changPicker(e,type){
				let key = e.detail.value
				if(type == 1){
					this.msg.EducationType =  this.education[key].Id;
					this.Educationstr =  this.education[key].Name;
				}else if(type == 2){
					this.msg.Marriage =  this.marriage[key].Id;
					this.Marriagestr =  this.marriage[key].Name;
				}else if(type == 3){
					this.msg.HouseInfo =  this.house[key].Id;
					this.HouseInfostr =  this.house[key].Name;
				}else if(type == 4){
					this.msg.CarInfo =  this.car[key].Id;
					this.CarInfostr =  this.car[key].Name;
				}
			},
			reloadUserinfo() {
			  this.u = uni.getStorageSync("mall_UserInfo");
			  // this.showAuth=false;
			  this.getmethod();
			},
			//关闭登录窗口
			gbAuth(){
				uni.navigateBack()
			},

		}
	};
</script>

<style>
	.userListstyle {
		position: relative;
		padding-bottom: 12px;
		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: fixed;
		left: 0;
		bottom: 0;
		display: flex;
		flex-direction: row;
		align-items: center;
		color: #FFFFFF;
		z-index: 9999;

	}

	.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>
