<template>
	<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"></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 {
		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: [],
				fileMaps: [],
				keys: [],
				token: '',
				product: '',
			}
		},
		onLoad(e) {
			// 获取照片选项对象
			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) {
				//has_origin //是否保存原图
				let that = this
				const photo = getApp().globalData.photo
				if(!photo.tempPath){
					return
				}
				let path = ''
				if(photo.tempPath.origin && photo.waterSetting && photo.waterSetting.has_origin){
					// 保存原图到本地
					path = photo.tempPath.origin
					let result =  await this.saveLocal(path)
					if(result){
						uni.showToast({
							icon: 'none',
							title: '已将照片原图保存到本地相册'
						})
					}
				}
				if(photo.currentItem){
					photo.currentItem.imageList.unshift(photo.tempPath.mixWater)
				}
				// if(photo.productList && photo.productList[photo.topIndex]){
				// 	const topArr = photo.productList[photo.topIndex]
				// 	if(topArr[photo.itemIndex]){
				// 		topArr[photo.itemIndex].imageList.push(photo.tempPath.mixWater)
				// 	}
				// }
				// photo.
				if(photo.tempPath.mixWater){
					// 保存水印处理图片到本地
					path = photo.tempPath.mixWater
					let result1 =  await this.saveLocal(path)
					if(result1){
						uni.showToast({
							icon: 'none',
							title: '已将水印图片保存到本地相册'
						})
					}
				}
			},
			saveLocal(path){
				return new Promise((resolve,reject)=>{
					uni.saveImageToPhotosAlbum({
						filePath: path,
						success() {
							resolve(true)
						},
						fail() {
							reject('保存失败')
						}
					})
				})
			},
			showPreviewFn(img) {
				uni.previewImage({
					current: 0,
					urls: this.files
				});
			},

			// 重拍图片
			remakePhoto() {
				uni.navigateBack({
					delta:1
				})
			},
			finishPhoto(){
				const photo = getApp().globalData.photo
				photo.currentItemLength = 10
				this.continuePhoto()
				// 完成本项
				// uni.navigateBack({
				// 	delta:2
				// })
			},
			// 确认图片
			continuePhoto() {
				let self = this
				uni.showLoading({
					title:'图片保存中…'
				})
				self.saveTempToLocal()
				self.confirmUpload(true)
			},
			downloadImages() {
				let self = this;
				for (let url of this.images) {
					uni.downloadFile({
						url: url, //仅为示例，并非真实的资源
						success(res) {
							// 只要服务器有响应数据，就会把响应内容写入文件并进入 success 回调，业务需要自行判断是否下载到了想要的内容
							if (res.statusCode === 200) {
								self.files.push(res.tempFilePath)
							}
						},
						fail(e) {
						}
					})
				}
			},

		}
	}
</script>

<style lang="scss">
	.contentView {
		background-color: #333333;
		/* padding-top: 120rpx; */
		padding-bottom:228rpx;
		height: 100vh;
		display: flex;
		flex-direction: column;
	}
	/deep/ .u-image{
		height:100vh !important;
	}
	/deep/ .u-image__loading{
		background-color: transparent!important;
	}
	/deep/ .u-image__error{
		background-color: transparent!important;
	}
	.pic {
		flex:1;
		width: 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:30rpx;
			right:30rpx;
		}
	}
</style>
