<template>
	<view class="dis_col_evenly" style="width: 100%">
		<text class="t_1">
			计费说明: 1元 / 小时
		</text>
		<text class="t_2">
			输入车牌号,获取解锁码
		</text>
		<view class="t_3" style="width: 100%">
			<input type="text" placeholder="请输入车牌号" class="style_input" v-model="input_value" />
			<text class="btn_now" @click="made_car">
				立即用车
			</text>
		</view>
		<view class="operate" style="width: 100%">
			<text class="operate_item_text">手电筒</text>
			<text class="operate_item_text">语音</text>
			<text class="operate_item_text">扫描解锁</text>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		toRefs,
		defineProps,
		defineEmits
	} from 'vue'
	import {
		baseUrl,
		apiPath
	} from '@/sheep/config';
	const props = defineProps({
		check_number: String
	})
	const emit = defineEmits(['active', 'ride_id'])
	const all_props = toRefs(props)
	const info = uni.getSystemInfoSync()
	const windowWidth = info.windowWidth
	const windowHeight = info.windowHeight
	const input_value = ref('')
	const placeholderStyle = ref(
		"color:#2979FF;font-size:12px"
	)
	const style_input = ref({
		color: '#2979FF',
		borderColor: '#2979FF'
	})
	const isactive = ref(0)

	function made_car() {
		if (input_value.value == '') {
			uni.showToast({
				icon: 'error',
				title: '请输入车牌号!'
			})
		} else {
			uni.showModal({
				title: '签名',
				content: '骑行前需要确认并签字骑行协议',
				cancelText: '取消',
				confirmText: '确认',
				success: (res) => {
					// console.log(res, 'res')
					// emit('active', '签字')
					if (res.cancel) {
						return
					} else if (res.confirm) {
						uni.setStorageSync('check_veh_id', input_value.value)
						emit('active', '签字')
					}
				}
			});
		}
	}
</script>

<style lang="scss" scoped>
	.dis_col_evenly {
		// width: 100%;
		height: 200px;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-around;
		padding: 10px 20px;
	}

	.t_1 {
		font-weight: 600;
		font-size: 14px;
	}

	.t_2 {
		font-size: 12px;
		color: #999999;
		margin-top: 5px;
	}

	.t_3 {
		// width: 500px;
		padding: 10px 40px;
	}

	.operate {
		// margin-top: 10px;
		flex-direction: row;
		height: 30px;
		// align-items: center;
		justify-content: space-between;
		align-items: center;
		// background: skyblue;
		padding: 0 60px;
	}

	.operate_item_text {
		font-size: 12px;
		// margin-top: 10px;
		// width: 50px;
	}

	.style_input {
		border: 1px solid #ccc;
		color: #000;
		font-size: 12px;
		border-radius: 3px;
		height: 40px;
		text-align: center;
	}

	.btn_now {
		height: 40px;
		background: #000000;
		color: #fff;
		font-size: 14px;
		border-radius: 3px;
		line-height: 40px;
		text-align: center;
		margin-top: 10px;
	}
</style>