<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">
					<input type="number" placeplaceholder="请输入复核数量" v-model="fuhe"  placeholder-class="fuheshuliangname" />
					<!-- {{}} -->
				</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" >提交数据</view> -->

		<!-- <view @click="tijiao">提交数据</view> -->
		<!-- <view class="subshuju" @click="edifenxiangor?tijiao:''" v-if="edifenxiangor">提交数据{{edifenxiangor}}</view> -->
		<view class="subshuju" @click="tijiao" v-if="edifenxiangor">提交数据</view>
		<view class="subshuju" v-else>提交数据</view>
		<!-- <view class="subshuju"  v-else>提交数据</view> -->
		<view class="tupianshangchuan" v-if="picshangchuan">图片上传中</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,
				picshangchuan: false,
				fuhe:''
			}
		},
		methods: {
			//选择照片
			shoseimg() {
				let baseurl = uni.getStorageSync("baseurl")

				uni.chooseImage({
					count: 1,
					sizeType: ['original', 'compressed'],
					sourceType: ['album'], //从相册选择
					// sourceType: ['camera'],//拍摄照片
					// sourceType: '',
					success: (chooseImageRes) => {
						this.picshangchuan = true
						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) => {
								this.picshangchuan = false

								let data = JSON.parse(uploadFileRes.data)
								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) => {
						this.picshangchuan = true
						const tempFilePaths = chooseImageRes.tempFilePaths;

						let images = tempFilePaths[0]

						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) => {
								this.picshangchuan = false
								let data = JSON.parse(uploadFileRes.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.fuhe=r.equipment_log.fuhe
					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)
				})
			},
			// 提交数据
			tijiao() {
				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.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)
					uni.showToast({
						title: err.msg,
						icon: 'none'
					});
				})
			},
			//图片预览
			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;
	}
	.yiqiheadright input{
		text-align: right;
	}

	.fuheshuliangname {
		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;
	}

	.tupianshangchuan {
		width: 200rpx;
		height: 50rpx;
		background: #3E3A39;
		color: #fff;
		font-size: 24rpx;
		text-align: center;
		line-height: 50rpx;
		opacity: 0.5;
		position: absolute;
		border-radius: 20rpx;
		top: 45%;
		left: 50%;
		transform: translate(-50%, -50%)
	}
</style>