<template>
	<view>
		<view v-if="canScan" class="flex-white-plr26 ptb20 bdb_f5 fabric-out-scanRow process-in-binRow">
			<text class="mr26 process-in-binLabel">仓位<text class="redXingh">*</text></text>
			<input
				type="text"
				:value="code"
				class="fabric-out-scanInput"
				placeholder="请先扫描仓位"
				@input="$emit('code-input', $event.detail.value)"
				@confirm="$emit('confirm')"
			/>
			<text v-if="name" class="process-in-binName">{{ name }}</text>
			<u-icon
				v-if="showPhoneScan"
				class="fabric-out-phoneScanIcon"
				name="scan"
				size="44"
				color="#2979ff"
				@click="$emit('phone-scan')"
			/>
			<text v-if="binId" class="process-in-binClear" @click="$emit('clear')">更换</text>
		</view>
		<view v-else-if="showDisabledTip" class="fabric-out-scanTip">{{ disabledTip }}</view>
		<view v-if="canScan && !binId" class="fabric-out-scanTip">请先扫描仓位，再扫描布匹二维码</view>
	</view>
</template>

<script>
export default {
	props: {
		canScan: { type: Boolean, default: false },
		binId: { type: [Number, String], default: 0 },
		code: { type: String, default: '' },
		name: { type: String, default: '' },
		showPhoneScan: { type: Boolean, default: false },
		showDisabledTip: { type: Boolean, default: true },
		disabledTip: { type: String, default: '请先提交保存后再扫仓位' },
	},
};
</script>

<style scoped lang="scss">
@import '@/pages/storefabric/storeFabricBusinessOutPage.scss';

.process-in-binRow {
	background: #fff;
}
.process-in-binLabel {
	flex-shrink: 0;
}
.fabric-out-phoneScanIcon {
	margin-left: 16rpx;
	flex-shrink: 0;
}
.process-in-binName {
	margin-left: 12rpx;
	font-size: 26rpx;
	color: #333;
	max-width: 200rpx;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.process-in-binClear {
	margin-left: 16rpx;
	font-size: 26rpx;
	color: #2979ff;
	flex-shrink: 0;
}
</style>
