<template>
	<view style="display: flex;flex-direction: column;box-sizing: border-box;">

		<view v-if="border == 1 || border == 3" class="border"></view>

		<view style="width: 100%;height: 30rpx;"></view>
		<view style="display: flex;flex-direction: row;align-items: center;margin-left: 16rpx;margin-right: 15rpx;">
			<text style="font-size: 26rpx;color: #101010;" :class="{ 'enabled': !enabled }">{{title}}</text>
			<image v-if="required" src="../../static/asterisk.png"
				style="width: 14rpx;height: 16rpx;margin-left: 12rpx;flex-shrink: 0;"></image>
		</view>
		<view style="width: 100%;height: 30rpx;"></view>

		<!--选择类型ocr识别-->
		<view v-if="data.length > 0"
			style="display: flex;flex-direction: row;align-items: center;margin-left: 16rpx;margin-right: 15rpx;"
			:class="{ 'enabled': !enabled }">
			<input style="font-size: 28rpx;color: #2E2D2D;flex: 1;" placeholder-style="font-size: 28rpx;color: #BCBCBC;"
				:value="input" @input="inputValue" :placeholder="hint" />
			<picker :disabled="!enabled" :range-key="dataDetailKey" :range="data" @change="custom">
				<image src="../../static/scan.png"
					style="width: 45rpx;height: 45rpx;margin-left: 12rpx;flex-shrink: 0;">
			</picker>
			</image>
		</view>

		<!--默认身份证类型-->
		<view v-if="data.length == 0"
			style="display: flex;flex-direction: row;align-items: center;margin-left: 16rpx;margin-right: 15rpx;"
			:class="{ 'enabled': !enabled }">
			<input style="font-size: 28rpx;color: #2E2D2D;flex: 1;" placeholder-style="font-size: 28rpx;color: #BCBCBC;"
				:value="input" @input="inputValue" :placeholder="hint" />
			<image src="../../static/scan.png" style="width: 45rpx;height: 45rpx;margin-left: 12rpx;flex-shrink: 0;"
				@click="scan">
			</image>
		</view>

		<view style="width: 100%;height: 25rpx;"></view>

		<view v-if="border == 2 || border ==3" class="border"></view>
	</view>
</template>

<script>
	//引入配置
	import B64 from '../../commons/LocalFile2Base64.js';

	export default {
		name: "item-scan",
		props: {
			// 是否必填，即是否显示星号
			required: {
				type: Boolean,
				default: false
			},
			// 标题
			title: {
				type: String,
				default: ""
			},
			// 提示信息
			hint: {
				type: String,
				default: ""
			},
			// 显示的内容
			content: {
				type: String,
				default: ""
			},
			// 分割线
			// 0 无上线分割线
			// 1 只有上分割线
			// 2 只有下分割线
			// 3 上下都有分割线
			border: {
				type: Number,
				default: 2
			},
			// 是否可使用
			enabled: {
				type: Boolean,
				default: true
			},
			// 弹出数据
			data: {
				type: Array,
				default () {
					return []
				}
			},
			// 弹出数据选择取值key（识别类型的）
			dataDetailKey: {
				type: String,
				default: ""
			}
		},
		created() {
			this.input = this.content
		},
		data() {
			return {
				input: "",
				select: ""
			};
		},
		methods: {
			scan() {
				if (this.enabled) {
					let _this = this;
					uni.chooseImage({
						count: 1,
						sizeType: ['original'],
						success: function(res) {
							B64(res.tempFilePaths[0])
								.then((res) => {
									// 成功
									console.log(res)
								}, (err) => {
									// 失败
									_this.Toast(err)
								})
						}
					})
				}
			},
			inputValue(e) {
				console.log(e.detail.value)
			},
			custom(e) {
				let index = e.detail.value
				// ocr类型
				this.select = this.data[index][this.dataDetailKey]
				this.scan()
			}
		}
	}
</script>

<style lang="scss">
	.border {
		height: 1rpx;
		background-color: #DFDFDF;
	}

	.enabled {
		opacity: 0.5;
	}
</style>
