<template>
	<view>
		<view class="content ">
			<custom_navbar :title="navbar_title" @getNavHeight="getNavHeight" :theme="theme" />
			<view class="photo_main_cartoon" :style="'margin-top:-'+margin_top+'px'">
				<view class="photo_main_cartoon_head">
				</view>
				<view class="photo_main_cartoon_one"  v-for="(item, index) in cartoonList" :key="index"  :style="(index == 0? 'margin-top: -180rpx;':'')+'background: url('+item.face+') center center no-repeat; background-size: 100% auto; '">
					<view class="photo_main_cartoon_one_1">{{item.title}}</view>
					<view class="photo_main_cartoon_one_2" @click="goTo('/pagesA/photo/cartoon_2?id='+item.id)">
						开始制作
					</view>					
				</view>
				
				
			</view>

		</view>


	</view>
</template>

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

		},
		data() {
			return {
				navbar_title: '卡通画风',
				theme: "blue",
				margin_top: 0,
				cartoonList:[],
				page: 1,

			}
		},
		onLoad() {
			var _this = this;
			_this.loadDataList();
		},
		onReachBottom () {
		
		    this.page++;
		    this.loadDataList();
		
		},
		onPageScroll(e) {
			if (e.scrollTop > 50) {
				this.theme = 'white';

			} else {

				this.theme = 'blue';
			}
		},
		methods: {

			getNavHeight(e) {
				this.margin_top += e;
			},
			goTo(url)
			{
				uni.navigateTo({
					url:url,
				})
			},
			//for loadDataList
			loadDataList() {
			   var _this = this;
			   var post = {
							page:_this.page,
							limit:10,
						  };
			   _this.$api.get('api/cartoon/list', post, function(res) {
							 var d = res;
							 var Data = d.data;
							 Data.forEach((item, index) => {
							 	Data[index].face = _this.$api.ossurl(item.face);
							 });
			   				 _this.cartoonList = _this.cartoonList.concat(Data);
			   });
			},


		}
	}
</script>

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