<template>
	<view class="gjFixed" v-if="show == 'special'" @click.stop @touchmove.stop.prevent>
		<view class="filterContainer filterBox" style>
			<scroll-view class style="padding: 0; background-color: #f5f5f5" scroll-y>
				<template v-for="item in anchorList">
					<view :class="item.id == filterTo ? 'filterActive' : ''" class="g_c_3 g_fw_600" style="width: 84px; padding: 12px 0" @click="goAnchor(item)">{{ item.name }}</view>
				</template>
			</scroll-view>
			<scroll-view class=" " :data-filter-to="filterTo" :scroll-into-view="filterTo" scroll-with-animation style="width: calc(100% - 100px); padding: 0 8px" scroll-y>
				<view style="padding: 0 10px">
					<view class="sub" id="age">
						<view class="title">年龄</view>
						<view class="content g_bg_f">
							<slider-range style="width: 98vw" class="g_bg_f" :value="rangeValue" :min="rangeMin" :max="rangMax" :step="1" :bar-height="3" :height="20" :format="format" :block-size="26" :active-color="globalData.themeColor" :decorationVisible="true" @change="handleRangeChange"></slider-range>
						</view>
					</view>

					<view class="sub" id="gender">
						<view class="title">性别</view>
						<view class="content">
							<view @click.stop="setActive($event, item.id, index, 'sex')" :class="item.active == item.id ? 'active' : ''" hover-class="none" :hover-stop-propagation="false" v-for="(item, index) in filterData.sex" :key="index">
								{{ item.name }}
							</view>
						</view>
					</view>

					<!-- <view class="sub" id="class"  >
							<view class="title">分类</view>
							<view class="content">
								<view @click.stop="setActive($event, item.id, index, 'classifyList')" :class="item.active != 0 ? 'active' : ''" hover-class="none" :hover-stop-propagation="false" v-for="(item, index) in filterData.classifyList" :key="index"> {{ item.name }}</view>
							</view>
						</view> -->

					<view class="sub" id="xzfl">
						<view class="title">薪资待遇</view>
						<view class="content">
							<view @click="clearArray(1)" :class="filterData.jobFilter.tagArray1.some((item) => item.active != 0) ? '' : 'active'">不限</view>
							<view @click.stop="setActive($event, item.id, index, 'tagArray1')" :class="item.active != 0 ? 'active' : ''" hover-class="none" :hover-stop-propagation="false" v-for="(item, index) in filterData.jobFilter.tagArray1" :key="index"> {{ item.name }}</view>
						</view>
					</view>

					<view class="sub" id="ssbz">
						<view class="title">吃饭住宿</view>
						<view class="content">
							<view @click="clearArray(3)" :class="filterData.jobFilter.tagArray3.some((item) => item.active != 0) ? '' : 'active'">不限</view>
							<view @click.stop="setActive($event, item.id, index, 'tagArray3')" :class="item.active != 0 ? 'active' : ''" hover-class="none" :hover-stop-propagation="false" v-for="(item, index) in filterData.jobFilter.tagArray3" :key="index"> {{ item.name }}</view>
						</view>
					</view>

					<view class="sub" id="bzxx">
						<view class="title">工作休息</view>
						<view class="content">
							<view @click="clearArray(0)" :class="filterData.jobFilter.tagArray0.some((item) => item.active != 0) ? '' : 'active'">不限</view>
							<view @click.stop="setActive($event, item.id, index, 'tagArray0')" :class="item.active != 0 ? 'active' : ''" hover-class="none" :hover-stop-propagation="false" v-for="(item, index) in filterData.jobFilter.tagArray0" :key="index"> {{ item.name }}</view>
						</view>
					</view>

					<view class="sub" id="msts">
						<view class="title">面试特色</view>
						<view class="content">
							<view @click="clearArray(4)" :class="filterData.jobFilter.tagArray4.some((item) => item.active != 0) ? '' : 'active'">不限</view>
							<view @click.stop="setActive($event, item.id, index, 'tagArray4')" :class="item.active != 0 ? 'active' : ''" hover-class="none" :hover-stop-propagation="false" v-for="(item, index) in filterData.jobFilter.tagArray4" :key="index"> {{ item.name }}</view>
						</view>
					</view>

					<view class="sub" id="qtts">
						<view class="title">其它特色</view>
						<view class="content">
							<view @click="clearArray(2)" :class="filterData.jobFilter.tagArray2.some((item) => item.active != 0) ? '' : 'active'">不限</view>
							<view @click.stop="setActive($event, item.id, index, 'tagArray2')" :class="item.active == item.id ? 'active' : ''" hover-class="none" :hover-stop-propagation="false" v-for="(item, index) in filterData.jobFilter.tagArray2" :key="index"> {{ item.name }}</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<view class="btnBox bt1 g_flex_row_center" catchtap>
			<div class="g_w_128 g_mr_12">
				<g-button size="mini_auto" height="32" btnText="清除" @clickBtn="clearFilter"></g-button>
			</div>
			<div class="g_w_128">
				<g-button size="mini_auto" height="32" btnText="确定" type="primary" @clickBtn="toList"></g-button>
			</div>
		</view>
	</view>
</template>

<script>
import SliderRange from "../../../components/primewind-sliderrange/components/primewind-sliderrange/index.vue";
export default {
	components: {
		SliderRange,
	},
	props: {
		getFilterDataNew: {
			type: Object,
			default: () => {
				return {};
			},
		},
		show: {
			type: String,
			default: () => {
				return {};
			},
		},
		top: {
			type: String,
			default: () => {
				return "43px";
			},
		},
	},
	watch: {
		getFilterDataNew: {
			handler(newValue, oldValue) {
				var that = this;
				console.log("筛选组件 newValue", JSON.parse(JSON.stringify(newValue)));
				console.log("筛选组件 oldValue", JSON.parse(JSON.stringify(oldValue)));
				// if (newValue != oldValue) {
				console.log("筛选组件：有变化");
				if (newValue.ageRangeStr != "" && newValue.ageRangeStr != "16-60") {
					this.rangeValue = newValue.ageRangeStr.split("-").map((item) => Number(item));
				} else {
					this.rangeValue = [16, 60];
				}

				if (newValue.sex == -1) {
					this.sex = -1;
					this.filterData.sex.forEach((item) => {
						item.active = 0;
						this.filterData.sex[0].active = -1;
					});
					console.log("this.filterData.sex", this.filterData.sex);
				} else {
					this.filterData.sex.forEach((item) => {
						item.active = 0;
						this.filterData.sex[Number(newValue.sex)].active = newValue.sex;
					});
				}

				that.filterData.classifyList.forEach((item) => {
					item.active = 0;
				});
				if (newValue.jobSpecialLabelObjects) {
					newValue.jobCategoryLabelObjects.forEach((obj) => {
						// 找到对应的对象并更新 active 值
						const index = that.filterData.classifyList.findIndex((item) => item.id === obj.id);
						if (index != -1) {
							that.filterData.classifyList[index].active = obj.id;
						} else {
							that.filterData.classifyList[index].active = 0;
						}
					});
					that.jobCategoryLabelIds = that.filterData.classifyList.filter((item) => item.active !== 0).map((item) => item.id);
					that.allSpecial.forEach((item) => {
						item.active = 0;
					});
				}

				if (newValue.jobSpecialLabelObjects) {
					newValue.jobSpecialLabelObjects.forEach((obj) => {
						// 找到对应的对象并更新 active 值
						const index = that.allSpecial.findIndex((item) => item.id === obj.id);
						if (index != -1) {
							that.allSpecial[index].active = obj.id;
						}
					});
					that.jobSpecialLabelIds = that.allSpecial.filter((item) => item.active !== 0).map((item) => item.id);
				}

				if (newValue.ageRangeStr != "" && newValue.ageRangeStr != "16-60") {
					this.rangeValue = newValue.ageRangeStr.split("-").map((item) => Number(item));
					this.ageRangeStr = newValue.ageRangeStr;
				} else {
					this.rangeValue = [16, 60];
				}

				if (newValue.sex == -1) {
					this.sex = -1;
					this.filterData.sex.forEach((item) => {
						item.active = 0;
						this.filterData.sex[0].active = -1;
					});
					console.log("this.filterData.sex", this.filterData.sex);
				} else {
					this.filterData.sex.forEach((item) => {
						item.active = 0;
						this.filterData.sex[Number(newValue.sex)].active = newValue.sex;
					});
					console.log("newValue.sex +++++++++++++++++++++ newValue.sex", newValue.sex);
					this.sex = newValue.sex;
				}
				if (newValue.labelNames) {
					let digui = function () {
						setTimeout(() => {
							if (that.filterData.jobFilter.tagArray0.length > 0) {
								for (const k in that.filterData.jobFilter) {
									if (k == "tagArray0" || k == "tagArray1" || k == "tagArray2" || k == "tagArray3" || k == "tagArray4") {
										that.filterData.jobFilter[k].forEach((item) => {
											newValue.labelNames.split(" ").forEach((label) => {
												if (item.name == label) {
													item.active = item.id;
												}
											});
										});
									}
									console.log("this.filterData.jobFilter", that.filterData.jobFilter);
								}
								that.toList();
							} else {
								digui();
							}
						}, 100);
					};
					digui();
				}
				// } else {
				// 	console.log("筛选组件：无变化");
				// }
			},
			deep: true,
		},
	},
	data() {
		return {
			rangeMin: 16,
			rangMax: 60,
			rangeValue: [16, 60],
			ageRangeStr: "",

			sex: "-1",
			jobCategoryLabelIds: [],
			jobSpecialLabelIds: [],
			filterObj: {},
			totalList: [],
			allSpecial: [],
			appid: getApp().globalData.appId,
			globalData: getApp().globalData,

			filterData: {
				sex: [
					{
						name: "不限",
						id: -1,
						active: -1,
					},
					{
						name: "收男工",
						id: 1,
						active: 0,
					},
					{
						name: "收女工",
						id: 2,
						active: 0,
					},
					{
						name: "男女都收",
						id: 3,
						active: 0,
					},
				],
				jobFilter: {
					tagArray0: [],
					tagArray1: [],
					tagArray2: [],
					tagArray3: [],
					tagArray4: [],
				},
				classifyList: [],
			},
			anchorList: [
				{
					id: "age",
					name: "性别年龄",
				},
				// {
				// 	id: "gender",
				// 	name: "性别",
				// },
				// {
				// 	id: "class",
				// 	name: "分类",
				// },
				{
					id: "xzfl",
					name: "薪资待遇",
				},
				{
					id: "ssbz",
					name: "吃饭住宿",
				},
				{
					id: "bzxx",
					name: "工作休息",
				},
				{
					id: "msts",
					name: "面试特色",
				},
				{
					id: "qtts",
					name: "其它特色",
				},
			],
			filterTo: "age", // 筛选锚点控制
		};
	},
	mounted() {
		// this.getType();
		this.getClass();
	},

	onShow() {
		// this.getType();
	},
	methods: {
		format(val) {
			return val;
		},
		handleRangeChange(e) {
			console.log(e);
			this.rangeValue = e;
			this.ageRangeStr = e[0] + "-" + e[1];
		},
		doNothing() {},
		toList() {
			var that = this;
			console.log("this.sex", this.sex);
			this.filterObj["sex"] = this.sex;
			this.filterObj["ageRangeStr"] = this.ageRangeStr;
			this.jobSpecialLabelIds = [];
			//数组改为字符串
			this.filterObj["jobCategoryLabelIds"] = this.jobCategoryLabelIds.join(",");
			for (const k in this.filterData.jobFilter) {
				if (k == "tagArray0" || k == "tagArray1" || k == "tagArray2" || k == "tagArray3" || k == "tagArray4") {
					this.filterData.jobFilter[k].forEach((item) => {
						if (item.active != 0) {
							this.jobSpecialLabelIds.push(item.id);
						}
					});
				}
			}

			this.filterObj["jobSpecialLabelIds"] = this.jobSpecialLabelIds.join(",");

			// 根据id获取对象
			const jobCategoryLabelObjects = that.filterData.classifyList.filter((item) => this.jobCategoryLabelIds.includes(item.id));

			console.log(jobCategoryLabelObjects);

			// 根据id获取对象(职位标签)
			const jobSpecialLabelObjects = that.totalList.filter((item) => this.jobSpecialLabelIds.includes(item.id));

			console.log(jobSpecialLabelObjects);

			this.filterObj.jobCategoryLabelObjects = jobCategoryLabelObjects;
			this.filterObj.jobSpecialLabelObjects = jobSpecialLabelObjects;

			this.$emit("filterObj", this.filterObj);
		},
		clearFilter() {
			var that = this;
			console.log("cleclecleclecleclecle");
			this.filterObj["sex"] = -1;
			this.filterObj["ageRangeStr"] = "";
			this.rangeValue = [16, 60];

			//数组改为字符串
			this.filterObj["jobCategoryLabelIds"] = "";
			this.filterObj["jobSpecialLabelIds"] = "";
			this.filterObj["jobSpecialLabelObjects"] = [];
			this.filterObj["jobCategoryLabelObjects"] = [];
			this.jobCategoryLabelIds = [];
			this.jobSpecialLabelIds = [];

			this.filterData.sex.forEach((item) => {
				item.active = 0;
				this.filterData.sex[0].active = -1;
			});
			this.filterData["ageRangeStr"] = "";
			this.filterData.classifyList.forEach((item) => {
				item.active = 0;
			});
			this.clearArray();
			console.log(that.filterData);

			setTimeout(() => {
				this.rangeValue = [16, 60];
				that.$emit("filterObj", that.filterObj);
			}, 100);
		},
		clearArray(type) {
			console.log(type);
			if (type || type == 0) {
				this["clearArray" + type]();
			} else {
				this.clearArray0();
				this.clearArray1();
				this.clearArray2();
				this.clearArray3();
				this.clearArray4();
			}
		},
		clearArray0() {
			this.filterData.jobFilter.tagArray0.forEach((item) => {
				item.active = 0;
			});
		},
		clearArray1() {
			this.filterData.jobFilter.tagArray1.forEach((item) => {
				item.active = 0;
			});
		},
		clearArray2() {
			this.filterData.jobFilter.tagArray2.forEach((item) => {
				item.active = 0;
			});
		},
		clearArray3() {
			this.filterData.jobFilter.tagArray3.forEach((item) => {
				item.active = 0;
			});
		},
		clearArray4() {
			this.filterData.jobFilter.tagArray4.forEach((item) => {
				item.active = 0;
			});
		},
		/**
		 * 获取职位标签
		 */
		getClass() {
			var that = this;
			that.G.Get(
				that.api.yi_job_class_new,
				{ type: 90, industry: 2, hasJob: 1 },
				(res) => {
					console.log(res);
					that.allSpecial = res;
					that.allSpecial.forEach((item) => {
						item.active = 0;
						if (item.typeClassify == "0") {
							this.filterData.jobFilter["tagArray0"].push(item);
						} else if (item.typeClassify == "1") {
							this.filterData.jobFilter["tagArray1"].push(item);
						} else if (item.typeClassify == "2") {
							this.filterData.jobFilter["tagArray2"].push(item);
						} else if (item.typeClassify == "3") {
							this.filterData.jobFilter["tagArray3"].push(item);
						} else if (item.typeClassify == "4") {
							this.filterData.jobFilter["tagArray4"].push(item);
						}
					});
					that.totalList = [...this.filterData.jobFilter.tagArray0, ...this.filterData.jobFilter.tagArray1, ...this.filterData.jobFilter.tagArray2, ...this.filterData.jobFilter.tagArray3, ...this.filterData.jobFilter.tagArray4];

					console.log(that.totalList);

					// that.filterData.classifyList = res.labels.map(label => ({
					//   ...label,
					//   active: 0
					// }));
				},
				(res) => {
					console.log(res);
				}
			);
		},
		/**
		 * 获取职位类型
		 */
		// getType() {
		// 	var that = this;
		// 	that.G.Get(
		// 		that.api.yi_job_type_new,
		// 		{},
		// 		(res) => {
		// 			that.filterData.classifyList = res.labels.map((label) => ({
		// 				...label,
		// 				active: 0,
		// 			}));
		// 		},
		// 		(res) => {
		// 			console.log(res);
		// 		}
		// 	);
		// },
		setActive(e, id, index, str) {
			// let idx = index;
			// let index = this.filterData[str].findIndex((item) => {
			// 	return idx == data.id;
			// });
			if (str == "sex") {
				if (this.filterData[str][index].active == id) {
					//已选中状态 取消选中
					this.filterData[str][index].active = 0;
					this.sex = -1;
				} else {
					//单选需清空其他选项
					this.filterData[str].forEach((item) => {
						item.active = 0;
					});
					this.filterData[str][index].active = id;
					this.sex = id;
				}
			} else if (str == "classifyList") {
				if (this.filterData[str][index].active == id) {
					//已选中状态 取消选中
					this.filterData[str][index].active = 0;
					this.jobCategoryLabelIds = this.jobCategoryLabelIds.filter((id1) => id1 != id);
				} else {
					this.filterData[str][index].active = id;
					this.jobCategoryLabelIds.push(id);
				}

				console.log(this.jobCategoryLabelIds);
			} else {
				console.log("id", id);
				if (this.filterData.jobFilter[str][index].active == id) {
					//已选中状态 取消选中
					this.filterData.jobFilter[str][index].active = 0;
					// this.jobSpecialLabelIds = this.jobSpecialLabelIds.filter((id1) => id1 != id);
				} else {
					this.filterData.jobFilter[str][index].active = id;
					// this.jobSpecialLabelIds.push(id);
				}
				console.log("this.filterData.jobFilter[str]", this.filterData.jobFilter[str]);
			}
		},
		goAnchor(item) {
			if (item.id) {
				this.filterTo = item.id;
			}
		},
	},
};
</script>

<style lang="scss" scoped>
.filterContainer {
	display: flex;
	justify-content: flex-start;
	overflow: hidden;
	min-height: 70vh;
	/* padding: 0 10px; */
	/* height: calc(40vh - 64px); */
	/* height: 100%; */
	/* width: calc(100%); */
	box-sizing: border-box;
	background-color: #fff;
	/* padding-bottom: 4px; */
}

.container {
	/* margin: 10px;
	padding: 0 10px; */
	padding-bottom: 32px;
	margin-bottom: 10px;
	background-color: #fff;
	border-radius: 8px;
}
.sub {
	overflow: hidden;
}
.sub .title {
	margin: 32px 0 20px 0;
	font-size: 18px;
	line-height: 1;
	font-weight: bold;
	text-align: left;
}
.sub .content {
	display: flex;
	flex-wrap: wrap;
}
.sub .content > view {
	width: calc(32% - 2px);
	height: 34px;
	line-height: 34px;
	border-radius: 4px;
	background-color: #f6f6f6;
	text-align: center;
	color: #333;
	font-size: 14px;
	font-weight: 500;
	border: 1px solid transparent;
}
.sub .content > view.active {
	background-color:  v-bind("globalData.themeBackgroundColor");
	color: v-bind("globalData.themeColor");
	border-color: v-bind("globalData.themeColor");
}
.sub .content > view:not(:nth-child(3n)) {
	margin-right: 2%;
}
.sub .content > view:not(:nth-last-child(-n + 3)) {
	margin-bottom: 12px;
}
.btnBox {
	position: sticky;
	bottom: 0;
	height: 56px;
	padding-top: 12px;
	display: flex;
	justify-content: center;
	background-color: #fff;
}
.btnBox button {
	width: 128px !important;
	height: 32px;
	padding: 0;
	margin: 0;
	border-radius: 24px;
	line-height: 32px;
	font-size: 14px;
	box-sizing: border-box;
}
.btnBox .clearFilter {
	margin-right: 20px;
	line-height: 30px;
	border: 1px solid v-bind("globalData.themeColor");
	background-color: #fff;
	color: v-bind("globalData.themeColor");
}
.loginOut {
	width: 100% !important;
	height: 44px;
	opacity: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #3578f6;
	border-radius: 25px;
	font-size: 18px;
	font-weight: 601;
	color: #ffffff;
	padding: 0;
	line-height: 44px;
	margin-bottom: 40px;
	margin-top: 20rpx;
}

.bt1 {
	border-top: 1px solid #e5e5e5;
}

.gjFixed {
	position: absolute;
	top: v-bind("top");
	left: 0;
	width: 100vw;
	height: 100vh;
	/* right:0;
	  bottom:0; */
	z-index: 999999;
	background-color: rgba(0, 0, 0, 0.8);
}

.sort {
	animation: singleBox 0.2s;
	animation-fill-mode: forwards;
	/* animation-timing-function: linear; */
	/* animation-timing-function: ease-out; */
	animation-timing-function: ease-in;
}

.filterBox,
.brand {
	animation: filterBox 0.35s;
	animation-fill-mode: forwards;
	/* animation-timing-function: linear; */
	/* animation-timing-function: ease-out; */
	animation-timing-function: ease-in;
}

@keyframes filterBox {
	0% {
		height: 0;
		/* opacity: 0; */
	}

	100% {
		height: 58.5%;
		/* opacity: 1; */
	}
}

@keyframes singleBox {
	0% {
		height: 0;
		/* opacity: 0; */
	}

	100% {
		height: 240px;
		/* opacity: 1; */
	}
}

/* .activeWindow {
		height: 240px !important;
	} */
.oh {
	overflow: hidden;
	height: 100vh;
}

.oa {
	overflow: auto;
}

.weui-half-screen-dialog {
	height: 75vh;
	border-top-left-radius: 4px;
	border-top-right-radius: 4px;
	padding: 0;
}
.filterActive {
	background-color: #fff;
}
</style>
