<template>
	<view class="selectLicense_body flex column">
		<view class="selectLicense_header flex jc">
			<text class="oneflex">请选择车牌号</text>
			<text @click="$emit('showPlateNumber')" style="position: absolute;right: 30rpx;">输入</text>
		</view>
		<view class="selectLicense_plateNums  oneflex">
			<picker-view @pickstart='pickstart' @pickend='pickend' v-if="visible" :indicator-style="indicatorStyle"
				:value="[value]" @change="bindChange" class="picker-view">
				<picker-view-column>
					<view class="item" v-for="(item,index) in plateNumbers" :key="index">{{item}}</view>
				</picker-view-column>
			</picker-view>
		</view>
		<view @click="selectConfirm" class="flex jc selectLicense_footer_button flex ac jc">
			{{buttonStatus?'确定':'.....'}}
		</view>
	</view>
</template>

<script>
	export default {
		name: "selectLicense",
		props: {
			value: {
				type: Number,
				default: 0
			},
			plateNumbers: {
				type: Array,
				default: () => []
			}
		},
		data() {
			return {
				buttonStatus: true,
				visible: true,
				plateNumIndex: 0,
				plateNum: '',
				indicatorStyle: `height: 50px;`
			};
		},
		created() {
			console.log(this.plateNumbers, 'plateNumbers')
		},
		methods: {
			selectConfirm() {
				if(!this.buttonStatus) return ;
				this.$emit('confirm', this.plateNumIndex); 
			},
			pickstart() {
				this.buttonStatus = false
			},
			pickend() {
				this.buttonStatus = true;
			},
			bindChange(e) {
				this.plateNumIndex = e.detail.value[0]
			}
		}
	}
</script>

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

	.picker-view {
		width: 100%;
		height: 100%;
		margin-top: 20rpx;
	}

	.item {
		line-height: 100rpx;
		text-align: center;
	}
</style>