<template>
	<view>
		<uni-popup ref="octMechanismPicker">
			<view class="mechanism--content">
				<view class="mechanism--title" v-if="title != null">{{title}}</view>
				<view class="mechanism--input">
					<input type="text" placeholder="输入关键字筛选" v-model="searchValue" @input="onSearch($event)">
					<view class="mechanism--clear" @click="onClear" v-if="searchValue.length > 0">
						<uni-icons type="clear" size="20" color="#c3c3c3"></uni-icons>
					</view>
				</view>
				<scroll-view class="mechanism--scroll" scroll-y show-scrollbar>
					<block v-if="searchValue.length > 0">
						<view class="mechanism--item" v-for="(item, index) in searchArr" :key="index" v-if="searchArr.length > 0" @click="onChoose(item, index)">
							<view class="mechanism--text">{{item.title}}</view>
							<uni-icons type="right" size="20" color="#c3c3c3"></uni-icons>
						</view>
						<view class="mechanism--null" v-if="searchArr.length <= 0">
							<view>暂无与<text>[{{searchValue}}]</text>相关的搜索结果</view>
						</view>
					</block>
					<block v-else>
						<view class="mechanism--item" v-for="(item, index) in columns" :key="index" @click="onChoose(item, index)">
							<view class="mechanism--text">{{item.title}}</view>
							<uni-icons type="right" size="20" color="#c3c3c3"></uni-icons>
						</view>
					</block>
				</scroll-view>
				<button class="mechanism--button" @click="clear">取消</button>
			</view>
		</uni-popup>
	</view>
</template>
<script>
	export default{
		data(){
			return{
				searchValue: '',
				searchArr  : []
			}
		},
		props	: {
			// 弹出层标题
			title	: {
				type	: String,
				default	: null
			},
			// 默认值
			value	: {
				type	: Number,
				default	: 0
			},
			// 选项
			columns	: {
				type	: Array,
				default	: () => {
					return []
				}
			}
		},
		methods	: {
			// 弹出层
			open(type){
				this.$refs.octMechanismPicker.open(type || 'bottom')
			},
			// 关闭弹出层
			clear(){
				this.$refs.octMechanismPicker.close()
				this.onClear()
			},
			// 选择选项
			onChoose(val, index){
				this.$emit('choose', {val, index})
				this.clear()
			},
			// 筛选输入框
			onSearch(e){
				let { value }	= e.target
				let columns		= this.columns
				let searchArr	= []
				for(let obj of columns){
					if(obj.title.includes(value)){
						searchArr.push(obj)
					}
				}
				this.searchArr = searchArr
			},
			// 清理搜索内容
			onClear(){
				this.searchValue = ''
				this.searchArr	 = []
			}
		}
	}
</script>
<style lang="scss" scoped>
	.mechanism--content{
		background: white;
		border-radius: 20rpx 20rpx 0 0;
		overflow: hidden;
		.mechanism--title{
			text-align: center;
			position: relative;
			padding: 30rpx 50rpx;
			font-size: 34rpx;
			font-weight: bold;
			&::after {
				content: "";
				position: absolute;
				left: 0;
				bottom: 0;
				width: 100%;
				height: 1rpx;
				background-image: linear-gradient(0deg, $border-color 50%, transparent 50%);
			}
		}
		.mechanism--input{
			padding: 30rpx 50rpx;
			position: relative;
			& > input{
				background: #f8f8f8;
				padding: 0 30rpx;
				height: 80rpx;
				border-radius: 10rpx;
				font-size: 30rpx;
			}
			.mechanism--clear{
				position: absolute;
				top: 30rpx;
				right: 50rpx;
				height: 80rpx;
				width: 80rpx;
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}
		.mechanism--scroll{
			padding: 0 50rpx;
			box-sizing: border-box;
			height: 50vh;
			.mechanism--item{
				line-height: 90rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				.mechanism--text{
					width: 80%;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
				}
			}
			.mechanism--null{
				height: 40vh;
				line-height: 40vh;
				font-size: 30rpx;
				color: gray;
				text-align: center;
				text{
					color: #446EFE;
				}
			}
		}
		.mechanism--button{
			margin: 30rpx 50rpx;
			background: #446EFE;
			color: white;
			font-size: 34rpx;
			height: 90rpx;
			line-height: 90rpx;
			padding: 0;
			border-radius: 10rpx;
			&::after{ display: none; }
		}
	}
</style>
