<template>
	<view class="content">
		<view class="area-nav flex" v-if="selectType == 'area'">
			<view class="nav-left">
				<view :class="['nav-item',{'active':currentIndex===index}]" v-for="(areaItem, index) in areaList" :key="index"
				 @click="getareaList(areaItem.id,1,index)">
					{{ areaItem.name }}
				</view>
			</view>
			<view class="nav-right">
				<view class="nav-item" :class="['nav-item',{'active':selected.areaIds.indexOf(areaItem.id)>=0}]" v-for="(areaItem, index) in cityList"
				 @click="selectArea(areaItem)" :key="index">
					{{ areaItem.name }}
					<u-icon class="iconfont" name="checkbox-mark" color="#2272ff" size="28"></u-icon>
					<!-- <i class="iconfont icon-tijiao"></i> -->
				</view>
			</view>
		</view>
		<view class="age-box" v-if="selectType == 'working_age'">
			<view class="age-item">选择工龄</view>
			<view :class="[
                        'age-item',
                        { active: ageItem.value === selected.working_age },
                    ]"
			 @click="selectAge(ageItem)" v-for="(ageItem, index) in workingAgeList" :key="index">
				{{ ageItem.name }}
				<u-icon class="iconfont" name="checkbox-mark" color="#2272ff" size="28"></u-icon>
				<!-- <i class="iconfont icon-tijiao"></i> -->
			</view>
		</view>
		<view class="btn-wrap fixed flex flex-xc" v-if="selectType == 'area'">
			<button class="btn-submit" @click="goBack('confirm')">
				确定
			</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				/*
				areaList: [{
					id: 1,
					name: '北京市',
					children: [{
						id: 11,
						name: '北京市辖区',
					}, {
						id: 12,
						name: '县',
					}]
				}, {
					id: 2,
					name: '田径市',
					children: [{
						id: 21,
						name: '田径辖区',
					}, {
						id: 22,
						name: '县',
					}]
				}, {
					id: 2,
					name: '田径市',
					children: [{
						id: 21,
						name: '田径辖区',
					}, {
						id: 22,
						name: '县',
					}]
				}, {
					id: 2,
					name: '田径市',
					children: [{
						id: 21,
						name: '田径辖区',
					}, {
						id: 22,
						name: '县',
					}]
				}, {
					id: 2,
					name: '田径市',
					children: [{
						id: 21,
						name: '田径辖区',
					}, {
						id: 22,
						name: '县',
					}]
				}, {
					id: 2,
					name: '田径市',
					children: [{
						id: 21,
						name: '田径辖区',
					}, {
						id: 22,
						name: '县',
					}]
				}, {
					id: 2,
					name: '田径市',
					children: [{
						id: 21,
						name: '田径辖区',
					}, {
						id: 22,
						name: '县',
					}]
				}, {
					id: 2,
					name: '田径市',
					children: [{
						id: 21,
						name: '田径辖区',
					}, {
						id: 22,
						name: '县',
					}]
				}, {
					id: 2,
					name: '田径市',
					children: [{
						id: 21,
						name: '田径辖区',
					}, {
						id: 22,
						name: '县',
					}]
				}, {
					id: 2,
					name: '田径市',
					children: [{
						id: 21,
						name: '田径辖区',
					}, {
						id: 22,
						name: '县',
					}]
				}, {
					id: 2,
					name: '田径市',
					children: [{
						id: 21,
						name: '田径辖区',
					}, {
						id: 22,
						name: '县',
					}]
				}],
				*/
			   areaList:[],
				workingAgeList: [],
				selected: {
					areaIds: [],
					areaTxts: [],
					working_age: '',
					workingAgeTxt:''
				},
				currentIndex: 0,
				selectedArea: [],
				selectType: '',
				protocolContent: ''
			}
		},
		computed: {
			cityList() {
				const areaList = this.areaList
				const currentIndex = this.currentIndex
				return areaList[currentIndex] && areaList[currentIndex].children || []
			}
		},
		onLoad(option) {
			this.initPage(option)
			this.initworkingAgeList();
			this.getareaList()
		},
		methods: {
			goBack(type) {
				if (type) {
					this.setPrevPageData()
				}
				uni.navigateBack({
					delta: 1
				});
			},
			initPage(option) {
				const selectType = option.selectType
				this.selectType = selectType
				let title = ''
				let pages = getCurrentPages()
				if (pages.length < 2) {
					return
				}
				let prevVue = pages[pages.length - 2].$vm
				if (selectType === 'area') {
					this.selected = {
						areaIds: prevVue.baseInfo.service_area,
						areaTxts: prevVue.areaTxts
					}
					title = '接单城市'
				} else if (selectType === 'working_age') {
					this.selected = {
						working_age: prevVue.baseInfo.working_age,
						workingAgeTxt: prevVue.workingAgeTxt
					}
					title = '电工工龄'
				}
				uni.setNavigationBarTitle({
					title
				});

			},
			setPrevPageData() {
				let pages = getCurrentPages()
				if (pages.length < 2) {
					return
				}
				let selected = this.selected
				let prevVue = pages[pages.length - 2].$vm
				const selectType = this.selectType
				if (prevVue.baseInfo) {
					if (selectType === 'area') {
						prevVue.baseInfo.service_area = selected.areaIds
						prevVue.areaTxts = selected.areaTxts
					} else if (selectType === 'working_age') {
						prevVue.baseInfo.working_age = selected.working_age
						prevVue.workingAgeTxt = selected.workingAgeTxt
					}
				}
			},
			initworkingAgeList() {
				let list = [{
					value: 0,
					name: "1年内",
				}, ];
				for (let i = 1; i < 10; i++) {
					const item = {
						value: i,
						name: i + "年",
					};
					list.push(item);
				}
				list.push({
					value: 10,
					name: "10年+",
				});
				this.workingAgeList = list;
			},
			async getareaList(code, level, provinceIndex) {
				provinceIndex = provinceIndex || 0
				this.currentIndex = provinceIndex
				let areaList = this.areaList
				if (level) {
					if (areaList[provinceIndex].children) {
						return
					}
				}
				uni.showLoading({
					title: '加载中'
				});
				
				// if(!level){
				// 	level = 0
				// }
				
				let params = {
					type: '充电桩安装',
					level: level || 0,
					//level: level,
					code: code
				}
				const res = await this.$u.api.getSettleArea(params)
				uni.hideLoading()
				if (res.code != 200) {
					uni.showToast({
						title:res.message,
						icon:'none'
					})
					return;
				}
				
				if (!res) {
					return;
				}
			
				if (!level) {
					// this.areaList = res.data
					// const parmas = [res.data[0].id, 1]
					this.areaList = res.data
					const parmas = [res.data[0].id, 1]
					this.getareaList(...parmas)
				} else {
					// this.$set(areaList[provinceIndex], 'children', res.data)
					this.$set(areaList[provinceIndex], 'children', res.data)
				}
			},
			
			/*
			getNewAreaList:function (code, level, provinceIndex) {
				
				provinceIndex = provinceIndex || 0
				this.currentIndex = provinceIndex
				let areaList = this.areaList
				if (level) {
					if (areaList[provinceIndex].children) {
						return
					}
				}
				uni.showLoading({
					title: '加载中'
				});
				
				
				let params = {
					type: '',
					level: level || 0,
					code: code
				}
				
				
				let that = this
				uni.request({
					url: 'http://rest-u.yunya.com/v1/h5/settled/area',
					+ '?type=充电桩安装' 
					+ '&level=' + level|| 0
					+ "&code=" + code,
					method: 'GET',
					data: {
					   
					},
					success: (res) => {
						uni.hideLoading()
						console.log('获取 章节 成功')
						console.log(res)
						
						if(res.statusCode==401){
							uni.navigateTo({
								url:'/pages/login/index'
							})
							return
						}
						
						if(res.statusCode==200){
							
							this.dataList = res.data
							//this.getFirstSectionId()
							
							
							console.log('statusCode=200')
							console.log('获取 章节 成功 this.dataList')
							console.log(this.dataList)
						
						}else{
							uni.showToast({
								icon:'none',
								title:res.data.message
							})
							
							
						}
						
						
					},
					fail: (e) => {
						uni.hideLoading()
						uni.showToast({
							icon:'none',
							title:'获取章节失败'
						})
					//	console.log('获取下单列表 失败')
					//	console.log(e)
					}
				})
				
				
				
			},
			*/
			
			selectAge(item) {
				this.selected.working_age = item.value
				this.selected.workingAgeTxt = item.name
				this.goBack('confirm')
			},
			selectAllarea(idx){
				const allChildren = this.areaList[this.currentIndex]
				
			},
			selectArea(areaItem) {
				const code = areaItem.id
				const selected = this.selected
				const idx = selected.areaIds.indexOf(code)
				const currentProvince = this.areaList[this.currentIndex]
				let txt = currentProvince.name + '-' + areaItem.name
				if (idx >= 0) {
					selected.areaTxts.splice(idx, 1)
					selected.areaIds.splice(idx, 1)
				} else {
					selected.areaIds.push(code)
					selected.areaTxts.push(txt)
				}
				this.selected = selected
			},
		},
	}
</script>

<style lang="scss" scoped>
	.content {
		background-color: #F3F3F3;
	}
	.nav-item,
	.age-item {
		position: relative;
		padding: 22rpx 0;
		border-bottom: 2rpx solid #f3f3f3;
		text-align: center;
		line-height: 42rpx;
		font-size: 30rpx;
		color: #333;
		background: #fff;

		&:last-child {
			border: none;
		}
	}

	.area-nav {
		display: flex;
		padding: 30rpx 0;
		height: calc(100vh - 120rpx);
		overflow: hidden;

		.nav-left {
			width: 375rpx;
			height: 100%;
			overflow: auto;

			// overflow: hidden;
			.nav-item {
				border-right: 2rpx solid #f3f3f3;
			}

			.nav-item.active {
				background-color: #ededed;
			}
		}

		.nav-right {
			height: 100%;
			overflow-x: hidden;
			overflow: auto;
			width: 375rpx;

			.nav-item {
				.iconfont {
					display: none;
				}
			}

			.nav-item.active {
				color: #2272ff;

				.iconfont {
					position: absolute;
					display: inline-block;
					margin-left: 46rpx;
					color: #2272ff;
				}
			}
		}
	}

	.age-box {
		padding-top: 40rpx;
		// height: calc(100vh - 180rpx);
		overflow: auto;
		margin-bottom: 44rpx;
		.age-item {
			position: relative;
		}

		.age-item .iconfont {
			display: none;
		}

		.age-item.active {
			color: #2272ff;

			.iconfont {
				position: absolute;
				display: inline-block;
				margin-left: 54rpx;
				color: #2272ff;
			}
		}
	}

	.seat {
		padding-bottom: 144rpx;
	}

	/*提交按钮*/
	.btn-wrap {
		position: fixed;
		// margin: px2rem(36);
		left: 0;
		right: 0;
		bottom: 0;
		padding: 30rpx 0;
		background: #f3f3f3;

		.btn-submit {
			width: 600rpx;
			// left: 5%;
			// bottom: px2rem(36);
			height: 104rpx;
			line-height: 104rpx;
			border-radius: 52rpx;
			background: #2272ff;
			font-size: 32rpx;
			color: #fff;

			&:disabled {
				border: 2rpx solid #999;
				background-color: #f3f3f3;
				color: #999;
			}
		}
	}

	/* 	.back_view{
		background-color: #FFFFFF;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		display: flex;
		flex-direction: column;
	}
	 */
</style>
