<template>
	<view class="order view">
		<view class="top">
			<text class="title-no">订单编号：{{newsItem.object_id}}</text>
			<view class="title-info">
				<button class="title-info__status title-info__status-done" type="default"><text
						class="item-block-btn__text title-info__status-done__text">{{newsItem.status_text}}</text></button>
			</view>
		</view>
		<view class="middle view">
			<view class="middle-title">
				<text class="middle-title__text">{{newsItem.process_type_text}}</text>
			</view>
			<view class="text-block-box">
				<view class="text-block text-block-last">
					<text class="middle-date">{{formatSapDate(newsItem.posting_date)}} {{formatSapTime(newsItem.posting_time)}}</text>
					<text class="middle-date-des">下单日期</text>
				</view>
				<view class="text-block text-block-last">
					<view class="middle-date-right">
						<text class="middle-date">{{newsItem.all_price}}</text>
					</view>
					<text class="middle-date-des middle-date-right">金额</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			newsItem: {
				type: Object,
				default: function(e) {
					return {}
				}
			}
		},
		data() {
			return {}
		},
		methods: {
			formatSapTime(time){
			  if (!time) return ''
			  return time.replace(/^(\d{2})(\d{2})(\d{2})/, '$1:$2:$3')
			},
			formatSapDate(date, c = '-'){
			  if (!date) return ''
			  return date.replace(/^(\d{4})(\d{2})(\d{2})/, `$1${c}$2${c}$3`)
			},
			click() {
				this.$emit('click');
			},
			close(e) {
				e.stopPropagation();
				this.$emit('close');
			},
		}
	}
</script>

<style lang="scss" scoped>
	.view {
		flex-direction: column;
	}

	.order {
		flex: 1;
		background: #ffffff;
		border-radius: 16rpx 100rpx 16rpx 16rpx;
		margin-top: 28rpx;
		padding-top: 30rpx;
	}

	.top {
		height: 72rpx;
		align-items: center;
		justify-content: space-between;
		padding: 0 48rpx;
	}

	.title-no {
		font-size: 24rpx;
		color: #555555;
	}

	.title-info {
		align-items: center;
		// margin-right: 26rpx;
	}

	.title-info__status {
		height: 48rpx;
		line-height: 44rpx;
		background: #f61d30;
		border-radius: 80rpx 200rpx 200rpx 80rpx;
		border: 1px solid #f61d30;
		text-align: center;
	}

	.title-info__status:after {
		border: 0;
	}

	.title-info__status-done {
		background: #f8f8f8;
		color: #888888;
		border: 1px solid #f8f8f8;
	}

	.item-block-btn__text {
		width: 180rpx;
		height: 48rpx;
		text-align: center;
		line-height: 48rpx;
		font-size: 12px;
		color: #fff;
	}

	.title-info__status-done__text {
		color: #888888;
	}

	.middle {
		position: relative;
		padding: 26rpx 48rpx 40rpx;
	}

	.middle-title {
		display: flex;
		align-items: center;
		margin-bottom: 32rpx;
	}

	.middle-title__text {
		font-weight: 500;
		font-size: 32rpx;
		color: $text-base-color;
		font-family: PingFangSC, PingFangSC-Medium;
	}

	.icon-car {
		width: 13px;
		height: 13px;
		margin-left: 16rpx;
	}

	.text-block {
		flex: 1;
		flex-direction: column;
		margin-bottom: 32rpx;
	}

	.text-block-last {
		margin-bottom: 0;
	}

	.middle-date {
		font-size: 28rpx;
		color: $text-base-color;
		margin-bottom: 16rpx;
	}

	.middle-date-des {
		font-size: 24rpx;
		color: #999;
	}

	.text-block-box {
		display: flex;
		justify-content: space-between;
	}

	.middle-date-right {
		display: flex;
		align-items: center;
		justify-content: flex-end;
		text-align: right;
	}
</style>
