<template>
	<view class="content">

		<view class="takepicture" :style="{ 'height': allhight + 'px'}" v-show="isshow==true">
			<!-- 头部 -->
			<view class="mode">
				<image :src="imginfo" mode=""></image>
				<view class="one" @click="takeFlash">
					<image v-show="num==0" src="../../static/flash.png" mode=""></image>
					<image v-show="num==1" src="../../static/flashon.png" mode=""></image>
					<text>闪光灯</text>
				</view>

				<view class="one" @click="countDown">
					<image src="../../static/count.png" mode=""></image>
					<text>倒计时</text>
				</view>
				<view class="one" @click="devicePosition">
					<image src="../../static/turn.png" mode=""></image>
					<text>翻转</text>
				</view>
				<view class="one">
					<image src="../../static/set.png" mode=""></image>
					<text>设置</text>
				</view>
			</view>
			<!-- 相机 -->
			<view class="photo" :style="{ 'height': Height + 'px'}">
				<camera :device-position="position" :flash="flash" mode="mode" :style="{ 'height': Height + 'px'}">
				</camera>
			</view>
			<!-- 底部 -->
			<view class="bot" v-show="watermode">
				<view class="left" @click="takeAlbum">
					<image src="../../static/photo.png" mode=""></image>
				</view>
				<view class="center" @click="takePhotoAction">
					<image src="../../static/camera.png" mode=""></image>
				</view>
				<view class="right" @click="watermode=!watermode">
					<image src="../../static/water.png" mode=""></image>
				</view>
			</view>
			<view class="bota" v-show="!watermode">
				<view class="back" @click="watermode=!watermode">返回</view>
				<view class="watera" @click="draw(1)">
					<view class="ti">
						19:23:45
					</view>
					<view class="ad">
						2023-10-21 星期六 选择地点
					</view>
				</view>
			</view>
			<!-- 水印1 -->
			<cover-view class="cameraa">
				<cover-view class="hour">{{nowTimes}}</cover-view>
				<cover-view @click="getLocation" class="time">{{nowTime}} {{addRess?addRess:'选择地点'}}</cover-view>
			</cover-view>


			<!-- 画水印 -->
			<!-- canvas元素，利用它的功能，实现添加水印style="position: absolute;top: -999999px;" -->
			<view style="position: absolute;top: -999999px;">
				<view>
					<canvas :style="{ width: w, height: h }" canvas-id="firstCanvas"></canvas>
				</view>
			</view>
		</view>
		<view class="photograph" v-show="isshow==false">
			<!-- 图片预览 :style="{ 'height': imgheight + 'px'}" :style="{ 'height': h + 'px','width': w +'px'}"-->
			<view class="look">
				<view class="one" :style="{ 'height': imgheight + 'px'}">
					<image style="height: 100%; width: 100%;" :src="imageSrc? imageSrc:''" mode=""></image>
				</view>
				<view class="two">
					<view class="btn" @click="showPic">
						<image src="../../static/camera.png" mode=""></image>
					</view>
					<view class="down" @click="downImg">
						<image src="../../static/down.png" mode=""></image>
					</view>
					<view class="btn" @click="upload">
						<image src="../../static/waterup.png" mode=""></image>
					</view>
				</view>
			</view>
		</view>


	</view>
</template>
<script>
	export default {
		data() {
			return {
				isshow: true,
				allhight: 0,
				Height: 0, //页面高度
				imgheight: 0,
				flash: 'off', //闪光 默认off 打开on 自动auto
				num: 0, //闪光灯
				position: 'back', //前置后置 默认后置false 前置true
				pos: false, //前置后置
				imageSrc: '', //图片路径
				qualityChange: 'hight', //图像质量 high 高质量成像、 normal 普通质量、row 低质量
				time: false, //倒计时
				w: '', // canvas 元素宽度
				h: '', // canvas 元素高度
				watermode: true, //拍照按钮模块显示
				nowTime: '', //时间
				nowTimes: '',
				addRess: '', //地址
				txtName: '', //名字
				txtMain: '', //备注内容
				waterdraw: 1,
			}
		},
		mounted() {
			// 注意，这里要用个变量存this，不然进到getSystemInfo后this指向会变化，找不到data变量
			var _this = this
			uni.getSystemInfo({
				success: function(res) {
					//console.log(res.screenHeight); // 屏幕高度，包含导航栏
					//console.log(res.windowHeight); // 能够使用的窗口高度，不包含导航栏
					//console.log(res.screenWidth); // 屏幕宽度
					//console.log(res.windowWidth); //  能够使用31口宽度
					_this.Height = res.windowHeight - 280;
					_this.allhight = res.windowHeight
					_this.imgheight = res.windowHeight - 220;
					_this.imgWidth =res.windowWidth
				}
			});

			// 获取当前日期时间
			this.getTime();
		},
		methods: {
			takePhotoAction() {
				var that = this
				if (that.time == false) {
					that.takePhoto()
				} else if (that.time == true) {
					setTimeout(() => {
						that.takePhoto()
					}, 5000);
				}
			},
			takePhoto: function() { //拍照
				var that = this;
				const camera = uni.createCameraContext() //创建照相机对象
				camera.takePhoto({ //实现拍照功能
					quality: 'high', //high 高质量成像、 normal 普通质量、row 低质量
					zoom: [1, 5], //缩放
					success: (res) => {
						console.log('拍照成功', res.tempImagePath)
						that.imageSrc = res.tempImagePath //原图

						that.takeCanvas(res.tempImagePath) //画图

					}
				})
			},
			takeAlbum() {
				var that = this
				uni.chooseImage({
					count: 1,
					success: (res) => {
						var file = res.tempFilePaths[0];
						const tempFiles = res.tempFiles[0];

						setTimeout(() => { //必须加个延迟
							that.takeCanvas(file)
						}, 1000);

					}
				})
			},
			takeCanvas(imginfo) {
				console.log(imginfo)
				var that = this
				// 获取图片信息
				uni.getImageInfo({
					src: imginfo,
					success: ress => {
						that.w = ress.width / 3 + 'px'; // 设置 canvas 元素宽度
						that.h = ress.height / 3.01 + 'px'; // 设置 canvas 元素高度
						console.log(that.w, that.h)
						
						let ctx = uni.createCanvasContext('firstCanvas'); /** 创建画布 */
						//将图片绘制到cancas内
						ctx.drawImage(imginfo, 0, 0, ress.width/3, ress
							.height/3);

						ctx.setFontSize(14); // 设置字体大小为 10px
						ctx.setFillStyle('#FFFFFF'); // 设置颜色为白色#FFFFFF
						ctx.setTextAlign("center")

						let textToWidth = (ress.width / 3) * 0.5; // 绘制文本的左上角x坐标位置
						let textToWidth2 = (ress.width / 3) * 0.3; // 绘制文本的左上角x坐标位置
						let textToHeight1 = (ress.height / 3) * 0.82; // 绘制文本的左上角y坐标位置
						let textToHeight2 = (ress.height / 3) * 0.90;
						let textToHeight3 = (ress.height / 3) * 0.94;
						let textToHeight4 = (ress.height / 3) * 0.98;

						//绘制的模板1
						if (that.waterdraw == 1) {
							// 绘制日期和时间
							ctx.setFontSize(20); // 设置字体大小为 10px
							ctx.fillText(that.nowTimes,textToWidth, textToHeight1);
						
							ctx.setFontSize(14);
							ctx.fillText(that.nowTime + ' ' + that.addRess,
								textToWidth, textToHeight2);
								
	
						}


						// 绘制完成后，在下一个事件循环将 canvas 内容导出为临时图片地址
						ctx.draw(false, () => {
							setTimeout(() => {
								uni.canvasToTempFilePath({
									canvasId: 'firstCanvas',
									success: res1 => {
										that.imageSrc = res1.tempFilePath
										that.isshow = false
									},
									fail: (err) => {
										console.log('导出图片失败', err)
									}
								});
							}, 1000);
						});
					}
				});
			},
			takeFlash() { //闪光灯
				this.num++
				if (this.num == 0) {
					this.flash = "off"
				} else if (this.num == 1) {
					this.flash = "on"
				} else if (this.num == 2) {
					this.flash = "auto"
					this.num = 0
				}
			},
			devicePosition() { //前置后置
				if (this.pos == false) {
					this.position = "front"
					this.pos = true
				} else if (this.pos == true) {
					this.position = "back"
					this.pos = false
				}
			},
			countDown() { //倒计时
				this.time = !this.time
			},
			showPic() { //预览图片
				this.isshow = !this.isshow
			},
			// 获取当天是周几
			getWeekday() {
				const weekdays = ['日', '一', '二', '三', '四', '五', '六'];
				const d = new Date();
				const weekday = weekdays[d.getDay()];
				return weekday;
			},
			getTime: function() { //获取当前时间
				var date = new Date(),
					year = date.getFullYear(),
					month = date.getMonth() + 1,
					day = date.getDate(),
					hour = date.getHours() < 10 ? "0" + date.getHours() : date.getHours(),
					minute = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes(),
					second = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
				month >= 1 && month <= 9 ? (month = "0" + month) : "";
				day >= 0 && day <= 9 ? (day = "0" + day) : "";
				var timer = year + '-' + month + '-' + day;
				var timers = hour + ':' + minute + ':' + second;

				// 调用方法获取当天是周几
				const todayWeekday = this.getWeekday();
				//console.log('今天是周' + todayWeekday);
				this.nowTimes = timers

				this.nowTime = timer + ' ' + '星期' + todayWeekday;
			},
			getLocation() { //获取位置
				var that = this
				uni.chooseLocation({
					success: function(res) {
						console.log('位置名称：' + res.name);
						console.log('详细地址：' + res.address);
						console.log('纬度：' + res.latitude);
						console.log('经度：' + res.longitude);
						// that.addRess = res.address + ' ' + res.name //详细地址
						that.addRess = res.name
					}
				});
			},
			downImg() { //保存到相册
				var that = this
				uni.saveImageToPhotosAlbum({
					filePath: that.imageSrc,
					success: function() {
						uni.showToast({
							title: "保存成功",
							icon: "none"
						});
					},
					fail: function(err) {
						uni.showToast({
							title: "保存失败，请稍后重试",
							icon: "none"
						});
						console.log(err)
					},
				})
			},
			draw(wa) { //选择的水印模板
				this.waterdraw = wa
				this.watermode = !this.watermode
			},



		}
	}
</script>

<style>
	.content {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
	}

	/* 头部 */
	.mode {
		width: 750upx;
		height: 140upx;
		display: flex;
		background-color: #161616;
	}

	.mode>.one {
		width: 120upx;
		height: 140upx;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
	}

	.mode>.one>image {
		width: 70upx;
		height: 70upx;
	}

	.mode>.one>text {
		width: 120upx;
		height: 30upx;
		line-height: 30upx;
		text-align: center;
		font-size: 22upx;
		color: #ffffff;
	}

	/* 相机 */
	.photo {
		width: 750upx;
	}

	.photo>camera {
		width: 750upx;
		height: 700upx;
		position: relative;
	}

	/* 拍照按钮模块区1 */
	.bot {
		width: 750upx;
		height: 460upx;
		background-color: #161616;
		position: absolute;
		bottom: 0;
		display: flex;
		justify-content: space-around;
		align-items: center;
	}

	.bot>.left {
		width: 90upx;
		height: 90upx;
		border-radius: 50%;
		border: 3upx solid #ffffff;
	}

	.bot>.left>image {
		width: 90upx;
		height: 90upx;
		border-radius: 50%;
	}

	.bot>.center {
		width: 130upx;
		height: 130upx;
		border-radius: 50%;
		border: 3upx solid #ffffff;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.bot>.center>image {
		width: 80upx;
		height: 80upx;
	}

	.bot>.center:active {
		transform: scale(1.2);
	}

	.bot>.right {
		width: 90upx;
		height: 90upx;
		border-radius: 50%;
		border: 3upx solid #ffffff;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.bot>.right>image {
		width: 50upx;
		height: 50upx;
	}

	/* 拍照按钮模块区2 水印 */
	.bota {
		width: 750upx;
		height: 460upx;
		position: absolute;
		bottom: 0;
		display: flex;
		justify-content: space-around;
		align-items: center;
		flex-direction: column;
		background-color: #161616;
	}

	.bota>.back {
		width: 750upx;
		height: 60upx;
		line-height: 60upx;
		color: #ffffff;
	}

	.bota>.watera {
		width: 300upx;
		height: 350upx;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		border-radius: 10upx;
		background-color: #d9cdf3;
		color: #ffffff;
	}

	.bota>.watera>.ti {
		width: 300upx;
		height: 60upx;
		line-height: 60upx;
		font-size: 38upx;
		text-align: center;
	}

	.bota>.watera>.ad {
		width: 300upx;
		height: 60upx;
		line-height: 60upx;
		font-size: 28upx;
		text-align: center;
		overflow-x: hidden;
	}


	/* 水印1显示 */
	.cameraa {
		width: 690upx;
		height: 120upx;
		display: flex;
		justify-content: center;
		flex-direction: column;
		text-align: center;
		color: #ffffff;
		z-index: 200;
		position: absolute;
		left: 30upx;
		bottom: 560upx;
		font-size: 28upx;
	}

	.hour {
		width: 690upx;
		height: 60upx;
		line-height: 60upx;
		font-size: 38upx;
	}



	/* 图片预览/下载 */
	.look {
		width: 750upx;
		height: 1000upx;
	}

	.look>.one {
		width: 750upx;
		height: 800upx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.look>.one>image {
		width: 750upx;
		height: 800upx;
	}

	.look>.two {
		width: 750upx;
		height: 460upx;
		display: flex;
		justify-content: space-around;
		align-items: center;
		background-color: #161616;
	}

	.look>.two>.btn {
		width: 100upx;
		height: 100upx;
		border-radius: 50%;
		border: 3upx solid #ffffff;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.look>.two>.btn>image {
		width: 60upx;
		height: 60upx;
	}

	.look>.two>.down {
		width: 120upx;
		height: 120upx;
		border-radius: 50%;
		border: 3upx solid #ffffff;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.look>.two>.down>image {
		width: 60upx;
		height: 60upx;
	}
</style>