<template>
	<view class="box">
		<view class="infotou">
			<view class="shubaninfohead">
				<view class="shubaninfoleft">设备编号：{{equipment_log.number}}</view>
				<view class="shubaninforight">
					<image src="/static/img/fenxiang.png"></image>
					<button open-type="share">享</button>
				</view>
			</view>

			<view class="shucompany">
				<view class="shuimg">
					<image src="/static/img/company.png"></image>
				</view>
				<view class="companyname">所属公司：{{equipment_log.name}}</view>
			</view>
			<view class="shucompany weizhi">
				<view class="shuimg">
					<image src="/static/img/weizhi.png"></image>
				</view>
				<view class="companyname">所在位置：{{equipment_log.address}}</view>
			</view>
			<view class="shucompany weizhi">
				<view class="shuimg">
					<image src="/static/img/time.png"></image>
				</view>
				<view class="companyname">数板时间：{{equipment_log.time}}</view>
			</view>
			<view class="shucompany weizhi">
				<view class="shuimg">
					<image src="/static/img/yichang.png"></image>
				</view>
				<view class="companyname" v-if="equipment_log.status == 'normal'">异常状态：正常</view>
				<view class="companyname" v-if="equipment_log.status == 'hidden'">异常状态：不正常</view>
			</view>

		</view>
		<view class="yiqi">
			<view class="yiqihead">
				<view class="yiqiheadleft">仪器读数</view>
				<view class="yiqiheadright">{{equipment_log.papers}}</view>
			</view>
			<view class="yiqihead">
				<view class="yiqiheadleft">复核数量</view>
				<view class="yiqiheadright">{{equipment_log.fuhe}}</view>
			</view>
		</view>
		<view class="yewu">

			<view class="yebiaoshi">
				<view class="biaoshileft">业务标识</view>
				<view class="enterword">
					<input type="text" value="" placeholder="请输入业务标识" placeholder-class="word" v-model="biaoshi" />
				</view>
			</view>
			<view class="yebiaoshi">
				<view class="biaoshileft">业务描述</view>
				<view class="enterword">
					<input type="text" value="" placeholder="请输入业务描述" placeholder-class="word" v-model="description" />
				</view>
			</view>
			<view class="yebiaoshi">
				<view class="biaoshileft">字段1</view>
				<view class="enterword">
					<input type="text" value="" placeholder="填写字段" placeholder-class="word" v-model="ziduan1" />
				</view>
			</view>
			<view class="yebiaoshi">
				<view class="biaoshileft">字段2</view>
				<view class="enterword">
					<input type="text" value="" placeholder="填写字段" placeholder-class="word" v-model="ziduan2" />
				</view>
			</view>
			<view class="yebiaoshi">
				<view class="biaoshileft">字段3</view>
				<view class="enterword">
					<input type="text" value="" placeholder="填写字段" placeholder-class="word" v-model="ziduan3" />
				</view>
			</view>
			<view class="yebiaoshi">
				<view class="biaoshileft">字段4</view>
				<view class="enterword">
					<input type="text" value="" placeholder="填写字段" placeholder-class="word" v-model="ziduan4" />
				</view>
			</view>
			<view class="yebiaoshi">
				<view class="biaoshileft">字段5</view>
				<view class="enterword">
					<input type="text" value="" placeholder="填写字段" placeholder-class="word" v-model="ziduan5" />
				</view>
			</view>
		</view>
		<!-- 相关照片 -->
		<view class="photo" v-if="fenxiangor">
			<view class="aboutphoto">相关照片</view>

			<view class="imgbox">

				<view v-for="(item,index) in imglist" :key="index" class="imgshang">
					<view class="upload" >
						<image :src="item" @click="viewimgtu(index)"></image>
						<view class="chahao" @click="del(index)">
							<image src="../../static/img/chahao3.png"></image>
						</view>
					</view>
				</view>
				<view class="upload" @click="shoseimg">
					<image src="/static/img/upload.png"></image>
				</view>
				
				<view class='upload' @click="camera">
					<image src="/static/img/camera.png"></image>
				</view>

			</view>
		</view>
		
		<view class="photo" v-else>
			<view class="aboutphoto">相关照片</view>
		
			<view class="imgbox">
		
				<view v-for="(item,index) in imglist" :key="index" class="imgshang">
					<view class="upload" >
						<image :src="item" @click="viewimgtu(index)"></image>
						
					</view>
				</view>
				
		
			</view>
		</view>

		<view class="subshuju" @click="edifenxiangor?set_number:''" v-if="edifenxiangor">提交数据</view>
		<!-- <view class="subshuju"  v-else>提交数据</view> -->
		



	</view>
</template>

<script>
	import app from "../../App.vue"
	export default {
		data() {
			return {
				// 详情数据
				equipment_log: "",
				// 输入框数据
				biaoshi: "",
				description: "",
				ziduan1: "",
				ziduan2: "",
				ziduan3: "",
				ziduan4: "",
				ziduan5: "",
				image: [],
				chuanimg: '/static/img/upload.png',
				imglist:[],
				number:'',
				id:'',
				is_share:0,
				fenxiangor:true,
				edifenxiangor:true
			}
		},
		methods: {
			//选择照片
			shoseimg() {
				let baseurl=uni.getStorageSync("baseurl")
				
				uni.chooseImage({
					count: 1,
					sizeType: ['original', 'compressed'],
					sourceType: ['album'], //从相册选择
					// sourceType: ['camera'],//拍摄照片
					// sourceType: '',
					success: (chooseImageRes) => {
						console.log(909090808080)
						const tempFilePaths = chooseImageRes.tempFilePaths;
			
						let images = tempFilePaths[0]
						console.log(images)
						let head = {
							'token': uni.getStorageSync('token'),
			
						}
			
						uni.uploadFile({
							url: baseurl+'/api/person/upload', 
							filePath: tempFilePaths[0],
							name: 'images',
							token: uni.getStorageSync('token'),
							formData: {},
							header: head,
							// images:images
							success: (uploadFileRes) => {
								console.log(uploadFileRes);
								let data = JSON.parse(uploadFileRes.data)
								console.log(data)
								
								console.log('000999888',this.imglist)
								this.imglist.push(data.data.src) 
							}
						});
					},
					fail: function(err) {
						console.log('76543221')
						console.log(err, "失败的回调")
					}
				});
			
			
			
			},
			//拍摄照片上传
		
			camera() {
				let baseurl=uni.getStorageSync("baseurl")
				uni.chooseImage({
					count:1,
					sizeType: ['original', 'compressed'],
					//sourceType: ['album'], //从相册选择
					 sourceType: ['camera'],//拍摄照片
					// sourceType: '',
					success: (chooseImageRes) => {
						console.log(909090808080)
						const tempFilePaths = chooseImageRes.tempFilePaths;
				
						let images = tempFilePaths[0]
						console.log(images)
						let head = {
							'token': uni.getStorageSync('token'),
				
						}
				
						uni.uploadFile({
							url: baseurl+'/api/person/upload', 
							filePath: tempFilePaths[0],
							name: 'images',
							token: uni.getStorageSync('token'),
							formData: {},
							header: head,
							// images:images
							success: (uploadFileRes) => {
								console.log(uploadFileRes);
								let data = JSON.parse(uploadFileRes.data)
								console.log(data)
								this.imglist.push(data.data.src) 
							}
						});
					},
					fail: function(err) {
						console.log('76543221')
						console.log(err, "失败的回调")
					}
				});
							
			
			
			},
			//删除图片
			del(index){
				let newimglist=this.imglist;
				for(var i=0;i<newimglist.length;i++){
					if(i==index){
						newimglist.splice(i,1)
					}
					
				}
				
				this.imglist=newimglist;
				console.log('9999888',this.imglist)
			},
				
			// 获取数管剩余时间次数
			
			// 获取数板信息详情
			get_shubandetail() {
				console.log('666666',this.number)
				let t = this;
				let url = "api/equipment/getEquipmentDetail";
				let param = {
					number: this.number,
					equipment_log_id: t.id,
					is_share:t.is_share
					
				};
				app.post(url, param, 'post').then(r => {
					
					t.equipment_log = r.equipment_log;
					t.biaoshi=r.equipment_log.biaoshi;
					t.description=r.equipment_log.description;
					t.ziduan1=r.equipment_log.ziduan1;
					t.ziduan2=r.equipment_log.ziduan2;
					t.ziduan3=r.equipment_log.ziduan3;
					t.ziduan4=r.equipment_log.ziduan4;
					t.ziduan5=r.equipment_log.ziduan5;
					t.imglist=r.equipment_log.images
					
					
				}).catch(err => {
					console.log(err)
				})
			},
			// 提交数据
			set_number() {
				console.log(123)
				let t = this;
				
				if (this.imglist.length == 0) {
					uni.showToast({
						title: '请上传相关图片',
						icon: 'none'
					})
					return false
				}
				let url = "api/equipment/setEquipmentLog";
				let param = {
					number: t.equipment_log.number,
					equipment_log_id: t.equipment_log.id,
					fuhe: t.equipment_log.fuhe,
					biaoshi: t.biaoshi,
					description: t.description,
					ziduan1: t.ziduan1,
					ziduan2: t.ziduan2,
					ziduan3: t.ziduan3,
					ziduan4: t.ziduan4,
					ziduan5: t.ziduan5,
					images: t.imglist
				}
				app.post(url, param, 'post').then(r => {
					console.log(r)
					uni.showToast({
						title:'编辑成功',
						icon:'none'
					})
					t.edifenxiangor=false
				}).catch(err => {
					console.log(err)
				})
			},
			//图片预览
			viewimgtu(index) {
				console.log('999000',index)
				
				uni.previewImage({
					current: this.imglist[index],
					urls: this.imglist,
					success: function(res) {},
					fail: function(res) {},
					complete: function(res) {},
				})
			},

		},
		onLoad(options) {
			
			
			console.log('777777',options)
			this.number=options.number;
			this.id=options.id;
			if(options.type==1){
				this.is_share=1;
				this.fenxiangor=false;
				this.edifenxiangor=false
			}else{
				this.is_share=0;
				this.fenxiangor=true;
				this.edifenxiangor=true
			}
			
			this.get_shubandetail()
		},
		
		
		onShow() {
			
			
		},
		onShareAppMessage: function(res) {
			if (res.from === 'button') {
				// 来自页面内转发按钮
			}
			return {
				title: "智能点数小程序",
				path: 'pages/shubandetail/shubandetail?share=' + 'true'+'&type='+1+'&number='+this.number+'&id='+this.id
			}
		},
	}
</script>

<style>
	.imgbox{
		display:flex;
		align-items: center;
		flex-wrap: wrap;
	}
	.imgshang{
		display:flex;
		align-items: center;
	}
	.infotou {
		background: #fff;
		padding: 34rpx 32rpx;
		box-sizing: border-box;
	}

	.shubaninfohead {
		display: flex;
		align-items: center;
		justify-content: space-between;


	}

	image {
		width: 100%;
		height: 100%;
	}

	.shubaninforight {
		width: 31rpx;
		height: 31rpx;
		font-size: 0;
		position: relative;
	}

	.shubaninforight button {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		opacity: 0;
	}

	.shubaninfoleft {
		color: #0A0808;
		font-size: 36rpx;
		font-weight: bold;
	}

	.shucompany {
		display: flex;
		align-items: center;
		margin-top: 30rpx;
	}

	.shuimg {
		width: 30rpx;
		height: 30rpx;
		font-size: 0;
	}

	.companyname {
		color: #7F8389;
		font-size: 28rpx;
		margin-left: 30rpx;
	}

	.weizhi {
		margin-top: 18rpx;
	}

	.yiqihead {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.yiqi {
		background: #fff;
		box-sizing: border-box;
	}

	.yiqihead {
		padding: 42rpx 32rpx;
		box-sizing: border-box;
		border-bottom: 1rpx solid #f5f5f5;
		margin-top: 20rpx;
	}

	.yebiaoshi {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 34rpx 32rpx;
		box-sizing: border-box;
	}

	.yiqiheadleft {
		color: #0A0808;
		font-size: 30rpx;
		font-weight: bold;
	}

	.yiqiheadright {
		color: #7F8389;
		font-size: 28rpx;
	}

	.yewu {
		background: #FFFFFF;
	}

	.yebiaoshi {
		color: #0A0808;
		font-size: 30rpx;
	}

	.enterword {
		color: #7F8389;
		font-size: 28rpx;
		width: 300rpx;

	}

	.enterword input {
		text-align: right;
	}

	.word {
		color: #7F8389;
		font-size: 28rpx;
	}

	.photo {
		padding: 32rpx;
		box-sizing: border-box;
		background: #fff;
		margin-top: 20rpx;
	}

	.aboutphoto {
		color: #0A0808;
		font-size: 30rpx;
	}

	.upload {
		width: 160rpx;
		height: 160rpx;
		font-size: 0;
		margin-top: 30rpx;
		margin-left:14rpx;
		position: relative;
	}
	.chahao{
		width:40rpx;
		height:40rpx;
		position:absolute;
		top:-10rpx;
		right:-10rpx;
	}

	.subshuju {
		width: 686rpx;
		height: 100rpx;
		background: rgba(243, 152, 0, 1);
		box-shadow: 0rpx 4rpx 18rpx rgba(0, 0, 0, 0.04);
		opacity: 1;
		border-radius: 10rpx;
		color: #fff;
		font-size: 32rpx;
		text-align: center;
		line-height: 100rpx;
		margin: 42rpx auto;
	}
</style>