lipin/components/wPicker/w-picker.vue

<template>
	<view class="w-picker">
		<view class="mask" :class="{'show':showPicker}" @tap="maskTap" @touchmove.stop.prevent catchtouchmove="true"></view>
		<view class="w-picker-cnt" :class="{'show':showPicker}">
			<view class="w-picker-hd" @touchmove.stop.prevent catchtouchmove="true">
			  <view class="w-picker-btn" @tap="pickerCancel">取消</view>
			  <view class="w-picker-btn" :style="{'color':themeColor}" @tap="pickerConfirm">确定</view>
			</view>
			<view class="w-picker-view" v-if="mode=='linkage'">
				<picker-view :indicator-style="itemHeight" :value="pickVal" @change="bindChange"  @touchstart="touchStart" @touchend="touchEnd">
					<picker-view-column v-for="(col,colIndex) in data" :key="colIndex">
						<view class="w-picker-item" v-for="(item,index) in col" :key="index">{{item.label}}</view>
					</picker-view-column>
				</picker-view>
			</view>
			<view class="w-picker-view" v-if="mode=='half'">
				<picker-view :indicator-style="itemHeight" :value="pickVal" @change="bindChange"  @touchstart="touchStart" @touchend="touchEnd">
					<picker-view-column>
						<view class="w-picker-item" v-for="(item,index) in data.years" :key="index">{{item}}年</view>
					</picker-view-column>
					<picker-view-column>
						<view class="w-picker-item" v-for="(item,index) in data.months" :key="index">{{item}}月</view>
					</picker-view-column>
					<picker-view-column>
						<view class="w-picker-item" v-for="(item,index) in data.days" :key="index">{{item}}日</view>
					</picker-view-column>
					<picker-view-column>
						<view class="w-picker-item" v-for="(item,index) in data.areas" :key="index">{{item.label}}</view>
					</picker-view-column>
				</picker-view>
			</view>
			<view class="w-picker-view" v-if="mode=='date'">
				<picker-view :indicator-style="itemHeight" :value="pickVal" @change="bindChange" @touchstart="touchStart" @touchend="touchEnd">
					<picker-view-column>
						<view class="w-picker-item" v-for="(item,index) in data.years" :key="index">{{item}}年</view>
					</picker-view-column>
					<picker-view-column>
						<view class="w-picker-item" v-for="(item,index) in data.months" :key="index">{{item}}月</view>
					</picker-view-column>
					<picker-view-column>
						<view class="w-picker-item" v-for="(item,index) in data.days" :key="index">{{item}}日</view>
					</picker-view-column>
				</picker-view>
			</view>
			<view class="w-picker-view" v-if="mode=='yearMonth'">
				<picker-view :indicator-style="itemHeight" :value="pickVal" @change="bindChange" @touchstart="touchStart" @touchend="touchEnd">
					<picker-view-column>
						<view class="w-picker-item" v-for="(item,index) in data.years" :key="index">{{item}}年</view>
					</picker-view-column>
					<picker-view-column>
						<view class="w-picker-item" v-for="(item,index) in data.months" :key="index">{{item}}月</view>
					</picker-view-column>
				</picker-view>
			</view>
			<view class="w-picker-view" v-if="mode=='dateTime'">
				<picker-view :indicator-style="itemHeight" :value="pickVal" @change="bindChange" @touchstart="touchStart" @touchend="touchEnd">
					<picker-view-column>
						<view class="w-picker-item" v-for="(item,index) in data.years" :key="index">{{item}}年</view>
					</picker-view-column>
					<picker-view-column>
						<view class="w-picker-item" v-for="(item,index) in data.months" :key="index">{{item}}月</view>
					</picker-view-column>
					<picker-view-column >
						<view class="w-picker-item" v-for="(item,index) in data.days" :key="index">{{item}}日</view>
					</picker-view-column>
					<picker-view-column>
						<view class="w-picker-item" v-for="(item,index) in data.hours" :key="index">{{item}}时</view>
					</picker-view-column>
					<picker-view-column>
						<view class="w-picker-item" v-for="(item,index) in data.minutes" :key="index">{{item}}分</view>
					</picker-view-column>
					<picker-view-column v-if="hasSecond">
						<view class="w-picker-item" v-for="(item,index) in data.seconds" :key="index">{{item}}秒</view>
					</picker-view-column>
				</picker-view>
			</view>
			<view class="w-picker-view" v-if="mode=='range'">
				<picker-view :indicator-style="itemHeight" :value="pickVal" @change="bindChange" @touchstart="touchStart" @touchend="touchEnd">
					<picker-view-column>
						<view class="w-picker-item" v-for="(item,index) in data.fyears" :key="index">{{item}}</view>
					</picker-view-column>
					<picker-view-column>
						<view class="w-picker-item" v-for="(item,index) in data.fmonths" :key="index">{{item}}</view>
					</picker-view-column>
					<picker-view-column>
						<view class="w-picker-item" v-for="(item,index) in data.fdays" :key="index">{{item}}</view>
					</picker-view-column>
					<picker-view-column>
						<view class="w-picker-item">-</view>
					</picker-view-column>
					<picker-view-column>
						<view class="w-picker-item" v-for="(item,index) in data.tyears" :key="index">{{item}}</view>
					</picker-view-column>
					<picker-view-column>
						<view class="w-picker-item" v-for="(item,index) in data.tmonths" :key="index">{{item}}</view>
					</picker-view-column>
					<picker-view-column>
						<view class="w-picker-item" v-for="(item,index) in data.tdays" :key="index">{{item}}</view>
					</picker-view-column>
				</picker-view>
			</view>
			<view class="w-picker-view" v-if="mode=='time'">
				<picker-view :indicator-style="itemHeight" :value="pickVal" @change="bindChange" @touchstart="touchStart" @touchend="touchEnd">
					<picker-view-column>
						<view class="w-picker-item" v-for="(item,index) in data.hours" :key="index">{{item}}时</view>
					</picker-view-column>
					<picker-view-column>
						<view class="w-picker-item" v-for="(item,index) in data.minutes" :key="index">{{item}}分</view>
					</picker-view-column>
					<picker-view-column v-if="hasSecond">
						<view class="w-picker-item" v-for="(item,index) in data.seconds" :key="index">{{item}}秒</view>
					</picker-view-column>
				</picker-view>
			</view>
			<view class="w-picker-view" v-if="mode=='region'">
				<picker-view :indicator-style="itemHeight" :value="pickVal" @change="bindChange" @touchstart="touchStart" @touchend="touchEnd">
					<picker-view-column>
						<view class="w-picker-item" v-for="(item,index) in data.provinces" :key="index">{{item.label}}</view>
					</picker-view-column>
					<picker-view-column>
						<view class="w-picker-item" v-for="(item,index) in data.citys" :key="index">{{item.label}}</view>
					</picker-view-column>
					<picker-view-column v-if="!hideArea">
						<view class="w-picker-item" v-for="(item,index) in data.areas" :key="index">{{item.label}}</view>
					</picker-view-column>
				</picker-view>
			</view>
			<view class="w-picker-view" v-if="mode=='selector'">
				<picker-view :indicator-style="itemHeight" :value="pickVal" @change="bindChange" @touchstart="touchStart" @touchend="touchEnd">
					<picker-view-column>
						<view class="w-picker-item" v-for="(item,index) in data" :key="index">{{item.label}}</view>
					</picker-view-column>
				</picker-view>
			</view>
			<view class="w-picker-view" v-if="mode=='limit'">
				<picker-view :indicator-style="itemHeight" :value="pickVal" @change="bindChange" @touchstart="touchStart" @touchend="touchEnd">
					<picker-view-column>
						<view class="w-picker-item" v-for="(item,index) in data.date" :key="index">{{item.label}}</view>
					</picker-view-column>
					<picker-view-column>
						<view class="w-picker-item" v-for="(item,index) in data.hours" :key="index">{{item.label}}时</view>
					</picker-view-column>
					<picker-view-column>
						<view class="w-picker-item" v-for="(item,index) in data.minutes" :key="index">{{item.label}}分</view>
					</picker-view-column>
				</picker-view>
			</view>
			<view class="w-picker-view" v-if="mode=='limitHour'">
				<picker-view :indicator-style="itemHeight" :value="pickVal" @change="bindChange" @touchstart="touchStart" @touchend="touchEnd">
					<picker-view-column>
						<view class="w-picker-item" v-for="(item,index) in data.date" :key="index">{{item.label}}</view>
					</picker-view-column>
					<picker-view-column>
						<view class="w-picker-item" v-for="(item,index) in data.areas" :key="index">{{item.label}}</view>
					</picker-view-column>
					<picker-view-column>
						<view class="w-picker-item" v-for="(item,index) in data.hours" :key="index">{{item.label}}时</view>
					</picker-view-column>
				</picker-view>
			</view>
		</view>
	</view>
</template>

<script>
	import provinces from './city-data/province.js';
	import citys from './city-data/city.js';
	import areas from './city-data/area.js';
	import initPicker from "./w-picker.js";
	function oneOf (value, validList) {
		for (let i = 0; i < validList.length; i++) {
		  if (value === validList[i]) {
			return true;
		  }
		}
		throw new Error('mode无效，请选择有效的mode!');
		return false;
	}
	export default {
		data() {
			return {
				result:[],
				data:{},
				checkArr:[],
				checkValue:[],
				pickVal:[],
				showPicker:false,
				resultStr:"",
				itemHeight:`height: ${uni.upx2px(88)}px;`,
				confirmFlag:true
			};
		},
		computed:{
			
		},
		props:{
			mode:{
				type:String,
				validator(mode){
					let modeList=['half','date', 'dateTime', 'yearMonth','time','region','selector','limit','limitHour','range','linkage'];//过滤无效mode;
					return oneOf(mode,modeList);
				},
				default(){
					return "date"
				}
			},
			themeColor:{
				type:String,
				default(){
					return "#0abd0a"
				}
			},
			startYear:{
				type:[String,Number],
				default(){
					return "1970"
				}
			},
			endYear:{
				type:[String,Number],
				default(){
					return new Date().getFullYear()+''
				}
			},
			defaultVal:{
				type:[Array,String],
				default:""
			},
			areaCode:{
				type:Array,
				default(){
					return null
				}
			},
			hideArea:{//隐藏省市区三级联动   地区列
				type:Boolean,
				default:false
			},
			step:{
				type:[String,Number],
				default:1
			},
			current:{
				type:Boolean,
				default:false
			},
			selectList:{
				type:Array,
				default(){
					return [];
				}
			},
			//以下参数仅对mode==limit有效
			dayStep:{
				type:[String,Number],
				default:7
			},
			startHour:{
				type:[String,Number],
				default:8
			},
			endHour:{
				type:[String,Number],
				default:20
			},
			minuteStep:{
				type:[String,Number],
				default:10
			},
			afterStep:{
				type:[String,Number],
				default:30
			},
			disabledAfter:{
				type:Boolean,
				default:false
			},
			linkList:{
				type:Array,
				default(){
					return []
				}
			},
			value:{
				type:Array,
				default(){
					return null
				}
			},
			level:{
				type:[Number,String],
				default:2
			},
			timeout:{
				type:Boolean,
				default:false
			},
			hasSecond:{
				type:Boolean,
				default:true
			}
		},
		watch:{
			mode(){
				this.initData();
			},
			selectList(){
				this.initData();
			},
			linkList(){
				this.initData();
			},
			defaultVal(val){
				this.initData();
				console.log(val)
			},
			areaCode(){
				this.initData();
			},
			value(){
				this.initData();
			}
		},
		methods:{
			touchStart(){
				if(this.timeout){
					this.confirmFlag=false;
				}
			},
			touchEnd(){
				if(this.timeout){
					setTimeout(()=>{
						this.confirmFlag=true;
					},500)
				}
			},
			getLinkageVal(value,flag){
				let dval=[];
				let list=this.linkList;
				let lev=this.level;
				let arr=value;
				let k=0;
				let checkArr=[];
				let checkValue=[];
				let resultStr="";
				let data=[];
				switch(lev){
					case 2:
						dval=[0,0];
						break;
					case 3:
						dval=[0,0,0];
						break;
				}
				const getData=(obj,key,str)=>{
					if(key<lev){
						data.push(obj);
						if(!arr){
							let item=obj[0];
							checkArr.push(item.label);
							checkValue.push(item.value);
							resultStr+=item.label;
							if(item.children){
								getData(item.children,key+=1);
							}
						}else{
							obj.map((v,j)=>{
								if(flag?v.value==arr[key]:v.label==arr[key]){
									dval[key]=j;
									checkArr.push(v.label);
									checkValue.push(v.value);
									resultStr+=v.label;
									if(v.children){
										getData(v.children,key+=1);
									}
								}
							});
						}
						return {
							data,
							dval,
							checkArr,
							checkValue,
							resultStr
						};
					}else{
						return false;
					}
				};
				return getData(list,k);
			},
			getRegionVal(value,useCode){
				let province=value[0];
				let city=value[1];
				let a=0,b=0,c=0,dval=[];
				let _this=this;
				provinces.map((v,k)=>{
					if(useCode?v.value==province:v.label==province){
						a=k;
					}
				})
				citys[a].map((v,k)=>{
					if(useCode?v.value==city:v.label==city){
						b=k;
					}
				})
				if(!_this.hideArea){
					let area=value[2];
					areas[a][b].map((v,k)=>{
						if(useCode?v.value==area:v.label==area){
							c=k;
						}
					})
					dval=[a,b,c];
				}else{
					dval=[a,b];
				}
				return dval;
			},
			useCurrent(){
				let aToday=new Date();
				let tYear=aToday.getFullYear().toString();
				let tMonth=this.formatNum(aToday.getMonth()+1).toString();
				let tDay=this.formatNum(aToday.getDate()).toString();
				let tHours=this.formatNum(aToday.getHours()).toString();
				let tMinutes=this.formatNum(aToday.getMinutes()).toString();
				let tSeconds=this.formatNum(aToday.getSeconds()).toString();
				if(this.current||!this.defaultVal){
					switch(this.mode){
						case "range":
							return [tYear+"-"+tMonth+"-"+tDay,tYear+"-"+tMonth+"-"+tDay];
							break;
						case "date":
							return tYear+"-"+tMonth+"-"+tDay;
							break;
						case "yearMonth":
							return tYear+"-"+tMonth;
							break;
						case "time":
							if(this.hasSecond){
								return tHours+":"+(Math.floor(tMinutes/this.step)*this.step).toString()+":"+tSeconds;
							}else{
								return tHours+":"+(Math.floor(tMinutes/this.step)*this.step).toString();
							}
							break;
						case "dateTime":
							if(this.hasSecond){
								return tYear+"-"+tMonth+"-"+tDay+" "+tHours+":"+(Math.floor(tMinutes/this.step)*this.step).toString()+":"+tSeconds;
							}else{
								return tYear+"-"+tMonth+"-"+tDay+" "+tHours+":"+(Math.floor(tMinutes/this.step)*this.step).toString();
							}
							break;
						default :
							return tYear+"-"+tMonth+"-"+tDay+" "+tHours+":"+(Math.floor(tMinutes/this.step)*this.step).toString()+":"+tSeconds;
							break;
					}
				}else{
					return this.defaultVal;
				}
			},
			formatNum(num){
				return num<10?'0'+num:num+'';
			},
			maskTap(){
				this.$emit("cancel",{
					checkArr:this.checkArr,
					defaultVal:this.pickVal
				});
				this.showPicker = false;
			},
			show(){
				this.showPicker = true;
			},
			hide(){
				this.showPicker = false;
			},
			pickerCancel(){
				this.$emit("cancel",{
					checkArr:this.checkArr,
					defaultVal:this.pickVal
				});
				this.showPicker = false;
			},
			pickerConfirm(e){
				if(!this.confirmFlag){
					return;
				}
				switch(this.mode){
					case "range":
						let checkArr=this.checkArr;
						let fDateTime=new Date(checkArr[0],checkArr[1],checkArr[2]);
						let tDateTime=new Date(checkArr[3],checkArr[4],checkArr[5]);
						let dVal=this.pickVal;
						if(fDateTime>tDateTime){
							this.checkArr=[checkArr[3],checkArr[4],checkArr[5],checkArr[0],checkArr[1],checkArr[2]];
							this.pickVal=[dVal[4],dVal[5],dVal[6],0,dVal[0],dVal[1],dVal[2]];
							this.$emit("confirm",{
								checkArr:[...this.checkArr],
								from:checkArr[3]+"-"+checkArr[4]+"-"+checkArr[5],
								to:checkArr[0]+"-"+checkArr[1]+"-"+checkArr[2],
								defaultVal:[...this.pickVal],
								result:this.resultStr
							});
						}else{
							this.$emit("confirm",{
								checkArr:[...this.checkArr],
								from:checkArr[0]+"-"+checkArr[1]+"-"+checkArr[2],
								to:checkArr[3]+"-"+checkArr[4]+"-"+checkArr[5],
								defaultVal:[...this.pickVal],
								result:this.resultStr
							});
						}
						break;
					case "limit":
						let aTime=new Date().getTime();
						let bTime=new Date(this.resultStr.replace(/-/g,'/')).getTime();
						if(aTime>bTime){
							uni.showModal({
								title:"提示",
								content:"选择时间必须大于当前时间",
								confirmColor:this.themeColor
							});
							return;
						}
						this.$emit("confirm",{
							checkArr:[...this.checkArr],
							defaultVal:[...this.pickVal],
							result:this.resultStr
						});
						break;
					case "region":
					case "linkage":
						this.$emit("confirm",{
							checkArr:[...this.checkArr],
							checkValue:[...this.checkValue],
							defaultVal:[...this.pickVal],
							result:this.resultStr
						});
						break;
					case "selector":
						this.$emit("confirm",{
							checkArr:this.checkArr,
							defaultVal:[...this.pickVal],
							result:this.resultStr
						});
						break;
					default:
						this.$emit("confirm",{
							checkArr:[this.checkArr],
							defaultVal:[...this.pickVal],
							result:this.resultStr
						});
						break;
				}
				this.showPicker = false;
			},
			bindChange(val){
				let _this=this;
				let arr=val.detail.value;
				let year="",month="",day="",hour="",minute="",second="",note=[],province,city,area;
				let checkArr=_this.checkArr;
				let days=[],months=[],endYears=[],endMonths=[],endDays=[],startDays=[];
				let mode=_this.mode;
				let col1,col2,col3,d,a,h,m;
				let xDate=new Date().getTime();
				switch(mode){
					case "limitHour":
						col1=_this.data.date[arr[0]];
						col2=_this.data.areas[arr[1]];
						col3=_this.data.hours[arr[2]];
						if(col1.value!=checkArr[0].value){
							arr[1]=0;
							arr[2]=0;
							let areas=initPicker.limitHour.initAreas(col1);
							_this.data.areas=areas;
							let hours=initPicker.limitHour.initHours(col1,_this.data.areas[arr[1]]);
							_this.data.hours=hours;
						};
						if(col2.value!=checkArr[1].value){
							arr[2]=0;
							let hours=initPicker.limitHour.initHours(col1,_this.data.areas[arr[1]]);
							_this.data.hours=hours;
						};
						d=_this.data.date[arr[0]]||_this.data.date[_this.data.date.length-1];
						a=_this.data.areas[arr[1]]||_this.data.areas[_this.data.areas.length-1];
						h=_this.data.hours[arr[2]]||_this.data.hours[_this.data.hours.length-1];
						_this.checkArr=[d,a,h];
						_this.resultStr=`${d.value+' '+a.label+' '+h.label+"时"}`;
						break;
					case "limit":
						col1=_this.data.date[arr[0]];
						col2=_this.data.hours[arr[1]];
						if(col1.value!=checkArr[0].value){
							let hours=initPicker.limit.initHours(_this.startHour,_this.endHour,_this.minuteStep,_this.afterStep,col1.value);
							let minutes=initPicker.limit.initMinutes(_this.startHour,_this.endHour,_this.minuteStep,_this.afterStep,col1.value,col2.value);
							_this.data.hours=hours;
							_this.data.minutes=minutes;
						};
						if(col2.value!=checkArr[1].value){
							let minutes=initPicker.limit.initMinutes(_this.startHour,_this.endHour,_this.minuteStep,_this.afterStep,col1.value,col2.value);
							_this.data.minutes=minutes;
						};
						d=_this.data.date[arr[0]]||_this.data.date[_this.data.date.length-1];
						h=_this.data.hours[arr[1]]||_this.data.hours[_this.data.hours.length-1];
						m=_this.data.minutes[arr[2]]||_this.data.minutes[_this.data.minutes.length-1];
						_this.checkArr=[d,h,m];
						_this.resultStr=`${d.value+' '+h.value+':'+m.value+":"+"00"}`;
						break;
					case "range":
						let fyear=_this.data.fyears[arr[0]]||_this.data.fyears[_this.data.fyears.length-1];
						let fmonth=_this.data.fmonths[arr[1]]||_this.data.fmonths[_this.data.fmonths.length-1];
						let fday=_this.data.fdays[arr[2]]||_this.data.fdays[_this.data.fdays.length-1];
						let tyear=_this.data.tyears[arr[4]]||_this.data.tyears[_this.data.tyears.length-1];
						let tmonth=_this.data.tmonths[arr[5]]||_this.data.tmonths[_this.data.tmonths.length-1];
						let tday=_this.data.tdays[arr[6]]||_this.data.tdays[_this.data.tdays.length-1];
						if(fyear!=checkArr[0]){
							arr[4]=0;
							arr[5]=0;
							arr[6]=0;
							startDays=initPicker.range.initStartDays(fyear,fmonth);
							endYears=initPicker.range.initEndYears(fyear,_this.startYear,_this.endYear);
							endMonths=initPicker.range.initEndMonths(fmonth);
							endDays=initPicker.range.initEndDays(fyear,fmonth,fday,tyear,tmonth);
							_this.data.fdays=startDays;
							_this.data.tyears=endYears;
							_this.data.tmonths=endMonths;
							_this.data.tdays=endDays;
							tyear=_this.data.tyears[0];
							checkArr[3]=_this.data.tyears[0];
							tmonth=_this.data.tmonths[0];
							checkArr[4]=_this.data.tmonths[0];
							tday=_this.data.tdays[0];
							checkArr[5]=_this.data.tdays[0];
						};
						if(fmonth!=checkArr[1]){
							arr[4]=0;
							arr[5]=0;
							arr[6]=0;
							startDays=initPicker.range.initStartDays(fyear,fmonth);
							endYears=initPicker.range.initEndYears(fyear,_this.startYear,_this.endYear);
							endMonths=initPicker.range.initEndMonths(fmonth);
							endDays=initPicker.range.initEndDays(fyear,fmonth,fday,tyear,tmonth);
							_this.data.fdays=startDays;
							_this.data.tyears=endYears;
							_this.data.tmonths=endMonths;
							_this.data.tdays=endDays;
							tyear=_this.data.tyears[0];
							checkArr[3]=_this.data.tyears[0];
							tmonth=_this.data.tmonths[0];
							checkArr[4]=_this.data.tmonths[0];
							tday=_this.data.tdays[0];
							checkArr[5]=_this.data.tdays[0];
						};
						if(fday!=checkArr[2]){
							arr[4]=0;
							arr[5]=0;
							arr[6]=0;
							endYears=initPicker.range.initEndYears(fyear,_this.startYear,_this.endYear);
							endMonths=initPicker.range.initEndMonths(fmonth);
							endDays=initPicker.range.initEndDays(fyear,fmonth,fday,tyear,tmonth);
							_this.data.tyears=endYears;
							_this.data.tmonths=endMonths;
							_this.data.tdays=endDays;
							tyear=_this.data.tyears[0];
							checkArr[3]=_this.data.tyears[0];
							tmonth=_this.data.tmonths[0];
							checkArr[4]=_this.data.tmonths[0];
							tday=_this.data.tdays[0];
							checkArr[5]=_this.data.tdays[0];
						};
						if(tyear!=checkArr[3]){
							arr[5]=0;
							arr[6]=0;
							endMonths=initPicker.range.initToMonths(fyear,fmonth,fday,tyear);
							endDays=initPicker.range.initEndDays(fyear,fmonth,fday,tyear,tmonth);
							_this.data.tmonths=endMonths;
							_this.data.tdays=endDays;
							tmonth=_this.data.tmonths[0];
							checkArr[4]=_this.data.tmonths[0];
							tday=_this.data.tdays[0];
							checkArr[5]=_this.data.tdays[0];
						};
						if(tmonth!=checkArr[4]){
							arr[6]=0;
							endDays=initPicker.range.initToDays(fyear,fmonth,fday,tyear,tmonth);
							_this.data.tdays=endDays;
							tday=_this.data.tdays[0];
							checkArr[5]=_this.data.tdays[0];
						};
						_this.checkArr=[fyear,fmonth,fday,tyear,tmonth,tday];
						_this.resultStr=`${fyear+'-'+fmonth+'-'+fday+'至'+tyear+'-'+tmonth+'-'+tday}`;
						break;
					case "half":
						year=_this.data.years[arr[0]]||_this.data.years[_this.data.years.length-1];
						month=_this.data.months[arr[1]]||_this.data.months[_this.data.months.length-1];
						day=_this.data.days[arr[2]]||_this.data.days[_this.data.days.length-1];
						area=_this.data.areas[arr[3]]||_this.data.areas[_this.data.areas.length-1];
						if(year!=checkArr[0]){
							months=initPicker.date.initMonths(year,_this.disabledAfter);
							days=initPicker.date.initDays(year,month,_this.disabledAfter);
							if(_this.disabledAfter){
								arr[1]=arr[1]>(months.length-1)?months.length-1:arr[1];
								arr[2]=arr[2]>(days.length-1)?days.length-1:arr[2];
								month=_this.data.months[arr[1]]||_this.data.months[_this.data.months.length-1];
								day=_this.data.days[arr[2]]||_this.data.days[_this.data.days.length-1];
							}
							_this.data.days=days;
							_this.data.months=months;
						};
						if(month!=checkArr[1]){
							days=initPicker.date.initDays(year,month,_this.disabledAfter);
							arr[2]=arr[2]>(days.length-1)?days.length-1:arr[2];
							day=_this.data.days[arr[2]]||_this.data.days[_this.data.days.length-1];
							_this.data.days=days;
						};
						_this.checkArr=[year,month,day,area];
						_this.resultStr=`${year+'-'+month+'-'+day+area.label}`;
						break;		
					case "date":
						year=_this.data.years[arr[0]]||_this.data.years[_this.data.years.length-1];
						month=_this.data.months[arr[1]]||_this.data.months[_this.data.months.length-1];
						day=_this.data.days[arr[2]]||_this.data.days[_this.data.days.length-1];
						if(year!=checkArr[0]){
							months=initPicker.date.initMonths(year,_this.disabledAfter);
							days=initPicker.date.initDays(year,month,_this.disabledAfter);
							if(_this.disabledAfter){
								arr[1]=arr[1]>(months.length-1)?months.length-1:arr[1];
								arr[2]=arr[2]>(days.length-1)?days.length-1:arr[2];
								month=_this.data.months[arr[1]]||_this.data.months[_this.data.months.length-1];
								day=_this.data.days[arr[2]]||_this.data.days[_this.data.days.length-1];
							}
							_this.data.days=days;
							_this.data.months=months;
						};
						if(month!=checkArr[1]){
							days=initPicker.date.initDays(year,month,_this.disabledAfter);
							arr[2]=arr[2]>(days.length-1)?days.length-1:arr[2];
							day=_this.data.days[arr[2]]||_this.data.days[_this.data.days.length-1];
							_this.data.days=days;
						};
						_this.checkArr=[year,month,day];
						_this.resultStr=`${year+'-'+month+'-'+day}`;
						break;
					case "yearMonth":
						year=_this.data.years[arr[0]]||_this.data.years[_this.data.years.length-1];
						month=_this.data.months[arr[1]]||_this.data.months[_this.data.months.length-1];
						if(year!=checkArr[0]){
							if(_this.disabledAfter){
								arr[1]=arr[1]>(months.length-1)?months.length-1:arr[1];
								month=_this.data.months[arr[1]]||_this.data.months[_this.data.months.length-1];
							}
							months=initPicker.date.initMonths(year,_this.disabledAfter);
							_this.data.months=months;
						};
						_this.checkArr=[year,month];
						_this.resultStr=`${year+'-'+month}`;
						break;
					case "dateTime":
						year=_this.data.years[arr[0]]||_this.data.years[_this.data.years.length-1];
						month=_this.data.months[arr[1]]||_this.data.months[_this.data.months.length-1];
						day=_this.data.days[arr[2]]||_this.data.days[_this.data.days.length-1];
						hour=_this.data.hours[arr[3]]||_this.data.hours[_this.data.hours.length-1];
						minute=_this.data.minutes[arr[4]]||_this.data.minutes[_this.data.minutes.length-1];
						if(year!=checkArr[0]){
							arr[2]=0;
							days=initPicker.date.initDays(year,month);
							day=_this.data.days[arr[2]]||_this.data.days[_this.data.days.length-1];
							_this.data.days=days;
						};
						if(month!=checkArr[1]){
							arr[2]=0;
							days=initPicker.date.initDays(year,month);
							day=_this.data.days[arr[2]]||_this.data.days[_this.data.days.length-1];
							_this.data.days=days;
						};
						if(_this.hasSecond){
							second=_this.data.seconds[arr[5]]||_this.data.seconds[_this.data.seconds.length-1];
							_this.checkArr=[year,month,day,hour,minute,second];
							_this.resultStr=`${year+'-'+month+'-'+day+' '+hour+':'+minute+':'+second}`;
						}else{
							_this.checkArr=[year,month,day,hour,minute];
							_this.resultStr=`${year+'-'+month+'-'+day+' '+hour+':'+minute}`;
						}
						break;
					case "time":
						hour=_this.data.hours[arr[0]]||_this.data.hours[_this.data.hours.length-1];
						minute=_this.data.minutes[arr[1]]||_this.data.minutes[_this.data.minutes.length-1];
						if(_this.hasSecond){
							second=_this.data.seconds[arr[2]]||_this.data.seconds[_this.data.seconds.length-1];
							_this.checkArr=[hour,minute,second];
							_this.resultStr=`${hour+':'+minute+':'+second}`;
						}else{
							_this.checkArr=[hour,minute];
							_this.resultStr=`${hour+':'+minute}`;
						}
						break;
					case "linkage":
						let c1,c2,c3;
						let list=this.linkList;
						c1=_this.data[0][arr[0]]||_this.data[0][0];
						c2=_this.data[1][arr[1]]||_this.data[1][0];
						if(this.level==3){
							c3=_this.data[2][arr[2]]||_this.data[2][0];
							if(c1.label!=checkArr[0]){
								arr[1] = 0;
								arr[2] = 0;
								_this.data[1]=list[arr[0]].children;
								_this.data[2]=list[arr[0]].children[arr[1]].children;
								c2=_this.data[1][arr[1]]||_this.data[1][0];
								c3=_this.data[2][arr[2]]||_this.data[2][0];
							};
							if(c2.label!=checkArr[1]){
								arr[2] = 0;
								_this.data[2]=list[arr[0]].children[arr[1]].children;
								c3=_this.data[2][arr[2]]||_this.data[2][0];
							};
							_this.checkArr=[c1.label,c2.label,c3.label];
							_this.checkValue=[
								_this.data[0][arr[0]]?_this.data[0][arr[0]].value:_this.data[0][0].value,
								_this.data[1][arr[1]]?_this.data[1][arr[1]].value:_this.data[1][0].value,
								_this.data[2][arr[2]]?_this.data[2][arr[2]].value:_this.data[2][0].value
							];
							_this.resultStr=c1.label+c2.label+c3.label;
						}else{
							if(c1.label!=checkArr[0]){
								_this.data[1]=list[arr[0]].children;
								arr[1] = 0;
								c2=_this.data[1][arr[1]]||_this.data[1][0];
							};
							_this.checkArr=[c1.label,c2.label];
							_this.checkValue=[
								_this.data[0][arr[0]]?_this.data[0][arr[0]].value:_this.data[0][0].value,
								_this.data[1][arr[1]]?_this.data[1][arr[1]].value:_this.data[1][0].value
							];
							_this.resultStr=c1.label+c2.label;
						}
						break;
					case "region":
						province=_this.data.provinces[arr[0]]||_this.data.provinces[0];
						city=_this.data.citys[arr[1]]||_this.data.citys[0];
						if(!_this.hideArea){
							area=_this.data.areas[arr[2]]||_this.data.areas[0];
						}
						
						if(province.label!=checkArr[0]){
							_this.data.citys = citys[arr[0]]||citys[0];
							if(!_this.hideArea){
								_this.data.areas = areas[arr[0]][0]||areas[0][0];
							}
							arr[1] = 0;
							arr[2] = 0;
							city=_this.data.citys[arr[1]]||_this.data.citys[0];
							if(!_this.hideArea){
								area=_this.data.areas[arr[2]]||_this.data.areas[0];
							}
						};
						if(city.label!=checkArr[1]&&!_this.hideArea){
							_this.data.areas = areas[arr[0]][arr[1]]||areas[0][0];
							arr[2]=0;
							area=_this.data.areas[arr[2]]||_this.data.areas[0];
						};
						if(!_this.hideArea){
							_this.checkArr=[province.label,city.label,area.label];
							_this.checkValue=[
								_this.data.provinces[arr[0]]?_this.data.provinces[arr[0]].value:_this.data.provinces[0].value,
								_this.data.citys[arr[1]]?_this.data.citys[arr[1]].value:_this.data.citys[0].value,
								_this.data.areas[arr[2]]?_this.data.areas[arr[2]].value:_this.data.areas[0].value
							];
							_this.resultStr=province.label+city.label+area.label;
						}else{
							_this.checkArr=[province.label,city.label];
							_this.checkValue=[
								_this.data.provinces[arr[0]]?_this.data.provinces[arr[0]].value:_this.data.provinces[0].value,
								_this.data.citys[arr[1]]?_this.data.citys[arr[1]].value:_this.data.citys[0].value
							];
							_this.resultStr=province.label+city.label;
						};
						break;
					case "selector":
						_this.checkArr=_this.data[arr[0]]||_this.data[_this.data.length-1];
						_this.resultStr=_this.data[arr[0]]?_this.data[arr[0]].label:_this.data[_this.data.length-1].label;
						break;	
				}
				_this.$nextTick(()=>{
					_this.pickVal=arr;
				})
			},
			initData(){
				let _this=this;
				let data={};
				let mode=_this.mode;
				let year,month,day,hour,minute,second,province,city,area;
				let col1,col2,col3;
				let dVal=[];
				switch(mode){
					case "linkage":
						let init;
						if(_this.value){
							init=_this.getLinkageVal(_this.value,true);
						}else{
							init=_this.getLinkageVal(_this.defaultVal);
						}
						dVal=init.dval;
						data=init.data;
						_this.checkArr=init.checkArr;
						_this.checkValue=init.checkValue;
						_this.resultStr=init.resultStr;
						break;
					case "region":
						if(_this.areaCode){
							dVal=_this.getRegionVal(_this.areaCode,true);
						}else{
							dVal=_this.getRegionVal(_this.defaultVal);
						}
						if(_this.hideArea){
							data={
								provinces:provinces,
								citys:citys[dVal[0]]
							};
						}else{
							data={
								provinces:provinces,
								citys:citys[dVal[0]],
								areas:areas[dVal[0]][dVal[1]]
							};
						};
						break;
					case "selector":
						let idx=0;
						data=[..._this.selectList];
						_this.selectList.map((v,k)=>{
							if(v.label==this.defaultVal){
								idx=k;
							}
						})
						dVal=[idx];
						break;
					case "limit":
						data=initPicker.limit.init(_this.dayStep,_this.startHour,_this.endHour,_this.minuteStep,_this.afterStep,this.defaultVal);
						dVal=data.defaultVal||_this.defaultVal;
						break;
					case "limitHour":
						data=initPicker.limitHour.init(_this.dayStep,this.defaultVal);
						dVal=data.defaultVal||_this.defaultVal;
						break;	
					case "range":
						data=initPicker.range.init(_this.startYear,_this.endYear,_this.useCurrent(),_this.current);
						dVal=data.defaultVal||_this.defaultVal;
						break;
					default:
						data=initPicker.date.init(_this.startYear,_this.endYear,_this.mode,_this.step,_this.useCurrent(),_this.current,_this.disabledAfter,_this.hasSecond);
						dVal=data.defaultVal||_this.defaultVal;
						break;
				}
				_this.data=data;
				switch(mode){
					case "limitHour":
						col1=data.date[dVal[0]]||data.date[data.date.length-1];
						col2=data.areas[dVal[2]]||data.areas[data.areas.length-1];
						col3=data.hours[dVal[1]]||data.hours[data.hours.length-1];
						_this.checkArr=[col1,col2,col3];
						_this.resultStr=`${col1.value+' '+col2.label+' '+col3.label+'时'}`;
						break;
					case "limit":
						col1=data.date[dVal[0]]||data.date[data.date.length-1];
						col2=data.hours[dVal[1]]||data.hours[data.hours.length-1];
						col3=data.minutes[dVal[2]]||data.minutes[data.minutes.length-1];
						_this.checkArr=[col1,col2,col3];
						_this.resultStr=`${col1.value+' '+col2.value+':'+col3.value+":"+"00"}`;
						break;
					case "range":
						let fYear=data.fyears[dVal[0]]||data.fyears[data.fyears.length-1];
						let fmonth=data.fmonths[dVal[1]]||data.fmonths[data.fmonths.length-1];
						let fday=data.fdays[dVal[2]]||data.fdays[data.fdays.length-1];
						let tYear=data.tyears[dVal[4]]||data.tyears[data.tyears.length-1];
						let tmonth=data.tmonths[dVal[5]]||data.tmonths[data.tmonths.length-1];
						let tday=data.tdays[dVal[6]]||data.tdays[data.tdays.length-1];
						_this.checkArr=[fYear,fmonth,fday,tYear,tmonth,tday];
						_this.resultStr=`${fYear+'-'+fmonth+'-'+fday+'至'+tYear+'-'+tmonth+'-'+tday}`;
						break;
					case "half":
						year=data.years[dVal[0]]||data.years[data.years.length-1];
						month=data.months[dVal[1]]||data.months[data.months.length-1];
						day=data.days[dVal[2]]||data.days[data.days.length-1];
						area=data.areas[dVal[3]]||data.areas[data.areas.length-1];
						_this.checkArr=[year,month,day,area];
						_this.resultStr=`${year+'-'+month+'-'+day+' '+area.label}`;
						break;	
					case "date":
						year=data.years[dVal[0]]||data.years[data.years.length-1];
						month=data.months[dVal[1]]||data.months[data.months.length-1];
						day=data.days[dVal[2]]||data.days[data.days.length-1];
						_this.checkArr=[year,month,day];
						_this.resultStr=`${year+'-'+month+'-'+day}`;
						break;
					case "yearMonth":
						year=data.years[dVal[0]]||data.years[data.years.length-1];
						month=data.months[dVal[1]]||data.months[data.months.length-1];
						_this.checkArr=[year,month];
						_this.resultStr=`${year+'-'+month}`;
						break;
					case "dateTime":
						year=data.years[dVal[0]]||data.years[data.years.length-1];
						month=data.months[dVal[1]]||data.months[data.months.length-1];
						day=data.days[dVal[2]]||data.days[data.days.length-1];
						hour=data.hours[dVal[3]]||data.hours[data.hours.length-1];
						minute=data.minutes[dVal[4]]||data.minutes[data.minutes.length-1];
						if(_this.hasSecond){
							second=data.seconds[dVal[5]]||data.seconds[data.seconds.length-1];
							_this.resultStr=`${year+'-'+month+'-'+day+' '+hour+':'+minute+':'+second}`;
							_this.checkArr=[year,month,day,hour,minute,second];
						}else{
							_this.resultStr=`${year+'-'+month+'-'+day+' '+hour+':'+minute}`;
							_this.checkArr=[year,month,day,hour,minute];
						}
						break;
					case "time":
						hour=data.hours[dVal[0]]||data.hours[data.hours.length-1];
						minute=data.minutes[dVal[1]]||data.minutes[data.minutes.length-1];
						if(_this.hasSecond){
							second=data.seconds[dVal[2]]||data.seconds[data.seconds.length-1];
							_this.resultStr=`${hour+':'+minute+':'+second}`;
							_this.checkArr=[hour,minute,second];
						}else{
							_this.resultStr=`${hour+':'+minute}`;
							_this.checkArr=[hour,minute];
						}
						break;
					case "region":
						province=data.provinces[dVal[0]];
						city=data.citys[dVal[1]];
						if(!_this.hideArea){
							area=data.areas[dVal[2]];
							_this.checkArr=[province.label,city.label,area.label];
							_this.checkValue=[province.value,city.value,area.value];
							_this.resultStr=province.label+city.label+area.label;
						}else{
							_this.checkArr=[province.label,city.label];
							_this.checkValue=[province.value,city.value];
							_this.resultStr=province.label+city.label;
						}
						break;
					case "selector":
						_this.checkArr=data[dVal[0]]||data[data.length-1];
						_this.resultStr=data[dVal[0]].label||data[data.length-1].label;
						break;
				}
				_this.$nextTick(()=>{
					_this.pickVal=[...dVal];
				})
			}
		},
		mounted() {
			this.initData();
		}
	}
</script>

<style lang="scss">
	.w-picker{
		position: relative;
		z-index: 888;
		.mask {
		  position: fixed;
		  z-index: 1000;
		  top: 0;
		  right: 0;
		  left: 0;
		  bottom: 0;
		  background: rgba(0, 0, 0, 0.6);
		  visibility: hidden;
		  opacity: 0;
		  transition: all 0.3s ease;
		}
		.mask.show{
			visibility: visible;
			opacity: 1;
		}
		.w-picker-cnt {
		  position: fixed;
		  bottom: 0;
		  left: 0;
		  width: 100%;
		  transition: all 0.3s ease;
		  transform: translateY(100%);
		  z-index: 3000;
		}
		.w-picker-cnt.show {
		  transform: translateY(0);
		}
		.w-picker-hd {
		  display: flex;
		  align-items: center;
		  padding: 0 30upx;
		  height: 88upx;
		  background-color: #fff;
		  position: relative;
		  text-align: center;
		  font-size: 32upx;
		  justify-content: space-between;
		  .w-picker-btn{
		  	font-size: 30upx;
		  }
		}
		
		.w-picker-hd:after {
		  content: ' ';
		  position: absolute;
		  left: 0;
		  bottom: 0;
		  right: 0;
		  height: 1px;
		  border-bottom: 1px solid #e5e5e5;
		  color: #e5e5e5;
		  transform-origin: 0 100%;
		  transform: scaleY(0.5);
		}
		.w-picker-item {
		  text-align: center;
		  width: 100%;
		  height: 88upx;
		  line-height: 88upx;
		  text-overflow: ellipsis;
		  white-space: nowrap;
		  font-size: 30upx;
		}
		.w-picker-view {
		  width: 100%;
		  height: 476upx;
		  overflow: hidden;
		  background-color: rgba(255, 255, 255, 1);
		  z-index: 666;
		}
		picker-view{
			height: 100%;
		}
	}

</style>