<template>
	<view>
		<view class="orderList" @click="toPath">
			<view class="orderList_img" v-if="Image && list.length != 0">
				<image v-for="(i, n) in list" :key="n" :src="i" mode="aspectFill"></image>
				<view v-if="list.length == 2"></view>
			</view>
			<view style="display: flex; align-items: center; justify-content: space-between">
				<view>
					<view class="orderList_header">
						<image class="orderList_header_img" src="/static/icon/cd.png" mode="widthFix"></image>
						<view>{{ info.stationName }}</view>
					</view>
					<view class="orderList_money">
						<view>{{ info.priceAmount }}</view>
						<view>元/度</view>
					</view>
					<view class="orderList_cd">
						<view class="orderList_cd_m">
							<!-- <image class="orderList_cd_m_img" src="/static/icon/mc.png" mode="widthFix"></image> -->
							<text class="orderList_cd_m_x">闲</text>
							<text class="orderList_cd_m_n">{{ info.gunUseCount || 0 }}/{{ info.gunCount || 0 }}</text>
						</view>
						<!-- 						<view class="orderList_cd_m">
							<image class="orderList_cd_m_img" src="/static/icon/kc.png" mode="widthFix"></image>
							<text class="orderList_cd_m_x">闲</text>
							<text class="orderList_cd_m_n">{{ info.dcGunUseCount }}/{{ info.dcGunCount }}</text>
						</view> -->
					</view>
				</view>
				<view class="orderList_right" @click="openMap">
					<view>{{ info.distance }}KM</view>
					<image class="orderList_note_img" src="/static/icon/dw.png" mode="widthFix"></image>
				</view>
			</view>
			<view class="orderList_note">
				<image class="orderList_note_img" src="/static/icon/tc.png" mode="widthFix"></image>
				<view :class="type == 'list' ? 'nowrapText' : ''">
					{{ info.parkCostInfo }}
					<!-- <text v-if="info.occupyCostInfo">，占用说明：{{ info.occupyCostInfo }}</text> -->
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
const data = defineProps({
	Image: {
		type: Boolean,
		default: false
	},
	toNav: {
		type: Boolean,
		default: false
	},
	info: {
		type: Object,
		default: {}
	},
	list: {
		type: Array,
		default: []
	},
	type: {
		type: String,
		default: 'list'
	}
});

let toPath = () => {
	if (!data.toNav) return true;
	uni.navigateTo({
		url: `/pages/home/detail?id=${data.info.id}&distance=${data.info.distance}`
	});
};

let openMap = () => {
	uni.openLocation({
		name: data.info.stationName,
		latitude: data.info.location.lat,
		longitude: data.info.location.lng,
		success: function () {
			console.log('success');
		}
	});
};
</script>

<style scoped lang="scss">
.orderList {
	width: 100%;
	padding: 25rpx;
	box-shadow: 0rpx -6rpx 8rpx 2rpx rgba(66, 115, 229, 0.05);
	border-radius: 16rpx 16rpx 16rpx 16rpx;
	position: relative;
	/* #ifdef MP-ALIPAY */
	background: linear-gradient(270deg, rgba(247, 247, 247, 0) -500%, #fff 100%), url('~@/static/icon/b1.png');
	/* #endif */
	/* #ifdef MP-WEIXIN */
	background: linear-gradient(270deg, rgba(247, 247, 247, 0) -500%, #fff 100%),
		url('data:image/png;base64,[encoded data, 12800 characters]');
	/* #endif */
	background-size: cover;
	background-repeat: no-repeat;

	&_right {
		// ($direction: column)
		@include flex;
		font-family: DIN, DIN;
		font-weight: bold;
		font-size: 28rpx;
		color: #232323;
		image {
			// margin-top: 45rpx;
			width: 50rpx;
			height: 50rpx;
		}
	}

	&_img {
		flex: 1;
		@include flex($space: space-between);
		padding-bottom: 20rpx;
		border-bottom: 4rpx solid #ebebeb;
		margin-bottom: 20rpx;
		view {
			width: 205rpx;
			height: 170rpx;
		}
		image {
			width: 205rpx;
			height: 170rpx;
		}
	}

	&_header {
		flex: 1;
		@include flex;
		font-weight: bold;
		font-size: 32rpx;
		color: #232323;
		margin-bottom: 20rpx;
		&_img {
			width: 52rpx;
			height: 52rpx;
			margin-right: 20rpx;
		}
	}
	&_money {
		@include flex;
		color: #eb2424;
		font-weight: bold;
		margin-bottom: 20rpx;
		view:nth-child(1) {
			font-size: 48rpx;
		}
		view:nth-child(2) {
			font-size: 36rpx;
		}
	}
	&_cd {
		@include flex;
		margin-bottom: 20rpx;
		&_m {
			@include flex;
			&_img {
				width: 40rpx;
				height: 40rpx;
				margin-right: 15rpx;
			}
			&_x {
				margin-right: 10rpx;
				font-size: 28rpx;
				color: #232323;
			}
			&_n {
				font-weight: bold;
				font-size: 28rpx;
				color: #232323;
			}
		}
		&_m:nth-child(1) {
			margin-right: 45rpx;
		}
	}
	&_note {
		@include flex;
		flex: 1;
		min-height: 50rpx;
		background: linear-gradient(270deg, rgba(247, 247, 247, 0) 0%, #f7f7f7 100%);
		border-radius: 4rpx 4rpx 4rpx 4rpx;
		font-weight: bold;
		font-size: 24rpx;
		color: #232323;
		padding: 0 15rpx;
		&_img {
			width: 31rpx;
			height: 31rpx;
			margin-right: 20rpx;
		}
	}
}

.nowrapText {
	white-space: nowrap; /* 超出的空白区域不换行 */
	overflow: hidden; /* 超出隐藏 */
	text-overflow: ellipsis; /* 文本超出显示省略号 */
}
</style>
