<template>
	<view>
		<view class="top flexS">
			<view class="flex">
				<image :src="user.avatar" mode="widthFix"></image>
				<view class="top_right flexC">
					<view class="name">
						{{ user.nickname && user.nickname.length > 8 ? user.nickname.slice(0, 8) : user.nickname }}
					</view>
					<view class="phone">
						{{ user.mobile }}
					</view>
				</view>
			</view>
			<view v-if="showList" class="top_show" @click="previewImage">
				查看认证照片
			</view>
		</view>
		<view class="box">
			<view class="box_title">
				与我相关的照片
			</view>
			<view v-if="showList" style="overflow: hidden;">
				<view class="container">
					<view class="left">
						<view class="posive" v-for="(item,index) in leftList" :key="index">
							<image :src="item.url" alt="" mode="widthFix" @click="previewImg(item)" />
						</view>
					</view>
					<view class="right">
						<view class="posive" v-for="(item,index) in rightList" :key="index">
							<image :src="item.url" alt="" mode="widthFix" @click="previewImg(item)" />
						</view>
					</view>
				</view>
				<u-loadmore
					v-if="nomore"
					dashed
					status="nomore"  
					nomore-text="没有更多啦~" 
				/>
				<u-overlay :show="show" :opacity="1">
					<view @tap.stop="close()" class="close">
						<image src="../../static/img/close.png" mode="widthFix"></image>
					</view>
					<swiper :autoplay="false"  :duration="350" :current="current" class="swiper">
						<swiper-item v-for="(item,index) in list">
							<movable-area class="image-view-area">
								<movable-view class="image-view-view" direction="all" :scale="true" scale-min="1" scale-max="3">
									<img :src="item.url" alt="" />
								</movable-view>
							</movable-area>
							<view v-if="item.master" class="btn" @tap.stop="showMaster(item, index)">
								查看原图
							</view>
						</swiper-item>
					</swiper>
				</u-overlay>
			</view>
			<view v-else class="box_upload flexC">
				<view class="auto flexC">
					<image src="../../static/img/upload.png" mode="widthFix"></image>
					<text>请上传自己的照片</text>
					<text>并确保脸部信息完整</text>
				</view>
				<view class="submit" @click="tapImg(1)">
					立即上传
				</view>
			</view>
		</view>
		<uniImgCropper ref="gmyImgCropper" :quality="1" cropperType="fixed" :imgSrc="imgSrc" @getImg="getImgSrc"></uniImgCropper>
	</view>
</template>

<script>
	import { GetTravelList, UploadImg, GetUserImage, GetImg } from '../../api/index.js';
	import uniImgCropper from '@/components/uni-img-cropper.vue'
	export default {
		components: {
			uniImgCropper
		},
		data() {
			return {
				show: false,
				showList: false,
				imgY: '',
				userUrl: '',
				user: {},
				params: {
				    page_index: 1,
				    page_size: 15,
					travel_id: '',
					group_id:''
				},
				list: [],
				totalPage: '',
				imgSrc: '', // 待裁剪图片
				current: 0,
				leftList: [],// 初始化左右盒子
				rightList: [],
				leftH: 0,// 初始化左右盒子高度
				rightH: 0,
				nomore: false
			}
		},
		onLoad(option) {
			if (option.id) {
				this.params.travel_id = option.id
				this.GetImgInfo()
			}
		},
		onReachBottom() {
		   this.more()
		},
		methods: {
			previewImage() {
				uni.previewImage({
					current: this.userUrl, // 当前显示图片的http链接
					urls: [this.userUrl], // 需要预览的图片http链接列表
				});
			},
			// 获取信息 
			GetImgInfo() {
				let that = this
				uni.showLoading()
				GetImg({ travel_id: this.params.travel_id }).then(res => {
					uni.hideLoading()
				    if (res.code === 200) {
						that.user = res.data.user
				        if (res.data.group_id && res.data.url) {
							that.userUrl = res.data.url
							that.params.group_id = res.data.group_id
							that.showList = false
							that.getList()
						}
				    } else {
				        uni.showToast({ title: res.message || '获取失败', icon: 'none' })
				    }
				}).catch(e => {
					uni.hideLoading()
				})
			},
			tapImg(e) {
			    // 调用实例的chooseImg方法，拉起图片选择界面，待图片选择完毕后直接进入图片截取界面
				this.$refs.gmyImgCropper.chooseImage(e);
			},
			// 将base64转换为filel流，
			convertBase64UrlToFile(base64) {
			    let urlData = base64.dataURL
			    let type = base64.type
			    let contentName = base64.contentName
			    let bytes = null
			    if (urlData.split(',').length > 1) { //是否带前缀
			        bytes = window.atob(urlData.split(',')[1]) // 去掉url的头，并转换为byte
			    } else {
			        bytes = window.atob(urlData)
			    }
			     // 处理异常,将ascii码小于0的转换为大于0
			    let ab = new ArrayBuffer(bytes.length)
			    let ia = new Uint8Array(ab)
			    for (let i = 0; i < bytes.length; i++) {
			        ia[i] = bytes.charCodeAt(i)
			    }
			    let result = new Blob([ab], {
			        type: type,
			    })
			    let result1 = new File([result], contentName, {
			        type: type
			    })
			   result1.path = window.URL.createObjectURL(result)
			   return result1
			},
			// 裁剪完成时,返回截取图片的临时路径
			getImgSrc(e) {
				uni.showLoading({title: '正在识别中...'})
				// 将base64转换为filel流，
				let file = this.convertBase64UrlToFile({
				    dataURL: e,
				    type: 'image/jpeg',
				    contentName: '图片'
				})
				uni.uploadFile({
					url: 'http://api.app.cliu.cc/api/SzyImageH5/UploadImg',
					filePath: file.path,
					name: 'file',
					header: {
						'Authorization': 'Bearer ' + uni.getStorageSync("token")
					},
					formData: {
						'travel_id': this.params.travel_id
					},
					success: (res) => {
						uni.hideLoading()
						const data = JSON.parse( res.data)
						console.log(data)
						if (data.code == 200) {
							this.GetImgInfo()
						} else {
							uni.hideLoading()
							uni.showToast({
								title: data.message || '上传失败',
								icon:'none'
							})
						}
					},
					fail: err => {
						uni.hideLoading();
						uni.showToast({
							title: '上传失败',
							icon:'none'
						})
					}
				})
			},
			getTime(v) {
				if (v) {
					return v.replace(/-/g, '.').slice(0, 10)
				}
			},
			close() {
				this.show = false
				// this.move()
			},
			// 点击放大图片
			previewImg(item) {
				let i = this.list.findIndex(v => v.id == item.id)
				this.current = i
				this.show  = true
				// this.stop()
			},
			showMaster(item, i) {
				this.list[i].url = item.img_url
				setTimeout(()=>{
				    this.list[i].master = false
				},1000)
			},
			//禁止页面滑动
			stop(){
			    var mo=function(e){e.preventDefault();};
			    document.body.style.overflow='hidden';
			    document.addEventListener("touchmove",mo,false);
			},
			/***取消滑动限制***/
			move(){
			    var mo=function(e){e.preventDefault();};
			    document.body.style.overflow='';//出现滚动条
			    document.removeEventListener("touchmove",mo,false);
			},
			//获取列表
			getList(isMore) {
				uni.showLoading()
			    GetUserImage(this.params).then(res => {
					uni.hideLoading()
			        if (res.code === 200) {
			            const { list, total } = res.data
			            if (list.length === 0) {
							uni.showToast({ title: '暂无内容', icon: 'none' })
							return false
						}
			            this.totalPage = Math.ceil(Number(total) / 15)
						list.forEach(e=> {
							e.checked = false
							e.master = true
						})
						this.doList(list)
			            this.list = isMore ? this.list.concat(list) : list
			        } else {
			            uni.showToast({ title: res.message || '获取列表失败', icon: 'none' })
			        }
			    })
			},
			//加载获取更多
			more() {
			    if (this.params.page_index >= this.totalPage) {
					this.nomore = true
			        return false
			    }
			    this.params.page_index++
			    this.getList(true)
			},
			// 瀑布流
			doList(list) {
				const that = this
				list.forEach(res => {
					// 获取图片宽高
					uni.getImageInfo({
						src: res.url,
						success: (image) => {
							// 计算图片渲染高度
							let showH = (50 * image.height) / image.width
							// 判断左右盒子高度
							if(that.leftH <= that.rightH) {
								that.leftList.push(res)
								that.leftH += showH
							} else {
								that.rightList.push(res)
								that.rightH += showH
							}
						}
					})
				})
			},
			
			// 上传头像 
			// getImg() {
			// 	var that = this
			// 	uni.chooseImage({
			// 		count: 1,           // 最多可以选择的图片张数
			// 		sizeType: ['original', 'compressed'],              //original 原图，compressed 压缩图，默认二者都有
			// 		sourceType: ['album', 'camera'],             //album 从相册选图，camera 使用相机，默认二者都有。如需直接开相机或直接选相册，请只使用一个选项
			// 		success: function (res) {
			// 			that.imgArr = res.tempFilePaths[0]
			// 			uni.showLoading({
			// 				title: '图片上传中...'
			// 			});
			// 			uni.uploadFile({
			// 				url: 'https://api.szy.jiuweiyun.cn/api/image/UploadUserFace',
			// 				filePath: that.imgArr,
			// 				name: 'file',
			// 				header: {
			// 					'content-type': 'multipart/form-data',
			// 					'Authorization': 'Bearer ' + uni.getStorageSync("token")
			// 				},
			// 				formData: {
			// 					'season': that.season,
			// 					'type': that.type
			// 				},
			// 				success: (res) => {
			// 					const data = JSON.parse( res.data)
			// 					console.log(data)
			// 					if (data.code == 200) {
			// 						that.getImgUrl()
			// 						uni.hideLoading()
			// 					} else {
			// 						uni.hideLoading();
			// 						uni.showToast({
			// 							title: data.message || '上传失败',
			// 							icon:'none'
			// 						})
			// 					}
			// 				},
			// 				fail: err => {
			// 					uni.hideLoading();
			// 					uni.showToast({
			// 						title: '上传失败',
			// 						icon:'none'
			// 					})
			// 				}
			// 			});
			// 		}
			// 	})
			// },
		}
	}
</script>
<style lang="scss" scoped>
	.close {
		position: fixed;
		top: 20rpx;
		right: 20rpx;
		background: #6f727699;
		width: 80rpx;
		height: 80rpx;
		line-height: 88rpx;
		text-align: center;
		border-radius: 50%;
		z-index: 20000;
		image {
			width: 30rpx;
		}
	}
	.swiper {
		position: relative;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		overflow: hidden;
		.image-view-area, .image-view-view {
		    position: absolute;
		    left: 0;
		    top: 0;
		    width: 100%;
		    height: 100%;
		}
		img {
			position: absolute;
			left: 50%;
			top: 50%;
			-webkit-transform: translate(-50%,-50%);
			transform: translate(-50%,-50%);
			max-height: 100%;
			max-width: 100%;
			width: 100%;
		}
		.btn {
			position: absolute;
			bottom: 60rpx;
			left: 285rpx;
			width: 180rpx;
			height: 60rpx;
			line-height: 60rpx;
			border-radius: 36rpx 36rpx 36rpx 36rpx;
			// border: 1rpx #FFFFFF solid;
			color: #FFFFFF;
			text-align: center;
			background-color: #333;
		}
	}
	.container {
		margin-top: 24rpx;
			// padding: 0 24rpx;
			font-size: 14rpx;
			line-height: 24rpx;
			display: flex;
			justify-content: space-between;
		.right, .left{
			display: inline-block;
			width: 340rpx;
			vertical-align: top;
		}
		.left image, .right image{
			border-radius: 16rpx;
			width: 100%;
			margin-bottom: 24rpx;
		}
		.posive {
			position: relative;
		}
		.collected {
			border: 2rpx solid #3D6EF6;
			position: absolute;
			background-color: rgba(0, 0, 0, 0.4);
			border-radius: 50%;
			bottom: 40rpx;
			right: 16rpx;
			z-index: 10;
		}
		.fixed {
			width: 80rpx;
			height: 80rpx;
			border-radius: 50%;
			text-align: center;
			line-height: 80rpx;
			background: #3D6EF6;
			position: fixed;
			right: 24rpx;
			bottom: 40rpx;
			color: #fff;
			z-index: 100;
			font-size: 28rpx;
		}
		.fixed2 {
			position: fixed;
			right: 0;
			bottom: 0;
			width: 684rpx;
			height: 96rpx;
			background: #000000;
			border-radius: 0px 0px 0px 0px;
			// opacity: 0.5;
			background-color: rgba(000,000,000,0.5);
			padding: 0 32rpx;
			color: #FFFFFF;
			font-size: 28rpx;
			z-index: 100;
			.left {
				font-size: 32rpx;
				font-weight: bold;
				text {
					color: #3D6EF6;
					margin: 0 10rpx;
				}
			}
			.upload {
				width: 176rpx;
				height: 64rpx;
				background: #3D6EF6;
				border-radius: 32rpx 32rpx 32rpx 32rpx;
				text-align: center;
				line-height: 64rpx;
			}
			.quxiao {
				width: 120rpx;
				height: 64rpx;
				margin-left: 24rpx;
				border-radius: 32rpx 32rpx 32rpx 32rpx;
				opacity: 1;
				border: 2rpx solid #F5F5F5;
				text-align: center;
				line-height: 64rpx;
			}
		}
	}
	.top {
		height: 168rpx;
		padding: 0 24rpx;
		border-bottom: 16rpx #F5F5F5 solid;
		image {
			width: 112rpx;
			border-radius: 50%;
		}
		&_show{
			width: 216rpx;
			height: 64rpx;
			background: #3D6EF6;
			border-radius: 32rpx 32rpx 32rpx 32rpx;
			text-align: center;
			line-height: 64rpx;
			color: #fff;
			font-size: 28rpx;
		}
		&_right{
			align-items: flex-start;
			margin-left: 20rpx;
			.name {
				font-size: 40rpx;
				font-weight: bold;
			}
			.phone {
				font-size: 28rpx;
				color: #999999;
			}
		}
	}
	.box{
		padding: 32rpx 24rpx 24rpx 24rpx;
		position: relative;
		.list {
			margin-top: 24rpx;
			.box{
				margin-bottom: 24rpx;
				padding: 24rpx;
				background-color: #F9F9F9;
				border-radius: 16rpx 16rpx 16rpx 16rpx;
				&_top {
					.title {
						font-size: 32rpx;
						font-weight: bold;
						color: #333333;
						font-family: PingFang SC-Bold, PingFang SC;
					}
					.right {
						font-size: 24rpx;
						color: #BCBCBC;
						image {
							margin-left: 8rpx;
						}
					}
				}
				&_time {
					font-size: 24rpx;
					color: #BCBCBC;
					margin: 8rpx 0 24rpx 0;
				}
				&_image {
					image {
						width: 156rpx;
						height: 156rpx;
						border-radius: 8rpx;
						margin-right: 10rpx;
					}
				}
			}
		}
		&_title {
			font-size: 32rpx;
			font-weight: bold;
		}
		&_upload {
			image {
				width: 120rpx;
				margin-bottom: 64rpx;
			}
			.auto{
				position: fixed;
				top: 40%;
				height: 268rpx;
				text{
					font-size: 28rpx;
					color: #999999;
				}
			}
			.submit {
				position: fixed;
				bottom: 80rpx;
				margin-top: 266rpx;
				width: 630rpx;
				height: 88rpx;
				background: #3D6EF6;
				border-radius: 48rpx 48rpx 48rpx 48rpx;
				color: #fff;
				font-size: 32rpx;
				font-weight: bold;
				text-align: center;
				line-height: 88rpx;
			}
		}
	}
</style>
