<template>
	<view class="page">
		<form @submit="formSubmit1">
			<view class="face-wapper">
				<label class="font">钢卷</label>
				<input name="matId" type="text" v-model="matId"  class="input" placeholder="请输入钢卷号" placeholder-class=""/>
				<!-- <button type="primary"  size="mini" style="width: 145upx;height: 80upx;font-size: 8px;margin-top: 10upx;padding-top: 18upx;" @click="tel">扫描</button> -->
				<button type="primary"  size="mini" style="width: 145upx;height: 80upx;font-size: 8px;margin-top: 10upx;padding-top: 18upx;"   @click="result">重置</button>
			</view>
			
		</form>
		<!-- <image :src="tempFilePaths"></image> -->
		<div class="box" v-for="(item,index) in tempFilePaths" :key='index'>
			{{index+1}}
			<image :src="item"  @click="previewImg(item)"></image>
		</div>
		
		
		<view class="anjian">
			<view class="ziti">图片处理:</view>
			<button type="primary"  class="button"  size="mini" @click="xuan" >选择图片</button>
			<button type="primary"  class="button"  size="mini" @click="chuan" >图片上传</button>
		</view>
	</view>
</template>

<script>
	import QSpicker from '@/components/QuShe-picker/QuShe-picker.vue';
	import Step1 from '@/common/step_1.js';
	import Step2 from '@/common/step_2.js';
	export default {
		components: {
			QSpicker
		},
		data() {
			return {
				vehicleId:"",
				matId:"",
				carId:"",
				tempFilePaths:"",
				shipId:"",
				cheng:false,
				he:'',
				timer:'',
				type1:'',
				type2:'',
				custom2Set_2: {
					itemObject: {
						step_1: [],
						step_2: []
					},
					steps: {
						step_1_value: "name", //第一级显示的属性名
						step_2_value: "name", //第二级显示的属性名
						step_3_value: "" //第三级显示的属性名
					},
					defaultValue: [1, 0], //初始数据
					linkageNum: 2, //3 表示为3级联动
					linkage: true //true 表示开启联动
				},
			}
		},
		onLoad() {
			if(this.he==undefined ||this.he==null||this.he==''){
				this.he='选择类型/名称'
			}
			this.custom2Set_2.itemObject.step_1=Step1
			this.custom2Set_2.itemObject.step_2=Step2
		},
		methods: {
			//查询，提交表单内的板号
				formSubmit1(e){
					var me = this;
					this.matId=e.detail.value.matId
					if(this.matId=="" ){
						uni.showModal({
							title: '提示',
							content:'钢卷号不能为空'
						})
						return;
					}
					this.path ='/wtm/delivery-plan/doVerificatByMatId.action?&matId='+this.matId
					var res = uni.getStorageSync('token')
					uni.request({
						url :this.serverUrl+this.path,
						method: 'POST',
						header: {
							'Authorization':  res.token,
							'X-Username': res.username
						},
						success: (res) => {
							var r = res.data.success
							if(r ==false){
								uni.showToast(
									{title:res.data.meta.message ,icon:'none',duration: 2000}
								)
							}else if(r == true){
								uni.showToast(
									{title:res.data.data ,icon:'none'}
								)
							}
							this.matId=''
							console.log(res)
							console.log("成功")
						},
						fail: (res) => {
							console.log(res);
							console.log("失败");
						}
						})
						
				},
				changeShow(name) {
					this.$refs[name].show();
				},
				showQSPicker(res) {
					console.log(`pickerId为${res.pickerId},类型为${res.type}的QS-picker显示了`);
				},
				hideQSPicker(res) {
					console.log(`pickerId为${res.pickerId},类型为${res.type}的QS-picker隐藏了了`);
				},
				
				//扫条形码
				 tel(){
	                uni.scanCode({
	                    success:(res)=>{ 
							var matNo = res.result
							console.log(matNo)
							this.matId=matNo
	                    }
	                });
	            },
			result(){
				this.matId=''
			},
			//上传
			xuan(){
				var me = this;
				uni.chooseImage({
					count:30,
					//压缩类型
					sourceType: ['album', 'camera'], //从相册选择、摄像头
					success:(res)=>{
						 me.tempFilePaths=[]
						 for(var i=0;i<res.tempFilePaths.length;i++){
							 me.tempFilePaths.push(res.tempFilePaths[i]);
							 console.log("tempFilePaths" + me.tempFilePaths[i])
						 }
					}
				});
			},
			chuan(){
				var me = this;
				if(this.matId ==''){
					uni.showModal({
						title: '提示',
						content:'请扫描钢卷号'
					})
					return
				}
					let b=0
					let a
					for(a=0;a<this.tempFilePaths.length;a++){
						uni.uploadFile({
							url:me.serverUrl+'/img/updataImg',
							filePath :me.tempFilePaths[a],
							name:'file',
							// method: 'POST',
							formData: {
								"matId":me.matId,
								//首瀚鑫-包装前  首瀚鑫-包装后 首实-包装前 首实-包装后
								"filePathName":"SHX-BZQ",
								"index":a+1
							},
								success:(myres)=>{
									var r= myres.data
									var a =JSON.parse(r)
									if(b!=0){
									}else{
										b=1
										if(a.status==200){
											uni.showModal({
												title: '提示',
													content:'操作成功'
												})
											}else{
												uni.showModal({
													title: '提示',
													// 非正式库事用
													content:'数据异常'
												})
											}
									}
									},
 			fail: (res) => {
 				
 				console.log(res)
				console.log("网络错误")
				}
								});
					}
				
				
				
			},
			//获取当前时间
			getTime(){
				var date = new Date();
				var year = date.getFullYear();
				var month = date.getMonth() + 1;
				var day = date.getDate();
				var hour = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
				var minute = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
				var second = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
				month >= 1 && month <= 9 ? (month = "0" + month) : "";
				day >= 0 && day <= 9 ? (day = "0" + day) : "";
				this.timer = year + '-' + month + '-' + day + ' ' + hour + ':' + minute + ':' + second;
				console.log(this.timer)
			},
			previewImg(current){
				console.log(current)
				uni.previewImage({
					current,	//当前的图片路径必填
					urls:this.tempFilePaths, //数组文件路径必填
					loop:true,   //循环在5+app才有效
					indicator:"default" //指数器同样也是5+app有效
				})
			}
		}
	}
</script>

<style>
	@import url("heyan.css");
</style>