<template>
	<view class="pages flex flex_column">
		<uniNavBar title="创建质保单-唯一码" statusBar :shadow="false" @click-left="toBack"></uniNavBar>
		<view class="forms">
			<view class="flex align_center">
				<view class="labes">扫描唯一码:</view>
				<view class="inputs">
					<u-button size="medium" @click="openCamera"><image style="height: 0.9rem;width: 0.9rem;margin-right: 0.3rem;" src="../../static/tab/tab_scan_normal.png"></image> 点击扫描 </u-button>
				</view>
			</view>
			<view class="flex align_center">
				<view class="labes">识别唯一码:</view>
				<view class="inputs"><u-input :focus="focusInput" v-model="uuidCode" maxlength="15" border clearable type="number" placeholder="请输入唯一码"></u-input></view>
				<view class="btns"><u-button :loading="loading" :custom-style="{padding:'0 20rpx'}" type="primary" size="medium" @click="addTags">添加</u-button></view>
			</view>
		</view>
		<view class="tags-box">
			<u-tag v-for="item in uuid" :key="item.id" :text="item.traceCode" closeable @close="tagClick(item)" />
		</view>
		<view class="buttons">
			<u-button type="primary" @click="saveForm">下一步</u-button>
		</view>
	</view>
</template>

<script>
	import uniNavBar from '@/components/uni-nav-bar/uni-nav-bar.vue'
	import { getTraceCodeQueryList } from '@/api/trace'
	export default {
		components: {
			uniNavBar
		},
		data() {
			return {
				tempImg: '',
				uuidCode: '',
				uuid: [],
				focusInput: false,
				loading: false
			}
		},
		onShow() {
			const uuidTemp = this.$store.state.vuex_uuidTempData
			// 如果有未完成的质保单
			if(uuidTemp && uuidTemp.traceCodeList){
				this.uuid = uuidTemp.traceCodeList
			}
		},
		onHide() {
			this.$store.state.vuex_tempData = null
		},
		methods: {
			toBack(){
				uni.navigateBack()
			},
			tagClick(item){
				const index = this.uuid.findIndex(k => k.traceCode == item.traceCode)
				if(index>=0){
					this.uuid.splice(index,1)
				}
			},
			async addTags(){
				if(this.uuid.length>=4){
					uni.showToast({
						icon: 'none',
						title: '唯一码一次最多可添加4个，请进行删减后再添加。'
					})
					return
				}
				const hasCode = this.uuid.find(item => item.traceCode == this.uuidCode)
				if(hasCode){
					uni.showToast({
						icon: 'none',
						title: '唯一码已添加！'
					})
					return
				}
				if(this.uuidCode){
					this.loading = true
					const hasCode = await getTraceCodeQueryList({traceCode: this.uuidCode,pageSize:1,pageNo:1}).then(res => res.data)
					console.log(hasCode)
					// 已存在，且没有使用过
					if(hasCode && hasCode.count==0){
						uni.showToast({
							icon: 'none',
							title: '唯一码不存在'
						})
						this.loading = false
						return
					}
					if(hasCode && hasCode.list && hasCode.list.length > 0){
						if(!hasCode.list[0].warrantyState){
							this.uuid.push(hasCode.list[0])
						}else{
							uni.showToast({
								icon: 'none',
								title: '唯一码已使用'
							})
						}
					}
					if(!hasCode){
						uni.showToast({
							icon: 'none',
							title: '系统异常，请联系管理员！'
						})
					}
					this.uuidCode = ''
					this.loading = false
				}else{
					uni.showToast({
						icon: 'none',
						title: '请扫描或手动输入唯一码'
					})
				}
			},
			openCamera(){
				const _this = this
				uni.scanCode({
					scanType: ['barCode','datamatrix','pdf417'],
					success: function (res) {
						// console.log('条码类型：' + res.scanType);
						// console.log('条码内容：' + res.result);
						// _this.tempImg = ret.filePath
						_this.uuidCode = res.result
						_this.focusInput = true
					}
				});
			},
			saveForm(){
				if(this.uuid.length){
					if(this.$store.state.vuex_uuidTempData){
						this.$store.state.vuex_uuidTempData.traceCodeList = this.uuid
					}else{
						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;
		button{
			width: 100%;
		}
	}
	.btns{
		width: 3rem;
		text-align: center;
		image{
			width: 1.6rem;
			height: 1.6rem;
		}
	}
}
</style>
