<template>
	<view class="order-item-view" @click="clickItemEvent">
		<view class="item-header">
			<view class="title">
				<image class="icon" :src="info.avatar" alt="商品图" />
				<text class="name">
					{{ info.nickName }}
				</text>
			</view>
			<view class="status">{{ getStatusName }} </view>
		</view>
		<view class="item-main" >
			<view class="item-info">
				<view class="info-row">
					<text class="info-label"> 日期:</text>
					<text class="info-value">{{ info.addTime }} </text>
				</view>
				<view class="info-row">
					<text class="info-label"> 单号:</text>
					<text class="info-value">{{ info.orderSn }} </text>
				</view>
				<view class="info-row">
					<text class="info-label"> 人员:</text>
					<text class="info-value">{{ info.adminName }} </text>
				</view>
			</view>
			<view class="item-price"
				>¥{{ info.orderPrice }} <text class="iconfont iconxiangyou"></text>
			</view>
		</view>
	</view>
</template>
<script>
import { PURCHASE_ORDER_STATUS } from "@/utils/declare";

export default {
	props: {
		info: {
			required: true
		}
	},
	data() {
		return {
			PURCHASE_ORDER_STATUS
		};
	},
	computed: {
		getStatusName() {
			let statusName = "";

			switch (this.info.status) {
				case PURCHASE_ORDER_STATUS.CONFIRM:
					statusName = "待确认";
					break;
				case PURCHASE_ORDER_STATUS.UNDIS:
					statusName = "待配送";
					break;
				case PURCHASE_ORDER_STATUS.DIS:
					statusName = "配送中";
					break;
				case PURCHASE_ORDER_STATUS.DONE:
					statusName = "已完成";
					break;

				default:
					break;
			}
			return statusName;
		}
	},
	methods: {
		clickItemEvent() {
			this.$emit("click", this.info);
		}
	}
};
</script>
<style lang="scss" scoped>
.order-item-view {
	padding: 30upx;
	margin-bottom: 20upx;
	width: 100%;
	background-color: #fff;
	.item-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20upx;
		.title {
			display: flex;
			align-items: center;
			flex: 1;

			.icon {
				margin-right: 20upx;
				width: 50upx;
				height: 50upx;
				border-radius: 25upx;
				border-radius: 50%;
			}
			.name {
				font-size: 32upx;
				font-weight: 600;
				color: #333333;
			}
		}
		.status {
			flex-shrink: 0;
			color: $mainColor;
		}
	}
	.item-main {
		display: flex;

		align-items: flex-end;
		.item-info {
			flex: 1;

			font-size: 26upx;
			.info-row {
				margin-top: 12upx;
				display: flex;
				align-items: center;
			}
			.info-label {
				font-weight: 400;
				color: #999999;
			}
			.info-value {
				font-weight: 400;
				color: #333333;
			}
		}
		.item-price {
			display: flex;
			align-items: center;
			flex-shrink: 0;

			font-size: 30upx;
			font-weight: 600;
			color: #333333;
			.iconfont {
				font-size: 28upx;
				color: #999999;
			}
		}
	}
}
</style>
