<template>
	<view class="spare-item">
		<view class="left-view">
			<u-checkbox v-if="showChecked" icon-size="28" size="40" v-model="check" @change="handleChange"
				shape="circle" />
			<image class="image-view" :src="imageUrl"></image>
		</view>
		<view class="info-view">
				<view class="name-text">{{item.name}}</view>
				<view class="info-bottom">
						<view>{{remarkText}}</view>
						<view class="count-view">
							<view v-if="showChecked">
								<u-number-box v-model="value" :min="item.min || 0" :max="item.max || item[type]" @minus="numChange"
									@plus="numChange" @blur="numChange"></u-number-box>
							</view>
							<text v-else>x{{item[type]|| 0}}</text>
							<text class="unit-text" v-if="item.unit">{{item.unit}}</text>
						</view>
				</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			showChecked: { // 是否显示勾选
				type: Boolean,
				default () {
					return false
				}
			},
			type: { // 'stock' 仓库； 'quantity' 订单
				type: String,
				default: 'quantity'
			},
			item: {
				type: Object,
				default () {
					return {}
				}
			},
			noteText: {
				type: String,
				default: ''
			},
		},
		data() {
			return {
				value: 0, // 选数
				check: false, // 选中
			}
		},
		computed: {
			remarkText() {
				if (this.item.categoryName || this.item.brandName) {
					return (this.item.categoryName || '通用') + '-' + (this.item.brandName || '通用')
				} else {
					return '通用'
				}
			},
			imageUrl() {
				return this.item.images ? process.uniEnv.systemUrl.apiUrl + this.item.images.split(',').shift() : this
					.placeholderImage
			},
			placeholderImage() {
				return process.uniEnv.qn_base_url + 'morentupian.png'
			},
		},
		watch: {
			'item.quantity'(val) {
				this.check = val > 0
				this.value = val
			},
			'item.selected'(val) {
				this.check = val
				this.value = val ? this.item.stock : 0
			},
		},
		methods: {
			handleChange(event) {
				this.value = event.value ? this.item.stock : 0
				this.$emit('change', event.value)
				this.$emit('numChange', this.value)
			},
			numChange(event) {
				this.check = event.value > 0
				this.$emit('change', this.check)
				this.$emit('numChange', event.value)
			},
		}
	}
</script>

<style lang="scss" scoped>
	.spare-item {
		display: flex;
		align-items: center;

		.left-view {
			display: flex;
			align-items: center;

			.image-view {
				width: 120rpx;
				height: 120rpx;
				margin-right: 20rpx;
				flex-shrink: 0;
			}
		}

		.info-view {
			font-size: 24rpx;
			color: #333333;
			width: 100%;
			.name-text {
				font-size: 32rpx;
				font-weight: bold;
				color: #333333;
				margin-bottom: 30rpx;
			}
			.info-bottom {
				display: flex;
				justify-content: space-between;
				align-items: center;
				.count-view {
					font-size: 28rpx;
					color: #333333;
					display: flex;
					justify-content: flex-end;
					align-items: center;
					.unit-text {
						padding-left: 10rpx;
					}
				}
			}
		}
	}
</style>
