<template>
	<view class="dis_col_evenly" :style="{'width': windowWidth + 'px'}">

		<!-- <text class="t_1" :style="{'backgroundImage': avatar}"> -->
		<image :src="avatar" class="t_1" mode="aspectFill"></image>
		<!-- </text> -->
		<!-- <text class="t_2">
			已认证
		</text> -->
		<view class="operate" :style="{'width': windowWidth + 'px'}">
			<view class="operate_item">
				<text class="operate_item_text_b">￥{{trip_data.actualPay / 100}}</text>
				<text class="operate_item_text">行程消费</text>
			</view>
			<view class="operate_item">
				<text class="operate_item_text_b">{{trip_data.ridingTime}}</text>
				<text class="operate_item_text">用车时长</text>
			</view>
			<view class="operate_item">
				<text class="operate_item_text_b">{{trip_data.endTime}}</text>
				<text class="operate_item_text">结束行程时间</text>
			</view>
		</view>
		<!-- <text class="t_3">{{trip_data.vehicleId}}</text> -->
	</view>
</template>

<script setup>
	import {
		ref,
		defineProps
	} from 'vue'
	const props = defineProps({
		trip_data: {
			type: Object,
			default: () => {
				return {
					actualPay: 0,
					vehicleId: 0,
					endTime: null,
					ridingTime: '00小时00分00秒'
				}
			}
		}
	})
	const avatar = uni.getStorageSync('avatar')
	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'
	})
</script>

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

	.t_1 {
		width: 50px;
		height: 50px;
		border-radius: 25px;
		// background: #999999;
		// position: absolute;
		// top: 0;
		// left: 50%;
		// transform: translateX(-50%);
		// overflow: hidden;
	}

	.t_2 {
		font-size: 9px;
		color: #999999;
		// margin-top: 5px;
		width: 50px;
		line-height: 20px;
		border: 1px solid #ccc;
		border-radius: 25px;
		text-align: center;
	}

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

	.operate_item {
		align-items: center;
	}

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

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

	.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>