<template>
  <view class="container">
	  <custom_navbar :title="navbar_title" @getNavHeight="getNavHeight" :theme="theme" left="false" />
	  <view class="bannerBox" :style="'margin-top:-'+margin_top+'px'">
	  			<u-swiper
	  			           :list="banner"
	  			           keyName="image"
	  			           :showTitle="false" 
	  			           :autoplay="true"
	  			           circular
	  					   height="280"
						   radius="0"
						   @click="openAd"
	  			   ></u-swiper> 
	  </view>	
		 
	
		 <view class="contentBox">
			 
			 <view class="navBox">
				 <view class="navItem" @click="goTo('/pagesA/merge/index')">
					 <image src="/static/img/index/zjhc.png" mode="widthFix"></image>
				 </view>
				 <view class="navItem" @click="goTo('/pagesA/color/index')">
				 	<image src="/static/img/index/zjgs.png" mode="widthFix"></image>
				 </view>
				 <view class="navItem" @click="goTo('/pagesA/photo/photo_1')">
				 	<image src="/static/img/index/aixz.png" mode="widthFix"></image>
				 </view>
				 <view class="navItem" @click="goTo('/pagesA/photo/cartoon_1')">
				 	<image src="/static/img/index/kthf.png" mode="widthFix"></image>
				 </view>
			 </view>	
			  
			 <view class="indexTitle">
				  <image src="/static/img/index/title_zj.png" mode="widthFix"></image>
			 </view>
			 <view class="listBox">
				 <view class="photoBox" v-for="(item,index) in specs_list" :key="index" v-if="item.ilk != 2" @click="merge(item)">
				 	<view class="photoTop">
				 		<view class="topLeft">
				 			<image :src="item.icon" mode="widthFix" @error="specsErr(index)"></image>
				 		</view>
				 		<view class="topCenter">
				 			<view class="title">{{item.title}}</view>
				 			<view class="desc" v-if="item.ilk == 1 || item.ilk == 2">{{item.w_h_mm.w}}×{{item.w_h_mm.h}}mm | {{item.w_h_px.w}}×{{item.w_h_px.h}}px</view>
				 			<view class="desc" v-else>自己设置照片的宽和高</view>
				 			
				 		</view>
				 		<view class="topRight">
				 			<view class="distance">
				 				<image src="/static/img/index/right.png" mode="widthFix"></image>
				 			</view>
				 		</view>
				 	</view>
				 </view>
					 
				
					 
			 </view>	 
			 <view class="indexTitle">
			 	  <image src="/static/img/index/title_xz.png" mode="widthFix"></image>
			 </view>
			 
			 <view class="picList">
				 <scroll-view class="scrollBox" scroll-x="true" @scroll="scroll1" scroll-left="0">
				 <view class="picBox" v-for="(item,index) in album_list" :key="index">
					 <view class="pic">
						 <image :src="item.face" mode="widthFix"></image>
					 </view>
					 <view class="pic_title">{{item.title}}</view>
				 </view>
				
				 </scroll-view>	  
			 </view>	 
			 
			 <view class="indexTitle">
			 	  <image src="/static/img/index/title_kt.png" mode="widthFix"></image>
			 </view>
			  
			 <view class="picList">
			 				 <scroll-view class="scrollBox" scroll-x="true" @scroll="scroll2" scroll-left="0">
			 				 <view class="picBox" v-for="(item,index) in cartoon_list" :key="index">
			 					 <view class="pic">
			 						 <image :src="item.face" mode="widthFix"></image>
			 					 </view>
			 					 <view class="pic_title">{{item.title}}</view>
			 				 </view>
			 				
			 				 </scroll-view>	  
			 </view>	  
			  
			
		 </view>	 
		 <view class="spaceBox"></view>	
  </view>
</template>

<script>
  import custom_navbar from "./components/header.vue";
  export default {
	components: {
	  	custom_navbar
	  
	},
    data() {
      return {
		  navbar_title: '',
		  theme: "blue",
		  margin_top: 0,
		  
		  banner: [
			   // {
				  //  adImg:'/static/img/index/banner.png',
			   // }
		   ],
		  
		  //场景
		  sceneList:[],
		  
		  specs_list:[],//证件
		  album_list:[],//写真
		  cartoon_list:[],//卡通
      }
    },
    onPageScroll(e) {
    	if (e.scrollTop > 50) {
    		this.theme = 'white';
			this.navbar_title='智能拍照合成';
    	} else {
    
    		this.theme = 'blue';
			this.navbar_title='';
    	}
    },
    onLoad() {
		var _this = this;
		//banner信息
		_this.getBannerList();
		//场景
		_this.getSceneMenu();
		//热门
		_this.getHotList();
		//延时1秒请求，保证成功
		setTimeout(function(res){
			_this.getUploadConfig();
		},1000);
     
    },
	onShareAppMessage() {
		var _this = this;
		var userInfo = _this.$user.session('userInfo');
		var str = !_this.$com.isNull(userInfo.invite_code) ? '?invite_code='+userInfo.invite_code :'';
		return {
		  title: '智能拍照合成',
		  content:'证件照合成,换色,AI写真,卡通画风',
		  imageUrl:'',
		  path: '/pages/index/index'+str,
		}
	},
	onShareTimeline() {
	   var _this = this;
	   var userInfo = _this.$user.session('userInfo');
	   var str = !_this.$com.isNull(userInfo.invite_code) ? '?invite_code='+userInfo.invite_code :'';
	   return {
	     title: '智能拍照合成',
	     content:'证件照合成,换色,AI写真,卡通画风',
	     imageUrl:'',
	     path: '/pages/index/index'+str,
	   }
	},
    methods: {
		getNavHeight(e) {
			this.margin_top += e;
		},
		goTo(url)
		{
			uni.$u.route({
				type:'navigateTo',
				url: url,
			});
		},
		//获取banner信息
		getBannerList(){
			var _this =this;
			 _this.$api.get('api/home/banner/list', {},function(res){
							console.log('banner原始',res);
							 var banner = res;
							 banner.forEach((item, index) => {
								banner[index].image = _this.$api.ossurl(item.image);
							 });
							 console.log('banner修正',banner);
							 _this.banner = banner;
							
			}); 
		}, 
		//获取上传配置并缓存
		getUploadConfig(){
			var _this = this;
			var post = {};
			_this.$api.get('api/fileDeploy', post,function(res){
							console.log(res);
							_this.$user.session('app_config',res);
			}); 
		},
		
		
		//合照热门
		getHotList(){
			var _this =this;
			 _this.$api.get('api/photo/hot_list', {},function(res){
							console.log('热门原始',res);
							 var specs_list= res.specs_list;
							 specs_list.forEach((item, index) => {
								specs_list[index].icon = _this.$api.ossurl(item.icon);
							 });
							 _this.specs_list = specs_list;
							 var album_list= res.album_list;
							 album_list.forEach((item, index) => {
								album_list[index].face = _this.$api.ossurl(item.face);
							 });
							 _this.album_list = album_list;
							 var cartoon_list= res.cartoon_list;
							 cartoon_list.forEach((item, index) => {
							 	 cartoon_list[index].face = _this.$api.ossurl(item.face);
							 });
							 _this.cartoon_list = cartoon_list;
							
			}); 
		},
		//证件照图片加载失败默认
		specsErr(index)
		{
			this.specs_list[index].icon = '/static/img/index/zj_icon.png';
		},

		//滚动监控
		scroll1(e) {
			console.log(e);
		},
		scroll2(e) {
			console.log(e);
		},
	
		openAd(index)
		{
			var _this =this;
			var item = _this.banner[index];
			console.log(item);
			if(!_this.$com.isNull(item.link_url))
			{
				console.log(item.link_url);
				var url = '';
				switch(item.type)
				{
					case 1:
					url=item.jumpUrl;
					break;
					
					case 2:
					url='/pages/web/index?title='+item.adName+'&url='+encodeURIComponent(item.jumpUrl);
					break;
					
					default:
					url = '';
				}
				if(!_this.$com.isNull(url))
				{
					uni.navigateTo({
						url:url,
					})
				}
			}
		},
		//首页跳转到列表页
		merge(item)
		{
			var _this =this;
			uni.navigateTo({
				url:'/pagesA/merge/index?id='+item.id+'&type='+item.type+'&ilk='+item.ilk,
			})
		},
		//合照场景
		getSceneMenu(){
			var _this =this;
			 _this.$api.get('api/photo/scene_list', {},function(res){
							console.log('场景',res);
							 var sceneList = res;
							 _this.sceneList = sceneList;
							 _this.$user.session('sceneList',sceneList);
			}); 
		},
		
    }
  }
</script>

<style lang="scss">
  .container{width: 100%;}
  
  .bannerBox{
	  width: 100%;
	  background: #082436;
	  height: auto;
	  position: relative;	
  }
  ::v-deep .u-swiper{background-color: inherit !important;}
 
  .contentBox{
		width:746rpx;
		height: auto;
		background: linear-gradient( 180deg, #DBD9FF 0%, #F5F6FB 100%);
		border-radius: 28rpx 28rpx 0rpx 0rpx;
		border: 2rpx solid #FFFFFF;
		margin-top: -80rpx;
		position: relative;
		z-index: 2; 


}

.navBox{ width: 100%; height: auto; display: flex;}
.navBox .navItem{ width: 164rpx; height: 140rpx; margin: 40rpx 20rpx 20rpx 20rpx;}
.navBox .navItem image{ width: 100%; height: auto;}
.indexTitle {width: 730rpx; height: auto; margin: 20rpx auto; padding-left: 20rpx; }
.indexTitle image{ width: 226rpx; height: auto;}


.listBox{ width: 100%; height: auto;}
 .photoBox{
 	padding:20rpx 10rpx 10rpx 10rpx;
 	height: auto;
 	border-radius: 24rpx 24rpx 24rpx 24rpx;
 	opacity: 1;
	background: #FFFFFF;
	width: 670rpx;
	margin: 15rpx auto;
 }
 .photoTop{width: 100%; height: auto; display: flex;
 	
 }
 .photoTop .topLeft{
 	width: 100rpx;
 	height: 88rpx;
 	
 	}
 .topLeft image{ width: 60rpx; height: auto; margin-left: 14rpx;}	
 .photoTop .topCenter{
 	width: 400rpx;
 	height: auto;
 	padding-left: 18rpx;
 	
 }
 .topCenter .title{
 	font-size: 30rpx;
	font-weight: 400;
 	color:#333333;
 	line-height: 50rpx;
 	width: 100%;
 	overflow: hidden;  //超出文本隐藏
 	white-space: nowrap;  //不换行，只显示一行
 	text-overflow: ellipsis;  //超出部分省略号显示
 }
 .topCenter .desc{
 	font-size: 24rpx;
 	color:#999999;
 	line-height: 30rpx;
 	width: 100%;
 	overflow: hidden;  //超出文本隐藏
 	white-space: nowrap;  //不换行，只显示一行
 	text-overflow: ellipsis;  //超
 }

 
 .photoTop .topRight{
 	width: 160rpx;
 	height: auto;
 	text-align: right;
 	
 }
 .topRight .distance{ color: #90A1AA; font-size: 24rpx; font-family: PingFang SC-Regular;  padding-top: 20rpx;}
 .topRight .distance image{ width: 32rpx; height: 32rpx; margin-right: 24rpx;}


 .picList{ width: 100%; height: 360rpx; }	
 
 .scrollBox {
 	margin-top: 20rpx;
 	width: 100%;
 	height: 360rpx;
 	white-space: nowrap;
 	
 }
 
 .picBox {
 	display: inline-block;
 	width:260rpx;
 	height: 360rpx;
 	text-align: center;
	position: relative;
 	margin-left: 20rpx;
 	
 }
 .picBox .pic{
	 position: absolute;
	 width:100%;
	 height: 360rpx;
	 
	
 } 
 .picBox .pic image{
	 width:260rpx;
	 height: 360rpx;
	 border-radius:24rpx;
 }
.picBox .pic_title{
	 position: absolute;
	 width:240rpx;
	 height: 72rpx;
	 bottom: 0;
	 z-index: 2;
	 font-size: 24rpx; line-height: 72rpx;
	 padding-left: 20rpx;
	 color: #FFFFFF;
	 text-align: left;
	 overflow: hidden;  //超出文本隐藏
	 white-space: nowrap;  //不换行，只显示一行
	 text-overflow: ellipsis;  //超
 } 

</style>
