<template>
	<view class="pages flex flex_column">
		<view class="forms">
			<view class="flex align_center">
				<view class="labes">扫描唯一码:</view>
				<view class="inputs"><image style="width: 100%;height: 35px;background: #eaeaea;" :src="tempImg"></image></view>
				<view class="btns" @click="openCamera"><image src="../../static/tab/tab_scan_normal.png"></image></view>
			</view>
			<view class="flex align_center">
				<view class="labes">识别唯一码:</view>
				<view class="inputs"><u-input :focus="focusInput" v-model="uuidCode" maxlength="10" border clearable type="text" placeholder="请输入唯一码"></u-input></view>
				<view class="btns"><u-button type="primary" size="mini" @click="addTags">添加</u-button></view>
			</view>
		</view>
		<view class="tags-box">
			<u-tag v-for="item in uuid" :key="item.code" :text="item.code" closeable @close="tagClick(item)" />
		</view>
		<view class="buttons">
			<u-button type="primary" @click="saveForm">确定</u-button>
		</view>
	</view>
</template>

<script>
	import { getTraceCodeQueryList } from '@/api/trace'
	export default {
		data() {
			return {
				tempImg: '',
				uuidCode: '',
				uuid: [],
				focusInput: false
			}
		},
		onShow() {
			const uuidTemp = this.$store.state.vuex_uuidTempData
			// 如果有未完成的质保单
			if(uuidTemp && uuidTemp.traceCodeList){
				this.uuid = uuidTemp.traceCodeList
			}
			
			// 识别结束
			const ret = this.$store.state.vuex_tempData
			if(ret&&ret.retCode){
				this.tempImg = ret.filePath
				this.uuidCode = ret.retCode
			}
			this.focusInput = ret&&ret=="inputCode"
		},
		onHide() {
			this.$store.state.vuex_tempData = null
		},
		methods: {
			tagClick(item){
				const index = this.uuid.findIndex(k => k.code == item.code)
				if(index>=0){
					this.uuid.splice(index,1)
				}
			},
			async addTags(){
				if(this.uuid.length>=4){
					uni.showToast({
						icon: 'none',
						title: '唯一码一次最多可添加4个，请进行删减后再添加。'
					})
					return
				}
				if(this.uuidCode){
					const hasCode = await getTraceCodeQueryList({traceCode: this.uuidCode,pageSize:1,pageNo:1}).then(res => res.data)
					console.log(hasCode)
					// 已存在，且没有使用过
					if(hasCode.count==0){
						uni.showToast({
							icon: 'none',
							title: '唯一码不存在'
						})
						return
					}
					if(hasCode.list && hasCode.list.length > 0 && !hasCode.list[0].warrantyState){
						this.uuid.push({
							code: this.uuidCode,
							name: '箭冠轮胎雪胎RT-8000',
							state: ['inhand','outof'][Math.random() < 0.5 ? 0 : 1]
						})
					}
					this.uuidCode = ''
				}else{
					uni.showToast({
						icon: 'none',
						title: '请扫描或手动输入唯一码'
					})
				}
			},
			openCamera(){
				uni.navigateTo({
					url: "/pages/scan-frame/scan-frame?pageType=UUID"
				})
			},
			saveForm(){
				if(this.uuid.length){
					this.$store.state.vuex_uuidTempData = {traceCodeList:this.uuid}
					uni.redirectTo({
						url: "/pagesA/qualityPolicy/creatCarInfo"
					})
				}else{
					uni.showToast({
						icon: 'none',
						title: '请扫描或手动输入唯一码'
					})
				}
			}
		}
	}
</script>

<style lang="less">
.pages{
	height: 100vh;
	background: #fff;
	.tags-box{
		flex-grow: 1;
		padding: 1rem;
		/deep/ .u-tag{
			margin: 0.5rem 1rem;
		}
	}
	.buttons{
		padding: 1rem 6rem 3rem;
	}
}
.forms{
	padding: 1rem 0 0;
	> view{
		border-bottom: 1px solid #eee;
		padding: 0.6rem 1rem;
	}
	.labes{
		width: 5rem;
	}
	.inputs{
		flex-grow: 1;
	}
	.btns{
		width: 3rem;
		text-align: center;
		image{
			width: 1.6rem;
			height: 1.6rem;
		}
	}
}
</style>
