<template>
	<view class="qr-code">
		<view class="qr-code-head" @click="scanCode">
			<view class="qr-code-head-scan"><image :src="backgroundImage" class="qr-code-head-scan-image" mode=""></image></view>
		</view>
		<view class="qr-code-content"><text>扫描结果</text></view>
		<view class="qr-code-footer">
			<view class="qr-code-footer-label">充电桩箱码:</view>
			<view class="qr-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>
		</view>
	</view>
</template>

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

<style lang="scss" scoped>
.qr-code {
	background-color: #ffffff;
	border-radius: 12rpx;
	padding: 40rpx 30rpx;
	margin-bottom: 20rpx;
	color: #333333;
	&-head {
		display: flex;
		justify-content: center;
		align-items: center;
		&-scan {
			width: 240rpx;
			height: 240rpx;
			&-image {
				width: 100%;
				height: 100%;
			}
		}
	}

	&-content {
		margin-top: 20rpx;
		font-size: 32rpx;
		font-weight: 600;
	}
	&-footer {
		margin-top: 8rpx;
		display: flex;
		align-items: center;
		color: #999999;
		&-label {
			margin-right: 12rpx;
		}
		&-value {
			flex: 1;
		}
	}
}
</style>
