<template>
	<view class="addRecord">
		<navbar title="拍照/验收" :isCenter="true" :back="true"></navbar>
		<u-loading-page bg-color="#aaaaaa" loading-text="上传中" loading-mode="spinner"  color="#fff":loading="loading"></u-loading-page>
		<view style="border-top:1px solid #EAEAEA;padding:40rpx 44rpx;">
			<u--form
				labelPosition="left"
				:model="form"
				:borderBottom="false"
				:rules="rules"
				ref="uForm"
				labelWidth="70"
				
			>
				<u-form-item
					label="验收项:"
					prop="form.acceptance"
					@click="showoption = true;"
					ref="item1"
					:borderBottom="false"
				>
					<view class="selectStyle">
						<u--input
							v-model="form.acceptance"
							disabled
							disabledColor="#ffffff"
							placeholder="请选择"
							border="none"
						></u--input>
						<u-icon
								slot="right"
								name="arrow-right"
						></u-icon>
					</view>
				</u-form-item>
			<!-- 	<u-form-item
					:borderBottom="false"
					label="调试记录:"
					prop="record.record"
					
					ref="item1"
				>
					<u--textarea v-model="form.record" placeholder="请输入内容" ></u--textarea>
					
				</u-form-item> -->
				<u-form-item
					label="拍照指南:"
					prop="form.instr"
					ref="item1"
					:borderBottom="false"
				>
					<view>
						水处理及定压补水、流量开关、水管路、水泵、电控柜、基础支架、机房整体、化霜水排放等图片。
					</view>
				</u-form-item>
				<u-form-item
					label="上传图片:"
					ref="item1"
					:borderBottom="false"
				>
					<view class="contentItem">
						<view class="imgContainer" v-for="(item,index) in imageList" :key="index">
							<image mode="aspectFill" :src="item.url" @click="prevwImage(item)">
							</image>
							<view class="close" @click="deletePic(index)">
								<u-icon name="close" color="#aaaaaa" size="10"></u-icon>
							</view>
						</view>
						<view class="plus" @click="imageRecording" v-if="imageList.length<6">
							<u-icon name="plus" color="#8EC31F" size="30"></u-icon>
						</view>
					</view>
				
					<!-- 水印 -->
					<canvas style="border: 1px solid green;position: absolute;left: -5000px;" :style="{'width':w,'height': h}"
						canvas-id="firstCanvas" ref="mycanvas"></canvas>
					
				</u-form-item>
				
			</u--form>
			<view class="btn" @click="addLogHandle">
				保存
			</view>
			
		</view>
		<u-action-sheet
			:show="showoption"
			:actions="actions"
			@close="showoption = false"
			@select="selectHandle"
		>
		</u-action-sheet>
		<u-toast ref="uToast"></u-toast>
		
	</view>
</template>

<script>
	import navbar from '@/components/navbar.vue'
	import {addLogHandle} from '@/common/api.js'
	import {getToken} from '@/common/auth.js'
	
	export default {
		components:{navbar},
		data() {
			return {
				id:null,
				showoption: false,
				form:{
					acceptance:'',
					record:'',
					instr:''
				},
				actions: [
					
				],
				rules: {
					// 'form.record': {
					// 	required: true,
					// 	message: '请填写调试记录',
					// 	trigger: ['blur', 'change']
					// },
					'form.acceptance': {
						required: true,
						message: '请选择验收项',
						trigger: ['blur', 'change']
					},
				},
				//水印
				w: 0,
				h: 0,
				imgPath: "",
				imageList: [],
				type: "tpurl",
				loading:false,
				
			}
		},
		onLoad(option) {
			this.id=option.id
			
			let arr = uni.getStorageSync('acceptance')
			console.log(arr)
			this.actions=[]
			arr.forEach(item=>{
				this.actions.push({name:item.title})
				
			})
		},
		methods: {
			
			
			addLogHandle(){
				let image;
				if(this.imageList.length>0){
					let arr = this.imageList.map(item=>{
						return item.path
					})
					image=arr.join(',')
				}else{
					image=''
				}
				let params={
					wordorder_id:this.id.toString(),
					acceptance:this.form.acceptance,
					record:this.form.record,
					image:image,
					custom: { auth: true },
				}
				addLogHandle(params).then(res=>{
					console.log(res,"iiiii")
					if(res.code==1){
						this.$refs.uToast.show({
							message:'添加成功'
						});
						uni.navigateBack({
							delta:1
						})
					}
				})
			},
			selectHandle(val){
				this.form.acceptance = val.name
			},
			//拍照:压缩
			imageRecording() {
				let that = this;
				uni.chooseMedia({
					count: 1,
					mediaType: ['image'],
					sizeType: ['compressed'],
					quality: 0.8,
					sourceType: ['camera'], //选择图片的来源	
					success: res => {
						//图片数组
						let tempFilePath = res.tempFiles[0].tempFilePath;
						console.log(res)
						uni.compressImage({
							src: tempFilePath,
							quality: 30,
							width: '40%',
							height: '40%',
							success: res2 => {
								console.log(res2,"000")
								that.getImageInfo(res2.tempFilePath);
							},
							fail: (err) => {
								console.log(err)
							}
						})
					},
					fail: () => {
					
					}
				})
			},
			//获取压缩图片信息
			getImageInfo(e) {
				this.loading = true;
				let that = this;
				uni.getImageInfo({
					src: e,
					success: (res) => {
						that.canvasWather(res)
			
					},
					fail: () => {
						
					}
				})
			},
			//水印
			canvasWather(res) {
				let that = this;
				let ctx = uni.createCanvasContext('firstCanvas', this);
				that.imgPath = res.path
				that.w = res.width / 2 + 'px';
				that.h = res.height / 2 + 'px';
				// let userInfo = uni.getStorageSync('USER_INFO');
				let nowTime = that.newDate(Date.now());
				setTimeout(() => {
					// this.ymd = this.$refs.ymdHms.dateShow;
					//初始化画布
					ctx.fillRect(0, 0, res.width / 2, res.height / 2);
					// //将图片src放到cancas内，宽高为图片大小
					ctx.drawImage(res.path, 0, 0, res.width / 2, res.height / 2);
					ctx.beginPath()
					ctx.setFontSize(8)
					ctx.setFillStyle('red');
					let firstY = res.height / 2 - 60;	
					// ctx.fillText(realName, 10, res.height / 2 - 60)
					ctx.fillText(`时间${nowTime}`, 5, res.height / 2 - 10)
					ctx.draw(false, () => {
						uni.canvasToTempFilePath({ //将画布中内容转成图片，即水印与图片合成
							canvasId: 'firstCanvas',
							success: (res) => {
								// that.saveFile(res);
								uni.uploadFile({
									url: that.baseUrl+'/api/common/upload', // 仅为示例，非真实的接口地址
									filePath: res.tempFilePath,
									name: 'file',
									formData: {
										user: 'test',
										token:getToken()
									},
									success: (res) => {
										if(JSON.parse(res.data).code==1){
											setTimeout(() => {
												this.imageList.push({url:JSON.parse(res.data).data.fullurl,path:JSON.parse(res.data).data.url})
												this.loading = false;
											}, 1000)
										}else{
											uni.$u.toast(JSON.parse(res.data).msg)
											
										}
									},
									fail: (res) => {
										console.log(res,"rrr")
									}
								});
							},
							fail: (err) => {
								
							}
						})
					})
				}, 500)
			},
			//保存本地
			saveFile(res) {
				let that = this;
				uni.saveFile({
					tempFilePath: res.tempFilePath,
					success: (res2) => {
						//图片列表获取
						that.imageList.push(res2.savedFilePath)
					},
					fail: () => {
						
					}
				})
			},
			newDate(time) {
			    var date = new Date(time)
			    var y = date.getFullYear()
			    var m = date.getMonth() + 1
			    m = m < 10 ? '0' + m : m
			    var d = date.getDate()
			    d = d < 10 ? '0' + d : d
			    var h = date.getHours()
			    h = h < 10 ? '0' + h : h
			    var minute = date.getMinutes()
			    minute = minute < 10 ? '0' + minute : minute
			    var s = date.getSeconds()
			    s = s < 10 ? '0' + s : s
			    return y + '-' + m + '-' + d + ' ' + h + ':' + minute + ':' + s
			},
			prevwImage(path) {
				console.log("888",path)
				let url = [path.url]
				uni.previewImage({
					urls: url,
					success: (res) => {
					},
					fail: () => {
						
					}
				});
			},
			//上传照片
			// uploadFilePromise(url) {
			// 	return new Promise((resolve, reject) => {
			// 		let a = uni.uploadFile({
			// 			url: this.baseUrl+'/api/common/upload', // 仅为示例，非真实的接口地址
			// 			filePath: url,
			// 			name: 'file',
			// 			formData: {
			// 				user: 'test',
			// 				token:getToken()
			// 			},
			// 			success: (res) => {
			// 				if(JSON.parse(res.data).code==1){
			// 					setTimeout(() => {
			// 						this.finishImageList.push({url:JSON.parse(res.data).data.fullurl,path:JSON.parse(res.data).data.url})
			// 						resolve(res.data)
			// 					}, 1000)
			// 				}else{
			// 					uni.$u.toast(JSON.parse(res.data).msg)
								
			// 					resolve(res.data)
			// 				}
			// 			},
			// 			fail: (res) => {
			// 				console.log(res,"rrr")
			// 			}
			// 		});
			// 	})
			// },
			//删除图片
			deletePic(index) {
				// this[`fileList${event.name}`].splice(event.index, 1)
				this.imageList.splice(index, 1)
			},
			
		}
	}
</script>

<style lang="scss" scoped>
.addRecord{
	min-height: calc(100vh);
	background-color: #ffffff;
	
}
/deep/.u-upload__deletable{
	height: 50rpx  !important;
	width: 50rpx  !important;
	z-index:999 !important;
	.u-icon__icon{
		font-size: 40rpx !important;
		line-height: 40rpx !important;
		
	}
}

.btn{
	line-height: 98rpx;
	height: 98rpx;
	background: #8EC31F;
	border-radius: 10px;
	// margin:0 24rpx;
    text-align: center;
	font-size: 30rpx;
	font-family: Alibaba PuHuiTi;
	font-weight: 400;
	color: #FFFFFF;
	margin-top:80rpx;
}
.selectStyle{
	display: flex;
	padding: 30rpx;
	background: #FFFFFF;
	border: 1px solid #E5E7EA;
	border-radius: 10rpx;
}



.contentItem{
	display: flex;
	flex-wrap: wrap;
	.plus{
		width:200rpx;
		height:200rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		background: #FFFFFF;
		border: 1px solid #E5E7EA;
		border-radius: 10rpx;
		margin:0rpx 10rpx;
	}
	.imgContainer{
		margin:0rpx 10rpx;
		position: relative;
		image{
			width:200rpx;
			height:200rpx;
			border-radius: 10rpx;
		}
		.close{
			position: absolute;
			z-index:99;
			top:10rpx;
			right:10rpx;
			background-color: #fff;
			border-radius:50%;
			padding:10rpx;
		}
	}
}
/deep/.u-transition{
	z-index:1000;
}

</style>
