<template>
	<view class="bar-code">
		<view class="bar-code-content"><text>快递单号</text></view>
		<view class="bar-code-footer">
			<view class="bar-code-footer-label">快递单号:</view>
			<view class="bar-code-footer-value">
				<u-input
					type="text"
					class="input-item"
					v-model="dataValue"
					@input="valueChange"
					placeholder="请输入"
					:placeholder-style="placeholderStyle"
					:custom-style="customStyle"
					:clearable="false"
					border-color="#ECECEC"
					maxlength="200"
					:cursor-spacing="10"
					:disabled="disabled"
				/>
				<view class="bar-code-footer-value-icon" @click="scanCode"><u-icon name="scan"></u-icon></view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	name: 'ReceiveBarCode',
	props: {
		value: {
			type: [String, null]
		},
		disabled: {
		  type: Boolean,
		  default: false,
		},
	},
	data() {
		return {
			dataValue: ''
		};
	},
	mounted() {
		this.dataValue=this.value
	},
	watch:{
		value(data){
			this.dataValue=data
		}
	},
	computed: {
		customStyle() {
			return {
				'border-radius': '12rpx',
				color: '#999999',
				'font-size': '26rpx',
				height: '76rpx'
			};
		},
		placeholderStyle() {
			return 'color:#999999;font-size:26rpx';
		}
	},
	created() {},
	methods: {
		scanCode() {
			if(this.disabled) return false;
			// 允许从相机和相册扫码
			uni.scanCode({
				scanType: ['barCode'],
				success: res => {
					let { scanType, result } = res;
					console.log('类型：' + scanType);
					console.log('内容：' + result);
					this.dataValue = result.substring(0,200);
					this.$emit('onBarCodeChange', this.dataValue);
				}
			});
		},
		valueChange(e) {
			this.$emit('onBarCodeChange', e);
		}
	}
};
</script>

<style lang="scss" scoped>
.bar-code {
	background-color: #ffffff;
	border-radius: 12rpx;
	padding: 40rpx 30rpx;
	margin-bottom: 20rpx;
	color: #333333;
	&-content {
		font-size: 32rpx;
		font-weight: 600;
	}
	&-footer {
		margin-top: 8rpx;
		display: flex;
		width: 100%;
		align-items: center;
		color: #999999;
		&-label {
			margin-right: 12rpx;
		}
		&-value {
			flex: 1;
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: space-between;
			background-color: #f4f5f7;
			border-radius: 6px;
			padding: 0rpx 20rpx;
			.input-item {
				flex: 1;
			}
			&-icon {
				width: 40rpx;
				height: 38rpx;
				line-height: 38rpx;
				text-align: center;
			}
		}
	}
}
</style>
