<template>
	<view class="often_item_wrapper" @click="toDetail(orderGoods)">
		<view class="cover-box">
			<view class="checkBox" @click.stop="changeCheck()">
				<uni-icons type="checkbox-filled" size="28" :color="activeColor" v-if="orderGoods.is_check"></uni-icons>
				<uni-icons type="circle" size="28" color="#aaa" v-else></uni-icons>
			</view>
			<view class="cover1"><img :src="orderGoods.sku_image" /></view>
			<view class="content">
				<view class="title">{{ orderGoods.goods_name }}</view>
				<!-- <view class="labels-1">
				</view> -->
				<view class="bottom">
					<view class="price">
						¥
						<text class="price1">
							{{
								parseFloat(orderGoods.goods_money)
									.toFixed(2)
									.split('.')[0]
							}}
						</text>
						.
						<text>
							{{
								parseFloat(orderGoods.goods_money)
									.toFixed(2)
									.split('.')[1]
							}}
						</text>
						/{{ orderGoods.unit ? orderGoods.unit : '件' }}
					</view>
					<view class="btn" v-if="orderGoods.stock<1">
						<text>库存不足</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			orderGoods: {
				type: Object,
				default: {}
			},
			activeColor: {
				type: String,
				default: ''
			}
		},
		data() {
			return {

			};
		},
		mounted() {

		},
		methods: {
			//商品详情
			toDetail() {
				this.$util.redirectTo('/page_goods/detail/detail', {
					goods_id: this.orderGoods.goods_id
				});
			},
			changeCheck() {
				console.log(this.orderGoods);
				this.orderGoods.is_check = !this.orderGoods.is_check;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.often_item_wrapper {
		width: 48%;
		min-height: 300rpx;
		background: #fff;
		background-color: #fff;
		margin-bottom: 30rpx;
		padding: 4rpx;
		border-radius: 16rpx;
		box-shadow: 0px 0px 20rpx 0px rgba(0, 0, 0, 0.2);

		.cover-box {
			width: 100%;
			position: relative;


			.checkBox {
				position: absolute;
				top: -20rpx;
				right: 5rpx;
			}

			.cover1 {
				width: 44vw;
				height: 44vw;
				border-radius: 16rpx;
				display: flex;
				justify-content: center;

				img {
					width: 100%;
					height: 100%;
					border-radius: 16rpx;
					object-fit: cover;
				}
			}

			.content {
				margin-top: 20rpx;
				padding: 0 10rpx;

				.title {
					// max-height: 80rpx;
					font-size: 28rpx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: #333333;
					line-height: 40rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}

				.labels-1 {
					margin-top: 10rpx !important;

					.label-item {
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-line-clamp: 1;
						-webkit-box-orient: vertical;
						font-size: 28rpx !important;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #999999 !important;
						line-height: 40rpx !important;
					}
				}

				.price {
					// height: 104rpx;
					font-size: 28rpx;
					font-family: DINAlternate-Bold, DINAlternate;
					font-weight: bold;
					color: #f33b50;

					.price1 {
						font-size: 34rpx;
					}
				}


				.bottom {
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding-bottom: 20rpx;

					.btn {
						display: flex;
						align-items: ceter;
						font-weight: normal;
						float: right;
					}

				}
			}
		}
	}
</style>