<template>
	<view class="receiving-info" @click="handleClick">
		<view class="receiving-info-head">
			<text class="receiving-info-head-left">箱码</text>
			<text class="receiving-info-head-right">品牌</text>
		</view>
		<view class="receiving-info-content">
			<text class="receiving-info-content-left">{{ detail.productCode }}</text>
			<text class="receiving-info-content-right">{{ detail.brandName }}</text>
		</view>
		<view class="receiving-info-footer">
			<view :class="[statusColor]">{{ statusLabel }}</view>
		</view>
	</view>
</template>

<script>
import { myFilter } from '@/common/common.js';
import { statusOptions } from '@/common/optinos/mine/received.js';
export default {
	name: 'ReceivingInfo',
	props: {
		detail: {
			type: Object,
			default: () => {}
		},
	},
	data() {
		return {
			statusOptions
		};
	},
	computed: {
		statusColor() {
			return this.detail.status === "1" ? 'receiving-info-footer-status-grey' : 'receiving-info-footer-status-blue';
		},
		statusLabel() {
			// 按钮文字
			return myFilter(this.detail.status, this.statusOptions);
		},
		
	},
	created() {},
	methods: {
		handleClick() {
			this.$emit('handleClick', this.detail.signId);
		}
	}
};
</script>

<style lang="scss" scoped>
.receiving-info {
	background-color: #ffffff;
	border-radius: 12rpx;
	padding: 20rpx 30rpx;
	margin-bottom: 20rpx;
	color: #333333;
	.hover-class {
		background-color: #dddddd;
	}

	&-head {
		display: flex;
		align-items: flex-end;
		justify-content: space-between;
		margin-bottom: 20rpx;
		&-left {
			font-size: 36rpx;
			font-weight: bold;
		}
		&-right {
			font-size: 24rpx;
		}
	}
	&-content {
		display: flex;
		justify-content: space-between;
		line-height: 36rpx;
		&-left {
			width: 45%;
			font-size: 26rpx;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}
		&-right {
			text-align: right;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			width: 45%;
		}
	}

	&-footer {
		border-top: 2rpx solid #f4f5f7;
		margin-top: 20rpx;
		padding-top: 20rpx;
		font-size: 28rpx;
		text-align: right;
		&-status {
			&-grey {
				color: #666666;
			}
			&-blue {
				color: #2272ff;
			}
		}
	}
}
</style>
