<template>
	<uni-card class="saleInfo" margin="0" padding="12px" :title="saleInfo.saleOutTaskCode || ' '">
		<view class="card-list">
			<view class="card-item">
				<span class="card-item__label">客户编码</span>
				<span class="card-item__value">{{ saleInfo.customerName || '-' }}</span>
			</view>
			<view class="card-item">
				<span class="card-item__label">下级客户</span>
				<span class="card-item__value">{{ saleInfo.dynamicField1.nextLevelCus || '-' }}</span>
			</view>
		</view>
		<view class="card-data">
			<view class="card-data-item">
				<span class="card-data-item__label">扫描数量</span>
				<span class="card-data-item__value finish">
					{{ saleInfo.scanNumber || '-' }}
				</span>
			</view>
			<view class="card-data-item">
				<span class="card-data-item__label">总数量</span>
				<span class="card-data-item__value">
					{{ saleInfo.allNumber || '-' }}
				</span>
			</view>
		</view>
	</uni-card>
</template>

<script>
export default {
	name: "t-sale-info",
	props: {
		saleInfo: {
			type: Object,
			default: {}
		},
	},
	data() {
		return {

		};
	},
	methods: {
	}
}
</script>

<style lang="scss" scoped>
.saleInfo {
	margin: 0 0 10px !important;
	padding: 0 !important;
	box-shadow: none !important;
	border-radius: 11px;

	.card-list {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		grid-gap: 4px;

		.card-item {
			display: flex;
			flex-direction: column;
			align-items: center;

			.card-item__label {
				font-size: 13px;
			}

			.card-item__value {
				font-weight: bold;
				font-size: 15px;
				color: #333;
			}
		}
	}

	.card-data {
		display: flex;
		margin-top: 4px;
		background-color: #f1f1f1;
		border-radius: 4px;
		padding: 6px 0;

		.card-data-item {
			flex: 1;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;

			.card-data-item__label {
				font-size: 13px;
			}

			.card-data-item__value {
				font-weight: bold;
				font-size: 15px;
				color: #333;

				&.finish {
					color: #059669;
				}
			}
		}
	}

	.actions {
		padding: 0 10px;
	}
}
</style>