<template>
	<view class="search">
		<view class="container">
			<view class="search-wrapper">
				<u-search :showAction="true" actionText="搜索" :animation="true" v-model="where.keywords"
					@search="onSearch"></u-search>
			</view>
			<view class="history">
				<view class="his-head">
					<view class="line"></view>
					<text class="title">基本条件</text>
				</view>
				<u-cell-group :border="false">
					<u-cell title="年龄" isLink :value="where.ageMate" @click="showAgeMate = true"></u-cell>
					<u-cell title="注册地址" isLink :value="regionMate" @click="onArea"></u-cell>
					<u-cell title="身高" isLink :value="where.heightMate" @click="showHeightMate = true"></u-cell>
					<u-cell title="体型" isLink :value="where.shapeMate" @click="showShapeMate = true"></u-cell>
					<u-cell title="学历" isLink :value="where.educationMate" @click="showEducationMate = true"></u-cell>
					<u-cell title="月收入" isLink :value="where.monthlyPayMate"
						@click="showMonthlyPayMate = true"></u-cell>
				</u-cell-group>
			</view>
			<view class="history">
				<view class="his-head">
					<view class="line"></view>
					<text class="title">高级搜索</text>
				</view>
				<u-cell-group :border="false">
					<u-cell title="职员" isLink :value="where.vocationMate" @click="showVocationMate = true"></u-cell>
					<u-cell title="是否有房" isLink :value="where.hasHouseMate" @click="showHasHouseMate = true"></u-cell>
					<u-cell title="是否有车" isLink :value="where.hasCarMate" @click="showHasCarMate = true"></u-cell>
					<u-cell title="婚姻状况" isLink :value="where.maritalStatusMate"
						@click="showMaritalStatusMate = true"></u-cell>
					<u-cell title="有无小孩" isLink :value="where.hasChildrenMate"
						@click="showHasChildrenMate = true"></u-cell>
					<u-cell title="星座" isLink :value="where.constellation" @click="showConstellation = true"></u-cell>
				</u-cell-group>
			</view>

			<u-picker :show="showAgeMate" :columns="dict.ageMate" @confirm="confirmAgeMate"
				@cancel="showAgeMate = false"></u-picker>
			<u-picker :show="showRegionMate" :columns="regionsData" keyName="label" @confirm="confirmRegionMate"
				@cancel="showRegionMate = false"></u-picker>
			<u-picker :show="showHeightMate" :columns="dict.heightMate" @confirm="confirmHeightMate"
				@cancel="showHeightMate = false"></u-picker>
			<u-picker :show="showShapeMate" :columns="dict.shapeMate" @confirm="confirmShapeMate"
				@cancel="showShapeMate = false"></u-picker>
			<u-picker :show="showEducationMate" :columns="dict.educationMate" @confirm="confirmEducationMate"
				@cancel="showEducationMate = false"></u-picker>
			<u-picker :show="showMonthlyPayMate" :columns="dict.monthlyPayMate" @confirm="confirmMonthlyPayMate"
				@cancel="showMonthlyPayMate = false"></u-picker>

			<u-picker :show="showVocationMate" :columns="dict.positionMate" @confirm="confirmVocationMate"
				@cancel="showVocationMate = false"></u-picker>
			<u-picker :show="showHasHouseMate" :columns="dict.hasHouseMate" @confirm="confirmHasHouseMate"
				@cancel="showHasHouseMate = false"></u-picker>
			<u-picker :show="showHasCarMate" :columns="dict.hasCarMate" @confirm="confirmHasCarMate"
				@cancel="showHasCarMate = false"></u-picker>
			<u-picker :show="showMaritalStatusMate" :columns="dict.maritalStatusMate"
				@confirm="confirmMaritalStatusMate" @cancel="showMaritalStatusMate = false"></u-picker>
			<u-picker :show="showHasChildrenMate" :columns="dict.hasChildrenMate" @confirm="confirmHasChildrenMate"
				@cancel="showHasChildrenMate = false"></u-picker>
			<u-picker :show="showConstellation" :columns="dict.constellation" @confirm="confirmConstellation"
				@cancel="showConstellation = false"></u-picker>
			<!-- 操作按钮 -->
			<view class="footer">
				<view class="btn-wrapper">
					<u-button text="开始搜索" color="linear-gradient(to bottom, #010002, #681752)" shape="circle"
						@click="onSearch"></u-button>
				</view>
			</view>
		</view>

		<!-- 地址选择器 -->
		<liu-customize-sel ref="area" @change="chooseSuccess"> </liu-customize-sel>
	</view>
</template>

<script>
	import * as UserProfileApi from '@/api/love-user-profile.js'
	import * as DictApi from '@/api/dict.js'

	export default {
		data() {
			return {
				list: [],
				dict: [],
				page: 0,
				regionMate: '不限',
				where: {
					ageMate: '不限',
					regionMate: '不限',
					heightMate: '不限',
					shapeMate: '不限',
					educationMate: '不限',
					monthlyPayMate: '不限',
					vocationMate: '不限',
					hasHouseMate: '不限',
					hasCarMate: '不限',
					maritalStatusMate: '不限',
					hasChildrenMate: '不限',
					constellation: '不限',
				},
				showAgeMate: false,
				showRegionMate: false,
				showHeightMate: false,
				showShapeMate: false,
				showEducationMate: false,
				showMonthlyPayMate: false,
				showVocationMate: false,
				showHasHouseMate: false,
				showHasCarMate: false,
				showMaritalStatusMate: false,
				showHasChildrenMate: false,
				showConstellation: false,
				regionsData: [
					['广西壮族自治区'],
					['南宁市', '北海市', '贵港市']
				],
				// 控制onShow事件是否刷新订单列表
				canReset: false,
				disabled: false,
			}
		},

		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad(options) {
			this.getDict()
			// 获取历史搜索
			// this.historySearch = this.getHistorySearch()
		},

		// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
		onReady() {
			this.$refs.uForm.setRules(this.rules)
			// 微信小程序需要用此写法
			this.$refs.datetimePicker.setFormatter(this.formatter)
		},

		methods: {
			getDict() {
				DictApi.listDictionary().then(res => {
					this.dict = res.data;
					this.dict.ageMate[0].unshift('不限')
					this.dict.heightMate[0].unshift('不限')
					this.dict.shapeMate[0].unshift('不限')
					this.dict.positionMate[0].unshift('不限')
					this.dict.monthlyPayMate[0].unshift('不限')
					this.dict.hasCarMate[0].unshift('不限')
					this.dict.hasChildrenMate[0].unshift('不限')
					this.dict.hasHouseMate[0].unshift('不限')
					this.dict.educationMate[0].unshift('不限')
					this.dict.maritalStatusMate[0].unshift('不限')
					this.dict.constellation[0].unshift('不限')
				})
			},
			/**
			 * 获取历史搜索
			 */
			getHistorySearch() {
				return uni.getStorageSync(HISTORY_SEARCH) || []
			},

			onSearch() {
				if (this.where.ageMate == '不限') {
					this.where.ageMate = undefined
				}
				if (this.where.regionMate == '不限') {
					this.where.regionMate = undefined
				}
				if (this.where.heightMate == '不限') {
					this.where.heightMate = undefined
				}
				if (this.where.shapeMate == '不限') {
					this.where.shapeMate = undefined
				}
				if (this.where.educationMate == '不限') {
					this.where.educationMate = undefined
				}
				if (this.where.monthlyPayMate == '不限') {
					this.where.monthlyPayMate = undefined
				}
				if (this.where.hasHouseMate == '不限') {
					this.where.hasHouseMate = undefined
				}
				if (this.where.vocationMate == '不限') {
					this.where.vocationMate = undefined
				}
				if (this.where.constellation == '不限') {
					this.where.constellation = undefined
				}
				if (this.where.hasChildrenMate == '不限') {
					this.where.hasChildrenMate = undefined
				}
				if (this.where.maritalStatusMate == '不限') {
					this.where.maritalStatusMate = undefined
				}
				if (this.where.hasCarMate == '不限') {
					this.where.hasCarMate = undefined
				}
				this.$push('/sub_pages/member/member', this.where)
			},

			onArea() {
				this.$refs.area.open()
			},
			//地址选择成功
			chooseSuccess(e) {
				const data = e.value
				this.regionMate = `${data[0].label} ${data[1].label} ${data[2].label}`
				this.where.cityMate = data[1].label
			},

			/**
			 * 记录历史搜索
			 */
			setHistory(searchValue) {
				const data = this.getHistorySearch()
				const index = data.indexOf(searchValue)
				index > -1 && data.splice(index, 1)
				data.unshift(searchValue)
				this.historySearch = data
				this.onUpdateStorage()
			},

			/**
			 * 清空最近搜索记录
			 */
			clearSearch() {
				this.historySearch = []
				this.onUpdateStorage()
			},

			/**
			 * 更新历史搜索缓存
			 * @param {Object} data
			 */
			onUpdateStorage(data) {
				uni.setStorageSync(HISTORY_SEARCH, this.historySearch)
			},
			// 选择年龄
			confirmAgeMate(e) {
				this.where.ageMate = e.value[0]
				this.showAgeMate = false
			},
			confirmRegionMate(e) {
				this.where.regionMate = e.value[0] + ' ' + e.value[1]
				this.showRegionMate = false
			},
			confirmHeightMate(e) {
				this.where.heightMate = e.value[0]
				this.showHeightMate = false
			},
			confirmShapeMate(e) {
				this.where.shapeMate = e.value[0]
				this.showShapeMate = false
			},
			confirmEducationMate(e) {
				this.where.educationMate = e.value[0]
				this.showEducationMate = false
			},
			confirmMonthlyPayMate(e) {
				this.where.monthlyPayMate = e.value[0]
				this.showMonthlyPayMate = false
			},
			confirmVocationMate(e) {
				this.where.vocationMate = e.value[0]
				this.showVocationMate = false
			},
			confirmHasHouseMate(e) {
				this.where.hasHouseMate = e.value[0]
				this.showHasHouseMate = false
			},
			confirmMaritalStatusMate(e) {
				this.where.maritalStatusMate = e.value[0]
				this.showMaritalStatusMate = false
			},
			confirmHasCarMate(e) {
				this.where.hasCarMate = e.value[0]
				this.showHasCarMate = false
			},
			confirmHasChildrenMate(e) {
				this.where.hasChildrenMate = e.value[0]
				this.showHasChildrenMate = false
			},
			confirmConstellation(e) {
				this.where.constellation = e.value[0]
				this.showConstellation = false
			},

			/**
			 * 跳转到最近搜索
			 */
			handleQuick(search) {
				this.$navTo('pages/goods/list', {
					search
				})
			}

		}
	}
</script>

<style lang="scss" scoped>
	page {
		background: #f7f7f7;
	}

	.container {
		// padding: 40rpx;
		width: 700rpx;
		margin: 40rpx auto;
		height: 90vh;
	}

	.search-wrapper {
		display: flex;
		height: 64rpx;
	}

	.base {
		margin-top: 40rpx;
		background-color: #ffffff;
	}

	.senior {
		margin-top: 40rpx;
		background-color: #ffffff;
	}

	// 搜索输入框
	.search-input {
		width: 80%;
		background: #fff;
		height: 72rpx;
		line-height: 72rpx;
		border-radius: 10rpx 0 0 10rpx;
		box-sizing: border-box;
		overflow: hidden;

		.search-input-wrapper {
			display: flex;

			.left {
				display: flex;
				width: 60rpx;
				justify-content: center;
				align-items: center;

				.search-icon {
					display: block;
					color: #b4b4b4;
					font-size: 28rpx;
				}

			}

			.right {
				flex: 1;

				input {
					font-size: 28rpx;
					height: 72rpx;
					line-height: 72rpx;
					display: flex;
					align-items: center;

					.input-placeholder {
						color: #aba9a9;
					}
				}

			}
		}
	}

	// 搜索按钮
	.search-button {
		width: 20%;
		box-sizing: border-box;

		.button {
			height: 64rpx;
			font-size: 28rpx;
			border-radius: 0 10rpx 10rpx 0;
			background: $main-bg;
			color: $main-text;
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}


	// 最近搜索
	.history {

		.his-head {
			display: flex;
			justify-content: flex-start;
			align-items: center;
			font-size: 30rpx;
			padding: 50rpx 0 20rpx 0;
			color: #681752;

			.line {
				background-color: #681752;
				width: 8rpx;
				height: 30rpx;
				margin-right: 12rpx;
			}

			.icon {
				float: right;
			}

		}

		.his-list {
			padding: 20rpx 0;
			overflow: hidden;

			.his-item {
				width: 33.3%;
				float: left;
				padding: 10rpx;
				box-sizing: border-box;

				.history-button {
					text-align: center;
					padding: 14rpx;
					line-height: 30rpx;
					border-radius: 100rpx;
					background: #fff;
					font-size: 26rpx;
					border: 1rpx solid #efefef;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
				}

			}

		}
	}

	/* 底部操作栏 */

	.footer {
		margin-top: 50rpx;
		padding-bottom: 50rpx;

		.btn-wrapper {
			width: 360rpx;
			margin: auto;
			// display: flex;
			// align-items: center;
			padding: 0 20rpx;
		}

		.btn-item {
			flex: 1;
			font-size: 28rpx;
			height: 86rpx;
			color: #fff;
			border-radius: 50rpx;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.btn-item-wechat {
			background: #0ba90b;
			margin-bottom: 26rpx;
		}

		.btn-item-main {
			background: linear-gradient(to right, $main-bg, $main-bg2);
			color: $main-text;

			// 禁用按钮
			&.disabled {
				opacity: 0.6;
			}
		}

	}
</style>
