<template>
	<view>
		<view class="topView" :style="{'height':navHeight/2 + 'px'}"></view>
		<view class="contentView">
			<!-- <u-image class="pic" :src="files[0]" bg-color="transparent"  @click="showPreviewFn"></u-image> -->
			<image class="pic" :src="files[0]" v-lazy mode="aspectFit" @click="showPreviewFn"></image>
		</view>
		<view class="bottomView">
			<image class="btn" :src="btn_remake" @click="$u.throttle(remakePhoto, 3000)"></image>
			<image class="btn" :src="btn_continue" @click="$u.throttle(continuePhoto, 3000)"></image>
		</view>
		<image class="btn finish" src="/static/photo/finish.png" @click="$u.throttle(finishPhoto, 3000)"></image>
	</view>
</template>

<script>
	import qiniup from '@/components/upload/qiniup';
	const app = getApp()
	export default {
		props: {
			upload: { // 是否默认上传 true：会自动上传好图片并返回绝对路径 false: 只返回临时路径，需要在父组件做上传动作
				type: Boolean,
				default () {
					return true
				}
			}
		},
		mixins: [qiniup],
		data() {
			return {
				protocolContent: '',
				btn_remake: 'https://qn-static.banshouhui.com/take_order/photo/remake.png',
				btn_continue: '/static/photo/continue.png',
				standardId: '',
				images: [],
				files: [],
				keys: [],
				token: '',
				product: '',
				allImages: [],
				navHeight: 130
			}
		},
		created(e) {
			// 获取照片选项对象
			this.navHeight = getApp().globalData.navHeight
			const product = app.globalData.photo.product
			this.product = `?brandId=${product.brandId}&brand=${product.brandName}&classifyId=${product.classifyId}&systemId=${product.systemId}`
			if(app.globalData.photo.currentItem) {
				// 获取规格Id
				this.standardId = app.globalData.photo.currentItem._id
			}

			getApp().trackPage('照片预览页')
			const globalTempPath = getApp().globalData.photo.tempPath
			if(globalTempPath && globalTempPath.mixWater){
				this.files = [globalTempPath.mixWater]
			}
			// if(e.standardId) {
			// 	this.standardId = e.standardId
			// }
			this.token = this.vuex_token
		},
		methods: {
			// 保存照片到本地
			async saveTempToLocal(tempImagePath) {
				return new Promise(async (resolve, reject) => {
					//has_origin //是否保存原图
					let that = this
					const photo = getApp().globalData.photo
					if(!photo.tempPath){
						return
					}
					let path = ''
					let pass = true
					if(photo.tempPath.origin && photo?.waterSetting?.hasOrigin){
						// 保存原图到本地
						path = photo.tempPath.origin
						await this.saveLocal(path).then(res => {
							uni.showToast({
								icon: 'none',
								title: '已将照片原图保存到本地相册'
							})
						}).catch(e => {
							uni.showToast({
								icon: 'none',
								title: e
							})
							pass = false
							that.$parent.goBack()
						}) 
					}
					// 如果用户不同意保存到相册
					if(!pass) return 

					if(photo.tempPath.mixWater){
						// 保存水印处理图片到本地
						path = photo.tempPath.mixWater
						this.saveLocal(path).then(res => {
							uni.showToast({
								icon: 'none',
								title: '已将水印图片保存到本地相册'
							})
							resolve()
						}).catch(e => {
							uni.showToast({
								icon: 'none',
								title: e
							})
							that.$parent.goBack()
						}) 
					}
				})
			},
			saveLocal(path){
				return new Promise((resolve,reject)=>{
					uni.saveImageToPhotosAlbum({
						filePath: path,
						success() {
							resolve(true)
						},
						fail(e) {
							uni.showModal({
								content: '拒绝授权将无法保存图片到本地，是否去设置打开？',
								confirmText: "确认",
								cancelText: '取消',
								success(res) {
									if (res.confirm) {
										wx.openSetting({
											success(res) {
												resolve(true)
											}
										})
									} else if(res.cancel) {
										reject('保存失败')
									}
								},
								fail() {
								}
							})
						}
					})
				})
			},
			showPreviewFn(img) {
				uni.previewImage({
					current: 0,
					urls: this.files
				});
			},

			// 重拍图片
			remakePhoto() {
				this.$emit('changeType', 1)
			},
			finishPhoto(){
				const photo = getApp().globalData.photo
				if (photo.currentItemLength === 10) return
				photo.currentItemLength = 10
				this.continuePhoto()
				// 完成本项
				//this.$emit('finish')
			},
			// 确认图片
			async continuePhoto() {
				const photo = getApp().globalData.photo
				let self = this
				uni.showLoading({
					title:'图片保存中…'
				})
				await self.saveTempToLocal()

				if (this.upload) {
					self.confirmUpload(true)
				} else {
					this.submitFile()
				}
				
			},
			submitFile() {
				const photo = getApp().globalData.photo
				if (photo.currentItemLength < 10) photo.currentItemLength = photo.currentItemLength + 1
				uni.hideLoading()
				// 当前项的图片显示
				// 拍照项张数目增加 等于10张
				photo.allImages.unshift(
					{
						size: photo.tempPath.size,
						path: photo.tempPath.mixWater,
						src: photo.tempPath.mixWater,
						key: this.fileMaps[0] ? this.fileMaps[0].key : '',
					}
				)
				if(photo.currentItemLength<10){
					this.$emit('changeType', 1)
				}else{
					this.$emit('finish')
				}
			}
		}
	}
</script>

<style lang="scss">
	.topView {
		background: #000;
		width: 100%;
		position: fixed;
		top: 0;
	}
	.contentView {
		background-color: #333333;
		/* padding-top: 120rpx; */
		padding-bottom:228rpx;
		height: 100vh;
		display: flex;
		flex-direction: column;
	}
	/deep/ .u-image{
		height:100% !important;
	}
	/deep/ .u-image__loading{
		background-color: transparent!important;
	}
	/deep/ .u-image__error{
		background-color: transparent!important;
	}
	.pic {
		flex:1;
		width: 100%;
		height: 100%;
		// height:auto;
		/* height: 760rpx; */
	}

	.bottomView {
		//box-shadow: 0 0 1rpx 6rpx rgba(255,255,255,0.05);
		background-color: #333333;
		width: 100%;
		padding:70rpx 0;
		position: fixed;
		bottom: 0;
		display: flex;
		justify-content: space-around;
		align-items: center;
		.btn{
			display: block;
			width: 200rpx;
			height: 88rpx;
		}
	}
	.btn{
		display: block;
		width: 232rpx;
		height: 80rpx;
		&.finish{
			position: fixed;
			top:180rpx;
			right:30rpx;
		}
	}
</style>
