<template>
	<div class="ts-area-picker-container">
		<input class="ts-area-picker-value-displayer" placeholder="请选择收货地址" @focus="initAddress" v-model="displayValue"></input>
		<input type="hidden" :value="returnValue">
		
		<div class="ts-area-picker-desktop" v-if="show">
			<div class="ts-area-picker-tmp-value">
				<ul>
					<li class="active" @click="switchTab(0)">{{ returnValueArr[0]?returnValueArr[0].name:'请选择' }}</li>
					<li @click="switchTab(1)">{{ returnValueArr[1]?returnValueArr[1].name:'请选择' }}</li>
					<li @click="switchTab(2)">{{ returnValueArr[2]?returnValueArr[2].name:'请选择' }}</li>
				</ul>
				<div class="close" @click="hideAddress"></div>
			</div>
			<div class="ts-area-picker-values">
				<ul>
					<li v-for="(item, index) in curDisplayingCol" :key="item.id" @click="pickValue(item.id,item.name)" v-bind:class="{ active:(returnValueArr[curDisplayingColIndex]?returnValueArr[curDisplayingColIndex].id==item.id:false) }">
						{{ item.name }}
					</li>
				</ul>
			</div>
		</div>
		
		<div class="ts-area-picker-mobile ts-mask" v-if="show">
			<div class="ts-mask-bg"></div>
			<van-picker
				show-toolbar 
				title="选择地区"
				:columns="columns"
				value-key="name"
				@confirm="onConfirm"
				@cancel="onCancel"
				@change="onChange"
				class="ts-area-picker-mobile-component"
			/>
		</div>
	</div>
</template>
<script>
export default {
	props:["defaultValues"],
	data(){
		return{
			animationTimer:undefined,
			displayValue:"",
			returnValue:"",
			returnValueArr:[],
			show:false,
			columns:[
				{
					values:[{id:"001",name:"省份1"},{id:"002",name:"省份2"}],
					className:'col1'
				},
				{
					values:[{id:"001-001",name:"省份1-城市1"},{id:"001-002",name:"省份1-城市2"},{id:"002-001",name:"省份2-城市1"},{id:"002-002",name:"省份2-城市2"}],
					className:'col2'
				},
				{
					values:[{id:"001-001-001",name:"省份1-城市1-区1"},{id:"001-002-002",name:"省份1-城市2-区2"},{id:"002-001-001",name:"省份2-城市1-区1"},{id:"002-002-002",name:"省份2-城市2-区2"}],
					className:'col3'
				}
			],
			curDisplayingColIndex:0,
			curDisplayingCol:[]
		}
	},
	methods:{
		initAddress(){
			this.show=true;
			//Initilizing
			
			//mobile
			let self=this;
			// defaultValues : array[{id:"_ID_IN_columns_of_province",name:"_NAME_IN_columns"},{id:"_ID_IN_columns_of_city",name:"_NAME_IN_columns"},{id:"_ID_IN_columns_of_area",name:"_NAME_IN_columns"}]
			let defaultValues = [{id:this.columns[0].values[0].id, name:this.columns[0].values[0].name},{id:this.columns[1].values[0].id, name:this.columns[1].values[0].name},{id:this.columns[2].values[0].id, name:this.columns[2].values[0].name}];
			if(this.defaultValues)
				defaultValues=this.defaultValues;
			this.$children.forEach(function(vueComponent){
				if(vueComponent._name=="<VanPicker>")
				{
					self.onChange(vueComponent,defaultValues); //Important
				}
			});
			//mobile end
			
			//PC
			this.switchTab(this.curDisplayingColIndex);
			//PC end
			//Initilizing end
		},
		pickValue(pickId,pickName){
			let areaObj={id:pickId,name:pickName};
			console.log(pickId,pickName);
			this.returnValueArr[this.curDisplayingColIndex]=areaObj;
			this.validatePickedValues();
			
			//Submit to value displaying
			let tmpDisplayValueEle = document.querySelectorAll(".ts-area-picker-tmp-value li");
			tmpDisplayValueEle[this.curDisplayingColIndex].innerText=this.returnValueArr[this.curDisplayingColIndex].name;
			//Submit to value displaying end
			
			//Moving to next tab
			this.curDisplayingColIndex++;
			if(this.curDisplayingColIndex>2 || this.curDisplayingColIndex<0)
				this.curDisplayingColIndex = 0;
			if(this.returnValueArr.length>=3)
			{
				this.onConfirm(this.returnValueArr);
			}
			else
				this.switchTab(this.curDisplayingColIndex);
			//Moving to next tab end
		},
		// For van picker
		onChange(picker,values) { //values = [{id:this.columns[0].id, name:this.columns[0].name},{id:this.columns[1].id, name:this.columns[1].name},{id:this.columns[3].id, name:this.columns[3].name}];
			//Support single choice only , index = 0 province, index = 1 city, index = 2 area
			let curSelection={'province':'','city':'','area':''};
			// console.log(picker,values);
			this.$emit('getmenu',values)
			this.$emit("closeDialog");
			if(!values)
				return;
			let _self=this;
			values.forEach(function(ele,index){
				switch(index){
					case 0:
						//Handling Province
						curSelection.province=ele.id;
						//Handling Province end
						break;
					case 1:
						//Handling City
						let matchedCity=_self.fitlerValuesInArray(curSelection.province,_self.columns[index].values);
						picker.setColumnValues(index,matchedCity);
						curSelection.city=matchedCity[0].id;
						//Handling City end
						break;
					default:
						//Handling Area
						let matchedArea=_self.fitlerValuesInArray(curSelection.city,_self.columns[index].values);
						picker.setColumnValues(index,matchedArea);
						curSelection.area=matchedArea[0].id;
						//Handling Area end
						break;
				}
				
			});
		},
		validatePickedValues(){
			let _self=this;
			let provinceId='';
			let areaId=undefined;
			let validatedIndex=-1;
			this.returnValueArr.forEach(function(obj,index){
				switch(index){
					case 0:
						//Skipping province checking
						provinceId = obj.id;
						validatedIndex = 0;
						break;
					case 1:
						//Checking City
						if(obj.id.indexOf(provinceId)<0)
						{
							console.log('500 : error via checking validatePickedValues');
							_self.returnValueArr.splice(index,1);
						}
						else
						{
							areaId = _self.returnValueArr[index].id;
							validatedIndex=index;
						}
						//Checking City end
						break;
					case 2:
						//Checking Area
						if(areaId && obj.id.indexOf(areaId)<0)
						{
							console.log('501 : error via checking validatePickedValues');
							_self.returnValueArr.splice(index,1);
						}
						else{
							validatedIndex=index;
						}
						//Checking Area end
						break;
					default:
						break;
				}
			});
			return validatedIndex;
		},
		onConfirm(values) {
			//Get columns structure array here : values
			let _self=this;
			let returnVal=[];
			let tmpArr = [];
			this.displayValue='';
			values.forEach(function(ele,index){
				_self.displayValue = _self.displayValue + ele.name + " ";
				tmpArr.push(ele.id);
				returnVal.push(ele);
			});
			this.returnValueArr=returnVal;
			this.returnValue=tmpArr.join("|");
			this.hideAddress();
		},
		onCancel() {
			  
		},
		fitlerValuesInArray(stringStartWith,dataColArea){
			let result=[];
			dataColArea.forEach(function(ele){
				if(ele.id.indexOf(stringStartWith)===0)
				{
					result.push(ele);
				}
			});
			return result;
		},
		popAddress() {
			this.show=true;
		},
		hideAddress() {
			this.show=false;
		},
		switchTab(tabIndex){
			let areaTabLi=document.querySelectorAll(".ts-area-picker-tmp-value li");
			if(tabIndex==0){
				this.curDisplayingCol = this.columns[tabIndex].values;
			}
			let lastValidatedTabIndex=this.validatePickedValues();
			if(lastValidatedTabIndex<(tabIndex-1))
			{
				//TODO show warning here
				let errorEle=document.querySelector(".ts-area-picker-values");
				errorEle.classList.add("error");
				let _self = this;
				if(!this.animationTimer)
				{
					this.animationTimer = setTimeout(function(){
						errorEle.classList.remove("error");
						clearTimeout(_self.animationTimer);
						_self.animationTimer=undefined;
					},2000);
				}
				tabIndex=lastValidatedTabIndex+1;
			}
			this.curDisplayingColIndex=tabIndex;
			let filteredData=this.columns[tabIndex].values;
			if(tabIndex>0 && this.returnValueArr[tabIndex-1]) //pass
			{
				let pickedId = this.returnValueArr[tabIndex-1].id;
				filteredData=this.fitlerValuesInArray(pickedId,this.columns[tabIndex].values);
			}
			this.curDisplayingCol=filteredData;
			
			areaTabLi.forEach(function(ele,index){
				if(tabIndex==index){
					ele.classList.add('active');
				}
				else
					ele.classList.remove('active');
			})
			
		}
	},
	mounted(){

	},
	components:{

	},
}
</script>

<style lang="less" scoped>
	.ts-area-picker-container{display:inline-block;}
	.ts-area-picker-value-displayer{
		width:40rem;
	}
	.ts-area-picker-tmp-value{
		border-bottom:1px solid #D7D7D7;
		padding:0 2.5rem;
		box-sizing: border-box;
		position:relative;
		ul{
			padding:0;
			margin:0;
			display: flex;
			li{
				display:inline-block;
				color:#333333;
				width:3.125rem;
				padding: 1.25rem 0;
				margin-right:4rem;
				cursor: pointer;
				&.active{
					color:#E2001A;
					border-bottom:4px solid #E2001A;
				}
			}
		}
		.close{
			position:absolute;
			position: absolute;
			right: 3rem;
			top: 1.5rem;
			cursor: pointer;
			&:before,&:after{
				background-color: #333;
			}
		}
	}
	.ts-area-picker-values{
		width:100%;
		height:100%;
		&.error{
			position:relative;
			width:100%;
			height:78%;
			&:after{
				content: " ";
				position:absolute;
				width:100%;
				height:100%;
				left:0;
				top:0;
				animation-name: flash-error;
				animation-iteration-count: 2;
				animation-duration: .5s;
				animation-direction: forwards;
			}
		}
		ul{
			padding:1rem 2.5rem 2rem 2.5rem;
			margin:0;
		}
		li{
			display:inline-block;
			margin-top:1rem;
			margin-right:3.875rem;
			color:#333;
			cursor:pointer;
			&.nth-child(6n){
				margin-right:0;
			}
			&.active{
				color:#E2001A;
				border-bottom:4px solid #E2001A;
			}
		}
	}
	/deep/.van-picker__confirm,.close{
		text-indent:-999rem;
		position:relative;
		&:after{
			transform: rotate(45deg);
		}
		&:before{
			transform: rotate(-45deg);
		}
		&:before,
		&:after {
		    position: absolute;
		    content: ' ';
		    background-color: #E1001A;
		    left: 1.25rem;
			bottom:-0.875rem;
		    width: 1px;
		    height: 1.375rem;
		}
	}
	@media screen and (max-width:768px)
	{
		/deep/.van-picker__cancel
		{
			display:none;
		}
		/deep/.van-picker__title{
			font-size:1.375rem;
			color:#E1001A;
		}
		/deep/.van-picker__toolbar{
			padding:1.5rem 1.25rem;
			box-sizing: border-box;
			border-bottom:1px solid #D8D8D8;
		}
		/deep/.van-picker__confirm{
			display:block;
		}
		.ts-area-picker-mobile{
			display:flex;
			flex-direction: column;
			justify-content: flex-end;
			.ts-area-picker-mobile-component{
				height:40vh;
				width:100%;
			}
		}
		.ts-area-picker-desktop{
			display:none;
		}
	}
	@media screen and (min-width:769px)
	{
		/deep/.van-picker__confirm{
			display:none;
		}
		.ts-area-picker-mobile{
			display:none;
		}
		.ts-area-picker-desktop{
			display:block;
			width:100%;
			height:19.25rem;
			border:1px solid #808285;
			overflow:hidden;
		}
		.ts-area-picker-values{
			
		}
	}
	@keyframes flash-error
	{
		from {
			opacity:0;
			background-color:#fff;
		}
		to {
			opacity:.3;
			background-color:#E2001A;
		}
	}
</style>