<template>
	<view class="item-cmd_bx">
		<view class="img_bx">
			<app-img :src="info.cover" alt="商品图" mode="aspectFit" :height="160" />
		</view>
		<navigator :url="type == STOCK_TYPE.WARN?'':`/pagesStorehouse/stockWarn/detailed?id=${info.itemId}`" class="cmd-info_bx" :class="type == STOCK_TYPE.WARN?'':'active'">
			<view class="tit">{{ info.itemName || "" }}</view>
			<view class="kc">{{ info.rank || "" }}级</view>
			<view class="num-open_bx">
				<view class="price" v-if="isPrice">￥{{ info.price }}</view>
				<template v-if="isEdit">
					<view class="open-bx warn" v-if="type == STOCK_TYPE.WARN">
						库存 <text style="color: #FF2842;margin-left: 10rpx"> {{ info.stock }}</text>
					</view>
					<view class="open-bx" v-else-if="type == STOCK_TYPE.MANAGE">
						库存 <text style="margin-left: 10rpx">{{ info.stock }}</text>
					</view>
				</template>
			</view>
		</navigator>

	</view>
</template>

<script>
import { STOCK_TYPE } from "@/utils/declare";
import AppImg from "@/components/app-img";
export default {
	name: "Commodity",
	components: {
		AppImg
	},
	props: {
		type: {
			type: String,
			default: STOCK_TYPE.WARN
		},
		isPrice: {
			type: Boolean,
			default: true
		},
		isEdit: {
			type: Boolean,
			default: true
		},
		info: {
			required: true
		}
	},
	data() {
		return {
			STOCK_TYPE
		};
	},
	methods: {
		customNum() {
			this.$emit("customNum");
		},
		addEvent() {
			this.$emit("add");
		},
		subtractEvent() {
			this.$emit("subtract");
		},
		delEvent() {
			this.$emit("del");
		}
	}
};
</script>

<style lang="scss" scoped>
.item-cmd_bx {
	position: relative;
	margin-bottom: 20px;
	.img_bx {
		height: 160px;
		width: 160px;
		position: absolute;
		left: 0px;
		top: 0px;
	}
	.cmd-info_bx {
		position: relative;
		padding-left: 177px;
		&.active{
			&:before{
				content: ' ';
				height: 22rpx;
				width: 22rpx;
				border-width: 2rpx 2rpx 0 0;
				border-color: #b2b2b2;
				border-style: solid;
				-webkit-transform: matrix(0.5, 0.5, -0.5, 0.5, 0, 0);
				transform: matrix(0.5, 0.5, -0.5, 0.5, 0, 0);
				position: absolute;
				top: 50%;
				margin-top: -12rpx;
				right: 30rpx;
			}
		}

		& .tit {
			font-size: 28px;
			font-weight: 400;
			color: #333333;
			padding-top: 10px;
		}
		& .kc {
			color: #999999;
			font-size: 24px;
			padding: 10px 0 24px;
		}
		& .num-open_bx {
			display: flex;
			align-items: center;
			& .price {
				font-size: 28px;
				color: #999999;
				flex: 1;
			}
			& .open-bx {
				color: #333333;
				text{
					font-size: 24rpx;
					font-weight: 700;
				}
				*.warn {
					color: $redColor;
				}
			}
		}
	}
}
</style>
