<template>
	<su-popup
		:show="modal.search"
		backgroundColor="#fff"
		round="5"
		:showClose="false"
		:isMaskClick="true"
		@close="closeModal"
	  >
		<view class="s-form">
			<view class="s-title">筛选</view>
			<view class="s-box">
				<view class="s-label">年龄</view>
				<view class="age-box">
					<view class="s-tag" @click="ageChange(aindex)" :class="ageIndex == aindex ? 'active' : ''" v-for="(age, aindex) in ageList" :key="aindex">{{age.text}}</view>
				</view>
			</view>
			<view class="s-box">
				<view class="s-label">性别</view>
				<view class="age-box">
					<view class="s-tag" @click="sexChange(index)" :class="sexIndex == index ? 'active' : ''" v-for="(sex, index) in sexList" :key="index">{{sex.text}}</view>
				</view>
			</view>
			<view class="s-box">
				<view class="s-label">是否同城（会员特权）</view>
				<view class="age-box">
					<view class="s-tag" @click="cityChange(cindex)" :class="cityIndex == cindex ? 'active' : ''" v-for="(city, cindex) in cityList" :key="cindex">{{city.text}}</view>
				</view>
			</view>
			<view class="s-box">
				<view class="s-label">城市（会员特权）</view>
				<view class="age-box">
					<view class="s-tag" @click="query.city = ''">全部</view>
					<view class="s-tag" @click="cityShow = true" v-if="query.city">{{query.city}}</view>
					<view class="s-tag" @click="cityShow = true" v-else>切换城市</view>
				</view>
			</view>
			<!-- <view class="s-box">
				<view class="s-label">距离</view>
				<view class="age-box">
					<view class="s-tag" @click="miChange(mindex)" :class="miIndex == mindex ? 'active' : ''" v-for="(mi, mindex) in miList" :key="mindex">{{mi.text}}</view>
				</view>
			</view> -->
			<view class="btn-box" :class="(ageIndex < 0 && sexIndex < 0 && miIndex < 0) ? 'btn-disabled' : ''" @click="ok">确定</view>
		</view>
	</su-popup>
	
	<su-region-picker :show="cityShow" @cancel="cityShow = false" @confirm="cityOk" />
</template>

<script>
	import sheep from '@/sheep';
	import $store from '@/sheep/store';
	export default {
		emits: ['query'],
		components: {
			
		},
		data() {
			return {
				min: 18,
				max: 18,
				ageIndex: 0,
				sexIndex: 0,
				cityIndex: 0,
				miIndex: -1,
				ageList: [
					{
						text: '全部',
						min: 0,
						max: 100,
					},
					{
						text: '18~23',
						min: 18,
						max: 23,
					},
					{
						text: '23~28',
						min: 23,
						max: 28,
					},
					{
						text: '28~33',
						min: 28,
						max: 33,
					},
					{
						text: '33~38',
						min: 33,
						max: 38,
					},
					{
						text: '38~43',
						min: 38,
						max: 43,
					},
					{
						text: '43~48',
						min: 43,
						max: 48,
					},
					{
						text: '48~53',
						min: 48,
						max: 53,
					},
				],
				sexList: [
					{
						text: '全部',
						value: '',
					},
					{
						text: '男',
						value: 2,
					},
					{
						text: '女',
						value: 1,
					},
				],
				cityList: [
					{
						text: '否',
						value: '1',
					},
					{
						text: '是',
						value: '0',
					},
				],
				miList: [
					{
						text: '5KM',
						value: 5000,
					},
					{
						text: '10KM',
						value: 10000,
					},
					{
						text: '15KM',
						value: 15000,
					},
					{
						text: '20KM',
						value: 20000,
					},
					{
						text: '25KM',
						value: 25000,
					},
					{
						text: '30KM',
						value: 30000,
					},
					{
						text: '35KM',
						value: 35000,
					},
					{
						text: '40KM',
						value: 40000,
					},
				],
				search: false,
				
				cityShow: false,
				
				query: {
					maxAge: 35,
					minAge: 18,
					sex: '',
					isCity: 1,
					city: '',
				},
			}
		},
		computed: {
			modal() {
				return sheep.$store('modal');
			},
			userInfo: {
			    get() {
			      return sheep.$store('user').userInfo;
			    },
			},
		},
		methods: {
			closeModal() {
				$store('modal').$patch((state) => {
					state.search = false;
				});
			},
			ageChange(i) {
				this.ageIndex = i;
			},
			sexChange(i) {
				this.sexIndex = i;
			},
			cityChange(i) {
				this.cityIndex = i;
			},
			miChange(i) {
				this.miIndex = i;
			},
			ok() {
				if(this.ageIndex < 0 && this.sexIndex < 0 && this.miIndex < 0){
					return;
				}
				if(this.ageIndex > -1){
					this.query.maxAge = this.ageList[this.ageIndex].max;
					this.query.minAge = this.ageList[this.ageIndex].min;
				}
				if(this.sexIndex > -1){
					this.query.sex = this.sexList[this.sexIndex].value;
				}
				if(this.cityIndex > -1){
					this.query.isCity = this.cityList[this.cityIndex].value;
				}
				this.$emit('query', this.query);
				
				this.closeModal();
			},
			handerChooseLocation () {
			  uni.chooseLocation({
			    success: (res) => {
			  	  this.updateLocation(res.latitude, res.longitude);
			    },
			    fail: function (err) {
			        console.log('取消按钮', err)
			    }
			  });
			},
			doCity() {
				this.$u.route({
					url: '/pages/index/user/city',
				});
			},
			updateLocation(lat,lng) {
				this.$u.put('/system/user/profile',{
					lat: lat,
					lon: lng,
				}).then(res => {
					this.doCity();
				})
			},
			more() {
				this.$u.route({
					url: 'pages/index/user/menu',
				});
			},
			open() {
				this.search = true;
			},
			cancel() {
				this.search = false;
			},
			minEnd() {
				if(this.max < this.min){
					this.max = this.min;
				}
			},
			maxEnd() {
				if(this.max < this.min){
					this.min = this.max;
				}
			},
			cityOk(e) {
				this.query.city = e.city_name;
				this.cityShow = false;
			},
		}
	}
</script>

<style lang="scss" scoped>
	.s-form {
		padding: 20px;
	}
	.s-title {
		font-size: 38rpx;
		display: flex;
		align-items: center;
		font-weight: bold;
		justify-content: center;
		margin-bottom: 15px;
	}
	.s-label {
		font-size: 30rpx;
		margin-top: 10px;
		margin-bottom: 10px;
		color: black;
	}
	.s-age {
		display: flex;
		align-items: center;
		margin: 30px 0;
	}
	.s-slider {
		flex: 1;
	}
	.btn-box {
		background-color: #283242;
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 10px;
		border-radius: 20px;
		font-size: 30rpx;
		color: #fff;
		margin-top: 20px;
	}
	.sex-btn {
		background-color: #2979ff;
		border-radius: 20px;
		padding: 3px 10px;
		color: #fff;
		display: flex;
		justify-content: center;
		margin-left: 10px;
	}
	.more {
		margin-bottom: 15px;
		background-color: #19be6b;
	}
	.s-box {
		display: flex;
		flex-direction: column;
	}
	.age-box {
		display: flex;
		flex-wrap: wrap;
	}
	.s-tag {
		border: 1px solid #ddd;
		border-radius: 40px;
		display: flex;
		font-size: 24rpx;
		align-items: center;
		justify-content: center;
		margin-right: 10px;
		height: 25px;
		width: 60px;
		margin-bottom: 15px;
	}
	.active {
		background-color: #283242;
		color: #fff;
		border: 1px solid #283242;
	}
	.btn-disabled {
		background-color: #ddd;
	}
</style>
