<template>
	<view class="jPicker">
		<view @click="showPicker" class="showLine">
			<view v-if="listDataAll.length>0&&showIndex!=-1">
				{{listDataAll[showIndex][showKey]||listDataAll[showIndex]}}
			</view>
			<view style="" v-else>
				{{placeholder}}
			</view>
		</view>

		<view class="pickerMask" v-if="pickerVisable" @click="pickerVisable=false">
			<view class="alertArea JAnimateBtmIn" @click.stop="doNothing">
				<view class="searchInput " v-if="searchPosition=='top'">
					<view class="clickArea">
						<input class="jInput" placeholder-style="color:#ffffff"  @input="filterOp" placeholder="搜索列表..." />
						<!-- <image class="searchLogo" src="../../static/search.png"></image> -->
						<icon  class="searchLogo" type="search" />
					</view>
				</view>
				<view class="pickerTop">
					<view class="lefBtn" @click="cancelSel">取消</view>
					<view class="midInput">
						<template v-if="searchPosition=='middle'">
							<input v-model="searchValue"  id="searchArea" class="searchArea"  confirm-type="search" @confirm="confirm" auto-blur="true"/>
							<image @click="confirm" class="searchIcon" src="../../static/search.png"></image>
							<!-- <icon  class="searchIcon" type="search" style="font-size: 32upx;"/> -->
						</template>
					</view>
					<view class="rigBtn" :style="{color:sureColor}" @click="sureSelect">确定</view>
				</view>
				<picker-view :value="[nSel]" class="pickerView" :mask-style="'background-color:'+bgColor" :indicator-style="selStyle" @change="selChange">
					<picker-view-column>
						<view class="opItem" v-for="(item,index) in listData" :key="index">{{item[showKey]||item}}</view>
					</picker-view-column>
				</picker-view>
			</view>
		</view>
	</view>

</template>

<script>
	/**
	 * 选择组件  
	 * @property {Array} options 选择数组  
	 * @property {String} showKey 显示的对象键名 
	 * @property {String} val 默认选中下标 
	 * @property {String} valKey 取值的对象键名
	 * @property {Boolean} disabled 是否只读  
	 * @event {Function} position 搜索框位置  
	 * @event {Function} sure 确认事件  
	 * @example <jPicker :disabled="false" class="cont" @sure="bindPickerChange($event,'TYPE')" showKey="Name" valKey="Value" :val="CurrentType" :options="FilterArray" />
	 */  
	export default {
		name: 'jPicker',
		data() {
			return {
				listData: [],
				listDataAll:[],
				nSel: 0,
				showIndex:-1,
				pickerVisable: false,
				searchPosition: "middle",
				selStyle: 'height:50px;',
				placeholder:this.placeholderText,
				searchValue:""
			}
		},
		props: ["options", "showKey", "valKey", "val", "position", "disabled", "bgColor", "sureColor","placeholderText"],
		//选项数组，列表显示的对象键名，取值的对象键名,默认选中值,搜索框位置,是否禁用,整体背景色,确认键颜色
		watch: {
			// options(n) {
			// 	this.listData = n;
			// 	this.selByValKey();
			// },
			val(n) {
				this.selByValKey();
			},
		},
		mounted() {
			
			this.selByValKey();
			// if (this.position) {
			// 	this.searchPosition = this.position;
			// }
		},
		methods: {
			showPicker() {
				if (this.disabled) {
					return;
				}
				this.pickerVisable = true;
				this.listData = this.options;
				this.selByValKey();
			},
			cancelSel() {
				this.pickerVisable = false;
				if (this.val) {
					this.nSel = this.val;
				} else {
					this.nSel = -1;
				}
			},
			sureSelect() {
				this.pickerVisable = false;
				if (this.listData.length == 0) {
					this.$emit("sure", {});
				} else {
					this.showIndex = this.nSel;
					let obj = {
						pickerIndex: this.nSel==-1? -1:this.listData[this.nSel].realIndex,
						pickerObj: this.nSel == -1 ? this.listData[0] : this.listData[this.nSel],
					};

					this.$emit("sure", obj);
				}
			},
			selChange(e) {
				this.nSel = e.detail.value[0];
			},
			filterOp() {
				//console.log(e.detail.value);
				// let keyWord = e.detail.value;
				let keyWord = this.searchValue;
				if (keyWord != "") {
					keyWord = keyWord.toLowerCase();
					let oldArr = this.options;
					this.listData = [];
					this.nSel = 0;
					for (let i = 0; i < oldArr.length; i++) {
						let theVal = oldArr[i];
						if (this.showKey) {
							theVal = oldArr[i][this.showKey];
						}
						if (theVal.toString().toLowerCase().indexOf(keyWord) > -1) {
							this.listData.push(oldArr[i]);
						}
					}
				} else {
					this.listData = this.options;
					this.nSel = this.val ? this.val : -1;
					this.selByValKey();
				}
			},
			confirm(){
				// var input = document.getElementById("searchArea");
				// input.blur();
				uni.hideKeyboard();
				this.filterOp();
			},
			selByValKey() {
				if(this.options){
					this.listData = [];
					for(var i=0;i<this.options.length;i++){
						var obj = this.options[i];
						obj.realIndex = i;
						this.listData.push(obj);
					}
					this.listDataAll = this.listData;
				}
				// let n = this.options;
				// this.listData = n;
				this.showIndex = this.val;
				this.nSel = this.val;
			},
			doNothing() {
				//nothing
			},
		}
	}
</script>

<style lang="scss" scoped>
	.uni-icon-search{
		font-size: 32upx!important;
	}
	.jPicker {
		width: 100%;

		.showLine {
			// border-left:1px solid #000000;
			width: 100%;
			display: block;
			color:#666;font-size: 26upx;
			line-height: 48upx;
		}
	}

	.pickerMask {
		background-color: rgba(0, 0, 0, 0.5);
		height: 100vh;
		width: 100vw;
		position: fixed;
		left: 0;
		top: 0;
		z-index: 999;
	}

	.alertArea {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100vw;
		// border-radius: 10px 10px 0 0;

		.searchInput {
			width: 100%;
			position: relative;
			.clickArea {
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: center;
				height: 36px;
				.jInput {
					text-align: left;
					width: 90%;
					border: none;
					height: 30px;
					font-size: 17px;
					// border-radius: 20px;
					padding: 2px 8px;
					box-sizing: border-box;
					// background-color: #efefef;
					color: #ffffff;
				}
				
				.searchLogo {
					width: 30px;
					height: 30px;
					line-height: 30px;
					text-align: center;
				}
			}
			&:before {
				content: "";
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				background: #678699;
				filter: blur(18px);
				z-index: -1;
			}
		}

		.pickerTop {
			background-color: #E6E6E6;
			height: 90upx;
			display: flex;
			align-items: center;
			font-size: 34upx;
			box-sizing: border-box;
			justify-content: space-around;
			.rigBtn {
				color: #007aff;
			}
			.lefBtn{
				color:#666666
			}

			.midInput {
				width: 64%;				
				height: 30px;
				position: relative;
				line-height: 30px;
				// display: flex;
				// align-items: center;
				// justify-content: center;
				.searchArea {				
					text-align: left;					
					background-color: #efefef;
					border-radius: 20px;
					padding: 4px 10px;
					height: 60upx;
					background-color: white;
				}

				.searchIcon {
					position: absolute;
					right: 10px;
					top: 10upx;
					width: 40upx;
					height: 40upx;
					text-align: center;
					display: flex;
					align-items: center;
				}
			}
		}


		.pickerView {
			background-color: #FFFFFF;
			width: 100%;
			height: 300px;
			// margin-top:20upx;
			left: 0;

			.opItem {
				line-height: 50px;
				text-align: center;
				background-color: #f3f3f3;
				color: #000000;
			}
		}
		
	}
	.JAnimateBtmIn {
		animation: btmIn 0.3s ease;
	}
	
	@keyframes btmIn {
		0%{
			transform: translateY(666px);
		}
		100% {
			transform: translateY(0);
		}
	}
</style>
