<template>
	<view class="page" :style="vuex_theme">
		<scroll-view
			style=" width:33%; height: calc(100vh - 200rpx); border-right: 1px solid rgba(0,0,0,0.05);"
			:scroll-y="true">
			<view class="list-title" v-for="(item,index) in firstCategorys" :key="index"
				@click="firstCategorySel(item,index)">
				<view :class="firstCategoryName == item.name?'item itemSel':'item'">
					{{item.name}}
				</view>
			</view>
		</scroll-view>
		<scroll-view
			style=" width:34%; height: calc(100vh - 200rpx); border-right: 1px solid rgba(0,0,0,0.05);"
			:scroll-y="true">
			<view v-if="isAll=='1'" class="list-title" @click="secondCategorySel({name:'全部',sub_categories:[]},-1)">
				<view :class="secondCategoryName == '全部'?'item itemSel':'item'">
					全部
				</view>
			</view>
			<view class="list-title" v-for="(item,index) in secondCategorys" :key="index"
				@click="secondCategorySel(item,index)">
				<view :class="secondCategoryName == item.name?'item itemSel':'item'">
					{{item.name}}
				</view>
			</view>
		</scroll-view>
		<scroll-view style=" width:32%; height: calc(100vh - 200rpx);"
			:scroll-y="true">
			<view v-if="isAll=='1'" class="list-title" @click="expectjobSel({name:'全部',sub_categories:[]},-1)">
				<view :class="expectJobName == '全部'?'item itemSel':'item'">
					全部
				</view>
			</view>
			<view class="list-title" v-for="(item,index) in expectJobs" :key="index" @click="expectjobSel(item,index)">
				<view :class="expectJobName == item.name?'item itemSel':'item'">
					{{item.name}}
				</view>
			</view>
		</scroll-view>
		<view class="bottom">
			<view style="width: 100%;display: flex;top: 30rpx;position: absolute;">
				<view class="chat1" @click="cancel">
					清除
				</view>
				<view class="chat2" @click="submit">
					确认
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				firstCategoryName: '',
				secondCategoryName: '',
				expectJobName: '',
				firstCategorys: [],
				secondCategorys: [],
				expectJobs: [],
				fromType: "",
				isAll: '0',
			}
		},

		onLoad(option) {
			console.log(option)
			this.fromType = option ? option.fromType : ""
			this.isAll = option&&option.isAll ? option.isAll : '0'
			if (JSON.stringify(option) !== '{}' && option.firstCategoryName) {
				this.firstCategoryName = option.firstCategoryName
				if (this.isAll == '1') {
					this.secondCategoryName = option.secondCategoryName ? option.secondCategoryName : '全部'
					this.expectJobName = option.expectJobName ? option.expectJobName : '全部'
				}else {
					this.secondCategoryName = option.secondCategoryName
					this.expectJobName = option.expectJobName
				}
			}
			this.loadData()
		},

		methods: {
			firstCategorySel(e, i) {
				console.log(e)
				this.firstCategoryName = e.name
				this.secondCategorys = e.sub_categories
				// this.secondCategoryName = this.secondCategorys[0].name
				// this.expectJobs = this.secondCategorys[0].sub_categories
				
				if (this.isAll == '0') {
					this.expectJobs = this.secondCategorys[0].sub_categories
					this.secondCategoryName = this.secondCategorys[0].name
					this.expectJobName = this.expectJobs[0].name
				}else {
					this.expectJobs = []
					this.secondCategoryName = '全部'
					this.expectJobName = '全部'
				}
			},

			secondCategorySel(e, i) {
				this.secondCategoryName = e.name
				this.expectJobs = e.sub_categories
				
				if (this.isAll == '0') {
					this.expectJobName = this.expectJobs[0].name
				}else {
					this.expectJobName = '全部'
				}
			},

			expectjobSel(e, i) {
				console.log(e.name)
				this.expectJobName = e.name
			},

			loadData() {
				this.$u.api.poscategorylistApi().then(res => {
					if (res) {
						if (this.firstCategoryName == '') {
							this.firstCategoryName =res[0].name
							this.secondCategorys = res[0].sub_categories
							// this.secondCategoryName = this.secondCategorys[0].name
							// this.secondCategoryName = '全部'
							// this.expectJobs = this.secondCategorys[0].sub_categories
							// this.expectJobName = '全部'
							if (this.isAll == '1') {
								this.secondCategoryName = '全部'
								this.expectJobName = '全部'
							}else {
								this.secondCategoryName = this.secondCategorys[0].name
								this.expectJobs = this.secondCategorys[0].sub_categories
							}
						} else {
							for (let i = 0; i < res.length; i++) {
								let item = res[i]
								if (this.firstCategoryName == item.name) {
									this.secondCategorys = item.sub_categories
									for (let j = 0; j < this.secondCategorys.length; j++) {
										let item1 = this.secondCategorys[j]
										if (this.secondCategoryName == item1.name) {
											this.expectJobs = item1.sub_categories
										}
									}
								}
							}
						}
						this.firstCategorys = res
					}
				})
			},

			cancel() {
				this.firstCategoryName = ''
				this.secondCategoryName = ''
				this.expectJobName = ''
				// this.firstCategorys = []
				// this.secondCategorys = []
				// this.expectJobs = []

				// this.loadData()
			},

			submit() {
				if (this.isAll == '0') {
					if (this.expectJobName == '') {
						uni.showToast({
							title: '请选择一个职位',
							icon: 'none',
							duration: 2000
						});
						return
					}
				}

				let pages = getCurrentPages();
				let prevPage = pages[pages.length - 2];
				prevPage.$vm.position_category = this.firstCategoryName;
				prevPage.$vm.sub_category = this.secondCategoryName != '全部' ? this.secondCategoryName : '';
				prevPage.$vm.expectJob_category = this.expectJobName != '全部' ? this.expectJobName : '';
				if (this.isAll == '1') {
					if (this.expectJobName == '全部') {
						prevPage.$vm.category_title = this.secondCategoryName;
					}else {
						prevPage.$vm.category_title = this.expectJobName;
					}
					if (this.secondCategoryName == '全部') {
						prevPage.$vm.category_title = this.firstCategoryName;
					}
				}else {
					prevPage.$vm.category_title = this.expectJobName;
				}
				if (!this.fromType) {
					prevPage.$vm.loadData()
				}
				uni.navigateBack({
					delta: 1
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		position: relative;
		width: 100%;
		height: 100%;
		display: flex;

		.list-title {
			margin-top: 72rpx;
			margin-left: 32rpx;

			.item {
				font-size: 14px;
				font-family: PingFangSC-Light, PingFang SC;
				font-weight: 300;
				color: #000000;
			}

			.itemSel {
				color: var(--primary-color);
			}
		}

		.list-title:first-child {
			margin-top: 56rpx;
		}

		.list-Item {
			display: flex;
			flex-wrap: wrap;
			padding: 40rpx 24rpx;
			width: 100%;

			.item {
				width: calc(100%/2 - 4.5px);
				height: 32px;
				border-radius: 4rpx;
				margin-bottom: 10px;
				font-size: 28rpx;
				background: #F7F7F7;
				font-weight: 400;
				color: #8C8E91;
				text-align: center;
				line-height: 32px;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}

			.item:nth-child(odd) {
				margin-right: 9px;
			}

			.itemSel {
				color: var(--primary-color);
			}
		}

		.bottom {
			width: 100%;
			height: 180rpx;
			position: fixed;
			background-color: #FFFFFF;
			bottom: 0;
			padding: 24rpx 32rpx;
			border-top: 0.5px solid #F0F0F1;

			.chat1 {
				width: calc(106/375*100%);
				height: 44px;
				background: #F7F7F7;
				border-radius: 4px;
				border: 1px solid #E5E5E6;
				font-size: 17px;
				font-weight: 500;
				color: #646464;
				text-align: center;
				line-height: 44px;
			}

			.chat2 {
				width: calc(217/375*100%);
				height: 44px;
				background: var(--primary-color);
				box-shadow: 0px 2px 8px 0px var(--primary-color03);
				border-radius: 4px;
				font-size: 17px;
				font-weight: 400;
				color: #FFFFFF;
				line-height: 17px;
				text-align: center;
				line-height: 44px;
				margin-left: calc(20/375*100%);
			}

		}
	}
</style>