<template>
	<view class="select">
		<u-popup :show="value" @close="close()" round="15">
			<view class="ppopup">
				<scroll-view scroll-y="true" style="height: 350px">
					<view class="items" v-for="(item, index) in list" :key="index" @click="check(item)">
						<view class="check">
							<text class="icon xz" v-if="item.check">&#xe600;</text>
							<text class="icon" v-else>&#xe8bb;</text>
						</view>
						<view class="title omit">{{ item[rangeKey] }}</view>
						<view class="clear"></view>
					</view>
				</scroll-view>
				<button class="btn" @click="confirm()">确定</button>
			</view>
		</u-popup>
	</view>
</template>

<script>
export default {
	name: 'type',
	props: {
		value: {
			type: Boolean,
			default: true
		},
		list: {
			type: Array
		},
		rangeKey: {
			type: String,
			default: 'province'
		},
		multiple: {
			type: Boolean,
			default: false
		}
	},
	data() {
		return {
			show: true
		};
	},
	watch: {
		value(newValue) {
			this.show = newValue;
		}
	},
	methods: {
		check(item) {
			if (this.multiple) {
				item.check = !item.check;
			} else {
				this.list.forEach(i => {
					i.check = false;
				});
				item.check = true;
			}
			this.$forceUpdate();
		},
		confirm() {
			this.$emit('input', false);
			let check = this.list.filter(item => item.check);
			this.$emit('confirm', check);
		},
		close() {
			this.show = false;
			this.$emit('input', false);
		}
	}
};
</script>

<style lang="scss" scoped>
.select {
	.ppopup {
		padding: 10px 20px 30px 20px;
		border-radius: 15px 15px 0px 0px;
		.btn {
			margin-top: 20px;
		}
	}
}
</style>
