<template>
	<view class="dis_col_evenly">
		<text class="t_1">
			车辆信息
		</text>
		<view class="info_item">
			<image src="../../../static/images/car_image.png" style="width: 80px; height: 80px;"></image>
			<view class="" style="height: 80px; justify-content: space-around;margin-left: 15px;">
				<text class="t_2">
					车牌号: {{check_number}}
				</text>
				<text class="t_2" style="color: #389044;">
					电池电量: {{check_soe}}%
				</text>
				<text class="t_2" style="color: #389044;">
					剩余可骑行(公里): 324 km
				</text>
			</view>
		</view>

		<!-- <text class="icon iconfont icon-diandongche" style="font-size: 20px;"></text> -->
		<view class="t_3">
			<!-- <input type="text" placeholder="请输入车牌号" class="style_input" v-model="input_value" /> -->
			<text class="btn_now" @click="made_navigation" style="background: #eff0f4; color: #000;">
				导航
			</text>
			<text class="btn_now" @click="made_car" style="background: #eff0f4; color: #000;">
				预约车辆
			</text>
			<text class="btn_now" @click="must_go">
				去骑行
			</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,
		check_soe: Number
	})
	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() {
		let data = all_props.check_number.value
		emit('getreservation', data)
	}
	// 
	function made_navigation() {
		emit('handle_navigation')
	}
	function must_go() {
		uni.showModal({
			title: '签名',
			content: '骑行前需要确认并签字骑行协议',
			cancelText: '取消',
			confirmText: '确认',
			success: (res) => {
				// console.log(res, 'res')
				// emit('active', '签字')
				if (res.cancel) {
					return
				} else if (res.confirm) {
					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;
	}

	.info_item {
		flex-direction: row;
		align-items: center;
		// justify-content: space-between;
	}

	.t_3 {
		// width: 500px;
		padding: 10px 40px;
		flex-direction: row;
	}

	.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 {
		flex: 1;
		margin: 0 10px;
		width: 60px;
		height: 40px;
		background: #000000;
		color: #fff;
		font-size: 12px;
		border-radius: 3px;
		line-height: 40px;
		text-align: center;
		margin-top: 10px;
	}
</style>