<template>
	<view>
		<view class="content photo_back">
			<custom_navbar :title="navbar_title" @getNavHeight="getNavHeight" :theme="theme" />
			<view class="photo_main" :style="'margin-top:'+margin_top+'px'">

				<view class="search_div" style="margin-top: 20rpx;">
					<view class="search_div_1">
						<image src="/static/img/common/search_icon.png" />
					</view>
					<view class="search_div_2">
						<u--input placeholder="请输入搜索内容" border="none" v-model="search_text"></u--input>
					</view>
					<view class="search_div_3" @tap="goSearch">搜索</view>
				</view>


				<view class="tabs_div">
					<u-tabs @click="changeTab()"  :current="this_tab" :list="list1" lineWidth="25" lineHeight="10"
						:lineColor="`url(${lineBg}) 100% 100%`" :activeStyle="{
					        color: '#333333',
					        fontWeight: 'bold',
					        transform: 'scale(1.2)'
					    }" :inactiveStyle="{
					        color: '#333333',
					        transform: 'scale(1)'
					    }" itemStyle="padding-left: 15; padding-right:15px; height: 100rpx; width:140rpx">
					</u-tabs>
				</view>


				<scroll-view class="photo_list_div" 
				enable-flex="true" 
				scroll-y="true"
				 scroll-with-animation="true"
				 @scrolltolower="lower"
				  
				 lower-threshold="50">
					
					<view class="photo_list_div_one" v-for="(item,key) in temList"  :key="key" @tap="goThis(item.id)">
						<view class="photo_list_div_one_img"  >
						
							<image
								:src="item.url"
								mode="aspectFill" />
						</view>
						<view class="photo_list_div_one_text">
							{{item.title}}
						</view>
					</view>
				</scroll-view>


			</view>

		</view>


	</view>
</template>

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

		},
		data() {
			return {
				navbar_title: 'AI写真',
				theme: "white",
				search_text: '',
				margin_top: 0,
				lineBg: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACYAAAAOCAYAAABDwm71AAAAAXNSR0IArs4c6QAAAm5JREFUSEu1lD1oFEEUx39vZhOCpghikUIwkMKAjYWFEEELQdQTRfwqLGyMgsFcNDEWEbYQNB+Sw7ugdilSBDQ2tikSsFCwsBFiIVikSBEwQoRLuMzT3ds9z8vtXcjHwOzCzs57v/ef/xshGmdeaLsVUgZQYeZ9t3yN13bz/bpf2wVSYQ7DTNdQMa8Ej1RO76JkRPBQ8JS8OAbfpeX5bkLlHumAcTyxihcIAuSBvlsjMi7nc3pY4TPQFJIq2GiKY3TpF49nfQk27NjwffX25RkzSreJckVggS4FhQ5JZbVHhEwpaxlYsMk4PjYYbk6m5dtOkGUG9ZBzTFjHsUCASrAgh0I6BKMMrFyxeJN15A28susMTTyUxa0A+v3auqeRHqP0GcWLTyURLDL9fOivCHfDpljFAFCZ8oS3P38z98aXlVqQvq/N4jjhKddNcYZApYKrK5ZXw9HQ/OfG9YEoo5UeK1VTcbwhuKPwN9m8VeYNLHqO5cAnxtFs4YBxdFilw4BnXdG3teLFHgO6Q/PHFZ/N6QUDU6I0JSpWL3iVAsrsUA8sr3Cja0SmS9dF6S7LameDMmmgrW6FtSCKTVNUiVDdeootoFy+PSqfYpaSYvGHi2PaIoaXhtAT/wXcFqyrfpQCE2ur9PZmZLncrxvA4sVLWe206+SscqSqWberGHwRSN97KnPVGigRLP75akZPNzjSxnHKgrdlFYuKFQzMWMez+wlAiUeZ1P5XhrV1r+GacZy0cNwo+2s2yT+PLXmOD1aZlTWmB4ZlYTP3YF3FkoLc8bVNGjkYNUqLB82R0VeMY9kTfqw6vg/7mwOpzPMHTiZrgwPNrpsAAAAASUVORK5CYII=',
				
				
				list1: [{
					name: '女生'
				}, {
					name: '男生',
				}],
				this_tab:0,
				
				curPage: 0,
				total: 0,
				temList:[]

			}
		},

		mounted() {
			//this.getScreenSize();
			//initListHeight(), ;
		},
		
		onLoad(){
			this.getList();
		},
		
		methods: {
			lower(){
				console.log('this is lower')
				this.loadMore();
			},
			
			
			loadMore() {
			
				let isLoad = Math.ceil(this.total / 10) > this.curPage;
				if (isLoad) {
					this.getList();
				}
			},
			
			getNavHeight(e) {
				this.margin_top += e;
			},
			goSearch() {
				this.total =0;
				this.temList=[];
				this.curPage = 0;
				this.getList();
			},
			changeTab(e) {
				this.this_tab = e.index;
				this.total =0;
				this.temList = [];
				this.curPage = 0;
				let that = this;
				setTimeout(function(){
					that.getList();
				},1000)
			},
			
			
			
			getListData(){
				let list = [];
				let n= 0;
				for(n=0;n<10;n++){
					let t = {};
					t.url = 'https://img30.360buyimg.com/sku/jfs/t1/221254/4/39390/74349/661e039aF46114279/48532008a0001dd0.jpg'
					t.id = '123';
					t.title = '哈哈哈哈哈哈哈哈哈哈或或或哈哈哈哈哈哈哈哈哈哈或或或';
					list.push(t);
				}
				
				return {total:32,list:list};
			},
			getList(){
				
				let params = {
					page: this.curPage + 1,
					limit: 10,
					sex: this.this_tab,
					text:this.search_text				
				};
				
				let res = this.getListData();		
					
				
				this.curPage = params.page;				
				this.total = res.total;
				
				let datas = [...this.temList];
				
				if (params.page > 1) {
					datas.push(...res.list)
				} else {
					datas = res.list;					
				}
				
				this.temList = datas;
				
			},
			goThis(id){
				uni.navigateTo({
					url:'/pagesA/photo/photo_2?id='+id
				})
			}
			
		}
		
	}
</script>

<style lang="scss" scoped>
	@import './this.scss';

	// page {
	// 	//background-color: #E3E8FE !important;
	// }

	.photo_back {
		background-color: #E3E8FE;
		min-height: 100vh;
		width: 100%;
		top: 0;
		left: 0;
		height: 100%;
		overflow: hidden;
	}
</style>