<template>
	<view>
		<uni-popup @change="change" ref="popup" type="bottom" background-color="#fff">
			<view class="select-container flex column">
				<view class="select-title">
					<slot name="title"> 请选择</slot>
				</view>
				<view class="select-search">
					<slot name="search"></slot>
				</view>
				<view class="select-list oneflex">
					<view @click="select(item[selectValue])" v-for="item in options" class="select-list-item  flex">
						<view class="select-list-item-label oneflex">{{item[label]}}</view>
						<view class="select-list-item-bottom">
							<radio style="transform:scale(0.7)" :value="item[selectValue]"
								:checked="selectedData.includes(item[selectValue])" />
						</view>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		props: {
			maxLength:{
				type:Number,
				default: 3
			},
			label:{
				type: String,
				default: 'label'
			},
			selectValue:{
				type: String,
				default: 'value'
			},
			value: {
				type: Boolean,
				default: false
			},
			isMultiple: {
				type: Boolean,
				default: true
			},
			options: {
				type: Array,
				default: () => {
					return [  ]
				}
			}
		},
		watch: {
			options:function(n, o){
				this.selectedData=[];
				
			},
			value: function(n, o) {
				if (n) {
					this.$refs.popup.open('bottom')
				} else {
					this.$refs.popup.close();
					this.$emit('settle',this.settle());
				}
			}
		},
		created() {},
		data() {
			return {
				selectedData: []
			}
		},
		methods: {
			settle(){
				return this.isMultiple? this.options.filter(item=>this.selectedData.includes(item[this.selectValue]) ):this.options.find(item=>this.selectedData.includes(item[this.selectValue]))
			},
			select(e) { 
				if(this.selectedData.length>=this.maxLength&&!this.selectedData.includes(e)){
					uni.showToast({
						title:'最多选择3位',
						icon:"none"
					}) 
				}else{
					if (this.isMultiple) {
						this.selectedData.includes(e)? this.selectedData.splice(this.selectedData.findIndex(item => item == e), 1): this.selectedData.push(e);
					} else {
						this.selectedData = this.selectedData.includes(e)?[]:[e];
					}
				} 
			},
			change(e) {
				this.$emit('input', e.show)
			},
		}
	}
</script>

<style lang="scss" scoped>
	@import 'index.scss';
</style>