<template>
	<view>
		<u-navbar back-text="零工驿站" back-icon-size="0" :customBack="customBack" back-icon-color="#ffffff"
			:background="{backgroundColor: '#2795FD',}" :back-text-style="{color: '#ffffff'}"></u-navbar>

		<!-- 搜索框 -->
		<view class="search">
			<view class="search-box">
				<view class="option">

					<nxsearch :selectList="selectList" button="inside" @search="doSearch" @confirm="doSearc"
						:setIsFocus="false" @focus="gotoUrl('pages/packages/search/search')"
						v-model="searchQuery.keyword" placeholder="输入关键字找工作" />
				</view>
			</view>
		</view>
		<!-- 搜索结果 -->
		<view class="result">
			<view class="tabs">
				<view class="left">
					<u-tabs bg-color="#F0F0F2" :list="tabList" :is-scroll="false" :current="current"
						@change="change"></u-tabs>
				</view>
				<view class="screen" @click="popupShow = true">
					<view class="icon">
						<img src="@/assets/img/riLine-filter-line@1x.png" alt="">
					</view>
					<view>筛选</view>
				</view>
			</view>
			<view class="result-item "   v-for="(item,i) in tabList[current].list" :key="i"
			  @click="gotoUrl('pages/packages/choreInformation/jobSearchDetails?id='+item.id)" >
				<!-- 照片 -->
				<view class="photo">
					<u-avatar :src="item.photo"></u-avatar>
					
				</view>
				<view class="content">
					<!--  职位薪水 -->
					<view class="top">
						<view class="position">
							{{item.intendedIndustriesN}}
						</view>
						<view class="salary">
							{{item.hopeSalary}}元/天
						</view>
					</view>
					<view class="issuer">
						{{item.personName}}
					</view>
					<view class="bottom">
						<view class="tags">
							<view class="tag-item">
								{{item.gender==1?'男':'女'}}
							</view>
							<view class="tag-item">
								{{item.age}}岁
							</view>
							<view class="tag-item" v-if="item.educationN" >
								{{item.educationN}}
							</view>
							<view class="tag-item" v-if="item.workExperienceN">
								{{item.workExperienceN}}
							</view>
						</view>

						<view class="date">
							{{getTime(item)}}
						</view>
					</view>
				</view>
				
			</view>
			<u-divider  style="background: #F0F0F2;" bgNoneColor="#F0F0F2"
			 v-if="tabList[current].recordsTotal==tabList[current].list.length"
					 :isnone="tabList[current].recordsTotal==0" nonetext="没有找到相关内容" 
					border-color="#CFD2D5">已经到底了</u-divider>
		</view>
		<!-- 筛选框 -->
		<u-popup v-model="popupShow" @close="close"  @open="popupShowOpen" mode="bottom" border-radius="20" :closeable="true">
			<view class="popup-content">
				<view class="headline">
					筛选
				</view>
				<!-- 薪资待遇 -->
				<view class="salary-package">
					<view class="title">
						薪资待遇
					</view>
					<!-- 选项 -->
					<view class="options">
						<view :class="{item,checked:saralyChecked==index}" v-for="(item,index) in salaryList"
							:key="index" @click="changeSaralyChecked(index)">
							{{item.name}}
						</view>
					</view>
				</view>
				<!-- 工作经验 -->
				<view class="work-experience">
					<view class="title">
						工作经验
					</view>
					<!-- 选项 -->
					<view class="options">
						<view :class="{item,checked:workChecked==index}" v-for="(item,index) in workList" :key="index"
							@click="changeWorkChecked(index)">
							{{item.name}}
						</view>
					</view>
				</view>
				<view class="button">
					<button class="reset" @click="reset()">重置</button>
					<button class="confirm" @click="queryBtn()" >确认</button>
				</view>
			</view>
		</u-popup>

		<tabbar :current="3"></tabbar>
	</view>
</template>

<script>
	import * as API from '@/apis/pagejs/tab.js'
	import tabbar from "@/components/Tabbar.vue"
	import * as API_weixin from '@/apis/weixin.js'
	
	import nxsearch from "@/components/nx-search.vue"
	export default {
		components: {
			nxsearch,
			tabbar
		},
		data() {
			return {
				keyword: '',
				popupShow: false,
				saralyChecked: -1,
				workChecked: -1,
				searchQuery: {
					keyword: '',
					selectIndex: 0
				},

				salaryList: [{
						name: '100元/天以下',
						//min:0,
						max:100
					},
					{
						name: '100-150元/天',
						min:100,
						max:150
					}, {
						name: '150-200元/天',
						min:150,
						max:200
					}, {
						name: '200-300元/天',
						
						min:200,
						max:300
					}, {
						name: '300-400元/天',
						
						min:300,
						max:400
					}, {
						name: '400-500元/天',
						min:400,
						max:500
					},
					{
						name: '500元/天以上',
						min:500,
					
					}
				],

				workList: [

				],
				
				selectList: [{
						id: 1,
						name: '找零工'
					},
				],
				tabList: [{
					name: '最新',
					pageIndex: 1,
					pageSize: 20,
					statusType:"1",
					list:[],
					recordsTotal:0
				}, {
					name: '最热',
					pageIndex: 1,
					pageSize: 20,
					statusType:"2",
					list:[],
					recordsTotal:0
				}],

				current: 0,
				queryForm: {
					status: 1
				}

			}
		},
		onLoad(op) {
			
			this.findRecruitSearch();
		
		},
		onReachBottom() {
			var obj = this.tabList[this.current]
			if (obj.list.length < obj.recordsTotal) {
				this.myLoadmore();
			}
		},
		methods: {
			
			queryBtn(){
				this.popupShow=false;
				this.current = 0;
				 this.tabList[this.current].list=[]
				
				this.tabList[this.current].pageIndex = 1;
				
				// this.saralyChecked = -1;
				// this.workChecked = -1;
				
				// this.queryForm.salaryStart=""
				// this.queryForm.salaryEnd=""
				// this.queryForm.workExp=""
				
				if(this.saralyChecked!=-1){
					this.queryForm.salaryStart=this.salaryList[this.saralyChecked].min
					this.queryForm.salaryEnd=this.salaryList[this.saralyChecked].max
					
				} 
				if(this.workChecked!=-1){
					this.queryForm.workExp=this.workList[this.workChecked].value
				} 
				this.findRecruitSearch()
			},
			popupShowOpen(){
				if(this.workList.length==0){
					uni.showLoading({
						title: "加载中",
						mask: true,
					})
					API_weixin.findListByCatalogName({
						name:'工作经验',
						
					}).then((res) => {
						uni.hideLoading();
						
						this.workList=res.data.dictionaryList
						
					}).catch(error => {
					
						uni.showToast({icon: 'none',
							title: error
						})
						//this.getPhone()
						
					})
				}
			},
			myLoadmore() {
				this.tabList[this.current].pageIndex += 1;
				this.findRecruitSearch();
			},
			findRecruitSearch(){
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				var list = this.tabList[this.current].list
				var obj = this.tabList[this.current]
				var listForm = {
					...obj,
					...this.queryForm
					
				}
				delete listForm.list
							
				API.findRecruitSearch(listForm).then((res) => {
							
					if (listForm.pageIndex == 1) {
						list = res.data.data;
					} else {
						list = [
							...list,
							...res.data.data
						];
					}
							
					this.tabList[this.current].list = list
							
					this.tabList[this.current].recordsTotal = res.data.recordsTotal;
					uni.hideLoading();
				}).catch(error => {
					uni.showToast({icon: 'none',
						title: error,
						icon: "none"
					})
				})
			},
			customBack() {

			},
			// 执行搜索
			doSearch(searchQuery) {
				//.log('searchQuery', searchQuery);
			},
			change(index) {
				this.current = index;
				var list = this.tabList[this.current].list
				if (list.length == 0) {
					this.findRecruitSearch();
				}
			},
			changeSaralyChecked(index) {
				this.saralyChecked = index;
			},
			changeWorkChecked(index) {
				this.workChecked = index;
			},
			close(){},
			reset() {

				this.saralyChecked = -1;
				this.workChecked = -1;
				this.queryForm.salaryStart=""
				this.queryForm.salaryEnd=""
				this.queryForm.workExp=""
				this.queryBtn()
			}



		}
	}
</script>
<style>
	page {
		background: #F0F0F2;
		padding-bottom: 50px;
	}
</style>

<style lang="scss" scoped>
	.search {
		background-color: #fff;
		padding: 16rpx 32rpx;

		.search-box {
			border-radius: 50px;

			height: 72rpx;
			line-height: 72rpx;
		}
	}

	// 搜索结果
	.result {
		background-color: #fff;

		.tabs {
			padding-right: 32rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			border-bottom: 1px solid #f1f1f1;

			.left {
				width: 33%;

				/deep/.u-tabs {
					background-color: #fff !important;

				}
			}

			.screen {
				display: flex;
				align-items: center;
				color: rgba(39, 149, 253, 1);
				font-size: 16px;

				img {
					width: 16px;
					height: 16px;
					vertical-align: middle;
					margin-right: 4rpx;
				}
			}

		}

		.result-item {
			padding: 24rpx 0;
			margin: 0 32rpx;
			display: flex;
			border-bottom: 1px solid #f1f1f1;

			// 照片
			.photo {
				width: 96rpx;
				height: 96rpx;
				overflow: hidden;
				border-radius: 50px;
				border: 1px solid rgba(255, 255, 255, 1);

				img {
					width: 100%;
					height: 100%;
				}
			}

			.content {
				margin-left: 24rpx;
				flex: 1;

				// 职位薪水
				.top {
					display: flex;
					justify-content: space-between;
					align-items: center;
					font-size: 36rpx;

					.position {
						color: rgba(16, 16, 16, 1);

						font-family: 'PingFangSC-medium';
					}

					.salary {
						color: rgba(255, 61, 0, 1);
						font-size: 32rpx;
					}
				}

				// 发布人
				.issuer {
					margin-top: 8rpx;
				}

				// 标签和时间
				.bottom {
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-top: 12rpx;

					.tags {
						display: flex;

						.tag-item {
							padding: 0 16rpx;
							height: 36rpx;
							line-height: 36rpx;
							border-radius: 4px;
							background-color: rgba(241, 241, 247, 1);
							color: rgba(129, 127, 153, 1);
							font-size: 24rpx;
							text-align: center;
							margin-right: 8rpx;
						}
					}

					.date {
						color: rgba(153, 153, 153, 1);
						font-size: 24rpx;

					}
				}
			}
		}


	}

	// 筛选框
	.popup-content {
		padding: 32rpx;

		.headline {
			color: #101010;
			font-size: 40rpx;
			text-align: center;
		}

		// 薪资待遇
		.salary-package,
		.work-experience {
			margin-top: 16rpx;

			.title {
				font-size: 32rpx;
				color: #111111;
			}

			// 选项
			.options {
				display: flex;
				flex-wrap: wrap;
				justify-content: flex-start;
				margin-top: 24rpx;

				.item {
					height: 56rpx;
					line-height: 56rpx;
					width: 210rpx;
					text-align: center;
					margin-bottom: 16rpx;
					margin-right: 16rpx;
					color: #999999;
					background-color: #F3F3F4;
					border-radius: 4px;
				}

				.checked {
					background-color: #2795FD;
					color: #fff;
				}
			}
		}

		.button {
			display: flex;

			margin-top: 8rpx;
			.reset:after{
					border:0
			}
			.reset {
				color: #999999;
				background-color: #F3F3F4;
				width: 200rpx;
				height: 72rpx;
				line-height: 72rpx;
				border-radius: 8px;
			}

			.confirm {
				width: 440rpx;
				background-color: #2795FD;
				color: #fff;
				height: 72rpx;
				line-height: 72rpx;
				border-radius: 8px;
			}
		}
	}

	.salary-form,
	.clearing-form {
		.options {
			justify-content: start !important;
		}

		.item {
			margin-right: 24rpx;
		}
	}

	/deep/.u-close--top-right {
		top: 44rpx;
	}
</style>