<template>
	<view class="">
		<u-popup border-radius="28" :show="openshaixuan" mode="bottom">
			<view class="shaixuan-popup u-flex-col">
				<view class="shaixuan-header u-flex u-row-between">
					<u-icon name="close" size="22" color="#222" @click="openshaixuan = false"></u-icon>
					<text class="header-title">筛选</text>
					<u-icon name="close" size="22" color="#fff"></u-icon>
				</view>
				<scroll-view scroll-y="true" class="shaixuan-scroll u-flex-1">

					<view class="scroll-title u-flex u-row-between">
						<text>薪资范围</text>
					</view>
					<view class="scroll-item u-flex u-row-between u-flex-wrap">
						<text :class="{text:xinzi.name == '不限'}"
							@click="xinzi = {name: '不限',min: '',max: '',zidingyi: ''}">不限</text>
						<text v-for="(a,b) in xinzilist" :key="b" :class="{text:xinzi.name == a.name}"
							@click="xinzi = {name: a.name,min: a.min,max: a.max,zidingyi: ''}">{{a.name}}</text>
						<text :class="{text:xinzi.zidingyi}"
							@click="openxinzi = true">{{xinzi.zidingyi || '自定义'}}</text>
					</view>
					<view class="scroll-title u-flex u-row-between">
						<text>学历要求</text>
					</view>
					<view class="scroll-item u-flex u-row-between u-flex-wrap">
						<text :class="{text:xueli == -1}" @click="xueli = -1">不限</text>
						<text v-for="(a,b) in xuelilist" :key="b" :class="{text:xueli == b}"
							@click="xueli = b">{{a.name}}</text>
					</view>
					<view class="scroll-title u-flex u-row-between">
						<text>工作经验</text>
					</view>
					<view class="scroll-item u-flex u-row-between u-flex-wrap">
						<text :class="{text:jingyan == -1}" @click="jingyan = -1">不限</text>
						<text v-for="(a,b) in jingyanlist" :key="b" :class="{text:jingyan == b}"
							@click="jingyan = b">{{a.name}}</text>
					</view>
					<view class="scroll-title u-flex u-row-between">
						<text>行业类型</text>
						<text @click="tohangye">查看更多</text>
					</view>
					<view class="scroll-item u-flex u-row-between u-flex-wrap">
						<text :class="{text:hangye.id == -1}" @click="hangye = {name:'',id:-1,show:false}">不限</text>
						<text v-for="(a,b) in tuijianhangyelist" :key="b" :class="{text:hangye.id == a.id}"
							@click="hangye = {name:a.name,id:a.id,show:false}">{{a.name}}</text>
						<text v-if="hangye.show" class="text">{{hangye.name}}</text>
					</view>
					
					
					<view class="scroll-title u-flex u-row-between">
						<text>公司规模</text>
					</view>
					<view class="scroll-item u-flex u-row-between u-flex-wrap">
						<text :class="{text:guimo == -1}" @click="guimo = -1">不限</text>
						<text v-for="(a,b) in guimolist" :key="b" :class="{text:guimo == b}"
							@click="guimo = b">{{a.name}}</text>
					</view>





					<view class="scroll-title u-flex u-row-between">
						<text>融资阶段</text>
					</view>
					<view class="scroll-item u-flex u-row-between u-flex-wrap">
						<text :class="{text:jieduan == -1}" @click="jieduan = -1">不限</text>
						<text v-for="(a,b) in jieduanlist" :key="b" :class="{text:jieduan == b}"
							@click="jieduan = b">{{a.name}}</text>
					</view>






		<!-- 							<view class="scroll-title u-flex u-row-between">
						<text>职业类型</text>
						<text @click="tozhiye">查看更多</text>
					</view>
					<view class="scroll-item u-flex u-row-between u-flex-wrap">
						<text :class="{text:fenlei.id == -1}" @click="fenlei = {name:'',id:-1,show:false}">不限</text>
						<text v-for="(a,b) in tuijianfenleilist" :key="b" :class="{text:fenlei.id == a.id}" @click="fenlei = {name:a.name,id:a.id,show:false}">{{a.name}}</text>
						<text v-if="fenlei.show" class="text">{{fenlei.name}}</text>
					</view> -->



					<!-- 			<view class="scroll-title u-flex u-row-between">
						<text>不看企业</text>
					</view> -->
					<!-- 			<view class="scroll-gongsi">
						<view class="gongsi-item u-flex" v-for="(a,b) in bukanlist" :key="b">
							<text class="text">{{a}}</text>
							<u-icon name="close" size="24" @click="bukanlist = []"></u-icon>
						</view>
						<view class="gongsi-add" v-if="bukanlist.length == 0" @click="showbukan = true">
							添加
						</view>
					</view> -->

				</scroll-view>
				<view class="shaixuan-btn u-flex u-row-between">
					<text @click="chongzhi">重置</text>
					<text @click="tosearch">确定</text>
				</view>
				<view class="safe-area-inset-bottom" v-if="showdown"></view>
			</view>
		</u-popup>
		<u-modal @cancel="showbukan = false" :show="showbukan" title="不看企业" :showCancelButton="true"
			@confirm="setbukan">
			<view class="slot-content">
				<input type="text" class="content-input" placeholder="请输入不看企业" v-model="bukan">
			</view>
		</u-modal>
		<u-picker :show="openxinzi" :columns="zidingyilist" @confirm="changezidingyi"></u-picker>
	</view>
</template>

<script>
	import {
		get_category_job_recommend,
		get_category_industry_recommend,
		get_education,
		get_experience,
		get_company_stage,
		get_company_scale
	} from "@/units/inquire.js"
	export default {
		props: {
			showdown: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				type:0,
				guimolist: [],
				openshaixuan: false,
				tuijianhangyelist: [],
				hangye: {
					name: '',
					id: '-1',
					show: false
				},
				tuijianfenleilist: [],
				fenlei: {
					name: '',
					id: '-1',
					show: false
				},
				showbukan: false,
				bukan: '',
				bukanlist: [],
				xinzilist: [],
				xinzi: {
					name: '不限',
					min: '',
					max: '',
					zidingyi: ''
				},
				guimo:-1,
				openxinzi: false,
				zidingyilist: [],
				xuelilist: [],
				xueli: -1,
				jingyanlist: [],
				jingyan: -1,
				jieduanlist: [],
				jieduan: -1
			}
		},
		created() {
			this.getconfig()
		},
		methods: {
			tozhiye() {
				uni.navigateTo({
					url: "/pagesA/change-zhiwei",
					events: {
						changefenlei: (res) => {
							console.log(res);
							this.fenlei = {
								name: res[2].name,
								id: res[2].id,
								show: true
							}
						}
					}
				})
			},
			tohangye() {
				uni.navigateTo({
					url: "/pagesA/change-hangye1",
					events: {
						changehangye: (res) => {
							this.hangye = {
								id: res[1].id,
								name: res[1].name,
								show: true
							}
						}
					}
				})
			},
			tosearch() {
				if(this.type == 1){
					this.$emit('tosearch', {

					})
				}else{
					this.type = 2,
					this.$emit('tosearch', {
						"category_industry_id": this.hangye.id == -1 ? '' : this.hangye.id,
						"category_job_id": this.fenlei.id == -1 ? '' : this.fenlei.id,
						"company_name": this.bukanlist[0],
						"salary_min": this.xinzi.min,
						"salary_max": this.xinzi.max,
						"scale_id":this.guimo == -1 ? '' : this.guimolist[this.guimo].id,
						"education_id": this.xueli == -1 ? '' : this.xuelilist[this.xueli].id,
						"experience_id": this.jingyan == -1 ? '' : this.jingyanlist[this.jingyan].id,
						"stage_ids": this.jieduan == -1 ? '' : this.jieduanlist[this.jieduan].id
					})
				}
				this.openshaixuan = false
			},
			chongzhi() {
				this.type = 1
				this.hangye = {
					name: '',
					id: '-1',
					show: false
				}
				this.fenlei = {
					name: '',
					id: '-1',
					show: false
				}
				this.bukan = ''
				this.bukanlist = []
				this.xinzi = {
					name: '不限',
					min: '',
					max: '',
					zidingyi: ''
				}
				this.xueli = -1
				this.jingyan = -1
				this.jieduan = -1
				this.guimo = -1
				this.tosearch()
			},
			changezidingyi(e) {
				if (e[0].value > e[1].value) {
					this.xinzi.min = e[1].value
					this.xinzi.max = e[0].value
					this.xinzi.name = `${e[1].value}-${e[0].label}`
					this.xinzi.zidingyi = `${e[1].label}-${e[0].label}`
				} else {
					this.xinzi.min = e[0].value
					this.xinzi.max = e[1].value
					this.xinzi.name = `${e[0].value}-${e[1].label}`
					this.xinzi.zidingyi = `${e[0].label}-${e[1].label}`
				}
			},
			setbukan() {
				if (!this.bukan) {
					this.$u.toast("请输入不看的企业")
					return
				}
				this.showbukan = false
				this.bukanlist.push(this.bukan)
			},
			getconfig() {
				get_category_industry_recommend().then(res => {
						this.tuijianhangyelist = res.data
					}),
					get_category_job_recommend().then(res => {
						this.tuijianfenleilist = res.data
					})
					get_company_scale().then(res=>{
						this.guimolist = res.data.reverse()
					})
				// this.guimolist = [{
				// 		name: '0-49人',
				// 		min: 0,
				// 		max: 49
				// 	}, {
				// 		name: '50-99人',
				// 		min: 5,
				// 		max: 10
				// 	}, {
				// 		name: '100-499人',
				// 		min: 10,
				// 		max: 15
				// 	}, {
				// 		name: '500-999人',
				// 		min: 15,
				// 		max: 20
				// 	}, {
				// 		name: '1000-2000人',
				// 		min: 20,
				// 		max: 30
				// 	}, {
				// 		name: '2000-5000人',
				// 		min: 30,
				// 		max: 50
				// 	}, {
				// 		name: '5000-10000人',
				// 		min: 50,
				// 		max: 9999
				// 	},
				// 	{
				// 		name: '10000人以上',
				// 		min: 50,
				// 		max: 9999
				// 	}
				// ]

				this.xinzilist = [{
					name: '5K以下',
					min: 0,
					max: 5
				}, {
					name: '5-10K',
					min: 5,
					max: 10
				}, {
					name: '10-15K',
					min: 10,
					max: 15
				}, {
					name: '15-20K',
					min: 15,
					max: 20
				}, {
					name: '20-30K',
					min: 20,
					max: 30
				}, {
					name: '30-50K',
					min: 30,
					max: 50
				}, {
					name: '50K以上',
					min: 50,
					max: 9999
				}]

				this.zidingyilist = []
				let arr = []
				for (let i = 1; i <= 100; i++) {
					arr.push({
						value: i,
						label: `${i}K`
					})
				}
				this.zidingyilist.push(arr)
				this.zidingyilist.push(arr)
				get_education().then(res => {
					this.xuelilist = res.data
				})
				get_experience().then(res => {
					this.jingyanlist = res.data
				})
				get_company_stage().then(res => {
					this.jieduanlist = res.data
				})
			},
		}
	}
</script>

<style lang="scss">
	.slot-content {
		padding: 0 20rpx;

		.content-input {
			margin: 20rpx 0;
			width: 100%;
			padding: 0 10rpx;
			border: 2rpx solid rgba(0, 0, 0, 0.1);
			height: 78rpx;
			border-radius: 10rpx;
			box-sizing: border-box;
		}
	}

	.shaixuan-popup {
		height: calc(100vh - 144rpx);

		.shaixuan-scroll {
			min-height: 1rpx;
			padding: 10rpx 32rpx;
			width: 750rpx;
			box-sizing: border-box;

			.scroll-item {
				text {
					width: 214rpx;
					line-height: 72rpx;
					background: #F7F7F7;
					border-radius: 6rpx;
					text-align: center;
					font-size: 28rpx;
					font-family: SFPro-Regular, SFPro;
					font-weight: 400;
					color: #141414;
					margin-bottom: 28rpx;
					border: 1rpx solid #F7F7F7;
				}

				.text {
					border: 1rpx solid #0C66C2;
					background-color: rgba(12, 102, 194, 0.1);
					color: #0C66C2;
				}
			}

			.scroll-item::after {
				content: " ";
				width: 214rpx;
			}

			.scroll-gongsi {
				.gongsi-item {
					height: 60rpx;
					padding: 0 20rpx;
					background-color: #E9EFF9;
					color: #0B66C2;
					width: fit-content;
					margin-bottom: 20rpx;

					.text {
						margin-right: 10rpx;
					}
				}

				.gongsi-add {
					width: 214rpx;
					line-height: 68rpx;
					background: #0C66C2;
					border-radius: 6rpx;
					text-align: center;
					font-size: 28rpx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: #FFFFFF;
					margin-bottom: 20rpx;
				}
			}

			.scroll-title {
				margin: 4rpx 0 28rpx 0;

				text:first-child {
					font-size: 32rpx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: #222222;
				}

				text:nth-child(2) {
					font-size: 22rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #666666;
				}
			}
		}

		.shaixuan-btn {
			padding: 12rpx 32rpx;

			text:last-child {
				width: 454rpx;
				line-height: 84rpx;
				background: #0C66C2;
				border-radius: 10rpx;
				text-align: center;
				font-size: 32rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #FFFFFF;
			}

			text:first-child {
				width: 208rpx;
				line-height: 84rpx;
				background: #F3F3F3;
				border-radius: 10rpx;
				text-align: center;
				font-size: 32rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #555555;
			}
		}

		.shaixuan-header {
			height: 120rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 0rpx 0rpx 0rpx rgba(0, 0, 0, 0.2);
			border-radius: 28rpx 28rpx 0rpx 0rpx;
			padding: 0 32rpx;

			.header-title {
				font-size: 36rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #222222;
			}

		}
	}
</style>