<template>
	<view class="container">
		<custom_navbar :title="navbar_title" @getNavHeight="getNavHeight" :theme="theme" />
		<view class="topSpace" :style="'margin-top:-'+margin_top+'px'"></view>
		<view class="uploadBox">
			<view class="uploadBtn">
				<u-upload
					:fileList="uploadImg"
					@afterRead="afterRead"
					@delete="deletePic"
					name="uploadPic"
					width="400rpx"
					height="500rpx"
					:sizeType="['compressed']"
					:deletable="true"
					:maxCount="1"
					:previewFullImage="false"
				>
					<image src="/static/img/index/upload.png" mode="widthFix"></image>
				</u-upload>
			</view>	
		</view>
		<view class="uploadTips" @click="tips">
			<text>照片注意事项</text> <image src="/static/img/index/tips.png" mode="widthFix"></image>
		</view>
		
		<view class="colorBox">
			 <view class="title">选择背景颜色</view>   
			 <scroll-view class="scrollBox" scroll-x="true" @scroll="scroll" scroll-left="0">
				 <view v-for="(item,index) in colorList" :key="index"  :class="'color '+(index == selectIndex ? 'on':'') " :style="'background-color:'+item.back_color+';'" @click="selectColor(index)">
					 <image v-if="index == selectIndex" src="/static/img/index/duigou.png" mode="widthFix"></image>
				 </view>
				
		
			 </scroll-view>	
			  
			 <view class="btnBox no" v-if="uploadImg.length == 0">
				 保存
			 </view>
			 <view class="btnBox yes" v-else  @click="submit">
			 	保存
			 </view>
			 <view class="num">
				 <text>剩余生成次数</text>
				 <text class="use">{{color_has}}</text>
				 <text>/{{all}}</text>
			 </view>		   
		</view>
			
			
		<u-popup :show="show" :round="10" mode="center" bgColor="transparent" @close="close" @open="open">
		            <view class="popupBox">
		                <view class="popupTop">
							提醒
						</view>
						<view class="popupDesc">
							<u-parse :content="content" :tagStyle="style"></u-parse>
							
						</view>
						<view class="popupBtn">
							<view class="sbtnBox a3" @click="yes">我了解啦</view>
						</view>
		            </view>
		</u-popup>	
	</view>
</template>

<script>
    import custom_navbar from "../photo/components/photo_header.vue";
	export default {
		components: {
			custom_navbar

		},
		data() {
			return {
				navbar_title: '证件照换底色',
				theme: "blue",
				margin_top: 0,
				
				
				//弹窗
				show: false,
				content: `<p>1.人物需抬头挺胸，两眼平视前方</p>
							<p>2.人物应去掉发饰，眼镜，露出双耳</p>
							<p>3.深色衣服，白色背景墙效果更佳</p>
							<p>4.请使用后置摄像头拍摄，效果更佳</p>`,
				style: {
							// 字符串的形式
	
							p: 'font-weight: 400;font-size: 28rpx;color: #555555;line-height: 60rpx;',
						
					 },
					 
				uploadImg:  [],
				users_image:'',
				//颜色
				colorList : [],
				selectIndex:0,
				
				
				color_has:0, //已生成
				all:0, //可生成总数
			}
		},
		onLoad() {
			var _this = this;
			_this.getColorList();
		},
		onPageScroll(e) {
			if (e.scrollTop > 50) {
				this.theme = 'white';
		
			} else {
		
				this.theme = 'blue';
			}
		},
		onShow() {
			var _this = this;
			var sceneList = _this.$user.session('sceneList');
			var all = sceneList[1].number;
			console.log(all);
			_this.all = all;
		},
		methods: {
			getNavHeight(e) {
				this.margin_top += e;
			},
			//滚动监控
			scroll1(e) {
				console.log(e);
			},
			//弹窗
			tips(){
				 this.show = true;
			},
			
			open() {
			   console.log('open');
			},
			close() {
			   this.show = false;
			
			},
			yes(){
				this.close();
			},
			
			// 删除图片
			deletePic(event) {
					var _this = this; 
					_this.uploadImg = [];
			},
						// 新增图片
			afterRead(event) {
				
				var _this = this
				console.log('event',event);	
				var edetail = event.file.thumb;
				if (edetail.indexOf('http://tmp') != -1 || edetail.indexOf('wxfile://tmp') != -1)
				{
					
					//上传
					var upData = {filePath:edetail,fileType:'image',scene:'user_max'};
					_this.$api.ossUpload(upData,function(res){
						console.log('ossUpload success',res);
						var d = res.data;
					
						_this.uploadImg = [{url:_this.$api.ossurl(d.file_url)}];
						_this.users_image = d.file_url;
						
					},function(err){
						console.log('ossUpload fail',err);
					});
					
							
						
				}
					
			},
			///api/userInfo
			getUserInfo(){
				
				var  _this = this;
				_this.$api.get('/api/userInfo',{},function(res){
					_this.color_has = res.attach.photo.back_color_number;
					
				});
			},
			getColorList()
			{
				var _this = this;
				var post ={};
				_this.$api.get('api/color/list', post, function(res) {
					
							var d = res;
							console.log(d);
							_this.colorList = d;
							_this.selectIndex = 0;

				});	
			},
			selectColor(index)
			{
				var _this = this;
				_this.selectIndex = index;
			},
			submit(){
				
				var _this = this;
				var post = {
					back_color_id:_this.colorList[_this.selectIndex].id,
					users_image:_this.users_image,
				};
				_this.$api.post('api/color/append', post,function(rs){
				   console.log(rs);
									
				});
			},
			
			
		}
	}
</script>

<style lang="scss">
page{background-color: #F5F6FB;}
.container{width: 100%;}
.topSpace{ width: 100%; height: 100rpx;}
.uploadBox{
	width: 400rpx;
	height: 500rpx;
	background: #FFFFFF;
	border-radius: 24rpx;
	margin:200rpx auto auto auto;
}
.uploadBtn{ width: 100%; height: auto;}

.uploadBtn .u-upload{width: 400rpx; height: 500rpx; text-align: center; overflow: hidden;}
.uploadBtn .u-upload image{ width: 400rpx; height: 500rpx; margin: 0rpx auto; display: inline-block;}

.uploadTips{ width: 100%; height: 50rpx; line-height: 50rpx; text-align: center;}

.uploadTips text{
	font-weight: 400;
	font-size: 24rpx;
	color: #999999;
}
.uploadTips image{ width: 24rpx; height: 24rpx; display: inline-block; margin-left: 10rpx;}

.colorBox{
	width: 750rpx;
	height: 520rpx;
	background: #FFFFFF;
	border-radius: 24rpx 24rpx 0rpx 0rpx;
	position: fixed;
	bottom: 0;
}
.title{
	width: 100%;
	height: 40rpx;
	font-weight: 700;
	font-size: 28rpx;
	color: #333333;
	line-height: 40rpx;
	text-align: center;
	margin: 20rpx 0rpx;
}

.scrollBox {
 	margin-top: 20rpx;
 	width: 100%;
 	height: 90rpx;
 	white-space: nowrap;
 	
 }
.color{
	width: 72rpx;
	height: 72rpx;
	border-radius: 50%;
	display: inline-block;
	margin-left: 30rpx;
	border: 8rpx solid #E7E7EF;
	overflow: hidden;
}
.on{
	
 }
.on image{width: 50rpx; height:auto; margin: 12rpx 0rpx 0rpx 12rpx;}


.popupBox{
	width: 600rpx;
	height: auto;
	border-radius: 24rpx;
	background-color: #FFFFFF;
}
.popupTop{
	width: 600rpx;
	height: 140rpx;
	background: linear-gradient(to bottom, #D3D5FF 20%, #FFFFFF 50%);
	border-radius: 24rpx 24rpx 0rpx 0rpx;
	line-height: 140rpx;
	text-align: center;
	font-weight: 700;
	font-size: 30rpx;
	color: #333333;
}
.popupDesc{
	width:480rpx;
	font-weight: 400;
	font-size: 28rpx;
	color: #555555;
	padding: 0rpx 60rpx;
}

.popupBtn{ width: 100%; height: auto;
    display: flex; flex-wrap: wrap;
	justify-content: space-around; /* 使子元素在容器中均匀分布 */
	align-items: center; /* 如果需要垂直居中子元素 */
}
.sbtnBox{
	margin: 30rpx auto;
	width: 478rpx;
	height: 80rpx;
	font-weight: 700;
	font-size: 30rpx;
	line-height: 80rpx;
	border: 2rpx solid #4D94FF;
	text-align: center;
	border-radius: 44rpx;
	
	
}

.a3{
	background: linear-gradient( 270deg, #2E57F1 0%, #8358F6 100%);
	color:#FFFFFF;
}


.btnBox{
	width: 702rpx;
	height: 88rpx;
	border-radius: 44rpx;
	
	font-weight: 700;
	font-size: 30rpx;
	line-height: 88rpx;
	text-align: center;
	
	margin: 20rpx auto;

}
.yes{
	border: 2rpx solid #9B75FF;
	background: linear-gradient( 270deg, #2E57F1 0%, #8358F6 100%);
	color:#FFFFFF;
}
.no{
	border: 2rpx solid #ECEBF1;
	background-color: #ECEBF1;
	color:#C8C6D4;
}


.num{ width: 100%; height: 60rpx; text-align: center;
	font-weight: 400;
	font-size: 24rpx;
	color: #555555;
	line-height: 60rpx;
}
.num .use{ color: #7A74F0;}
</style>
