<template>
	<view>
		<loadlogo v-if="!loadlogo" />
		<view class="container" v-if="loadlogo">
			<far-bottom></far-bottom>
			<view class="header-bg" :style="{'background-image':'url('+imageRoot+'record_bg.jpg)'}">
				<view class="header-bg-word">
					<view class="title col-f f-48 m-btm20">签到记录</view>
					<view class="word-label f-30">每日签到会有{{TextSubstitution.credittext}}奖励喔~</view>
				</view>
			</view>
			<view class="content-title dis-flex p-r">
				<view class="content-title-item total-sign-title col-f t-c f-28">累计签到:<text>{{info.total}}天</text></view>
				<view class="content-title-item total-sign-title f-28 col-f t-c">签到{{TextSubstitution.credittext}}:<text>{{info.integral}}</text></view>
			</view>
			<scroll-view scroll-y class="scroll-view" @scrolltolower="ReachBottom">
				<view class="sign-list b-f">
					<view class="sign-list-item padding-box-all dis-flex flex-y-center flex-x-between border-line border-bottom" v-for="(listItem,index) in list" :key="index">
						<view class="sign-list-item-left">
							<view class="dis-flex flex-y-center m-btm10">
								<view class="f-28 col-3">{{TextSubstitution.credittext}}签到+{{listItem.reward}}{{TextSubstitution.credittext}}</view>
								<view class="sign-list-item-label f-24 col-f">{{listItem.sign_class}}</view>
							</view>
							<view class="f-24 col-9">{{listItem.createtime}}</view>
						</view>
						<view class="sign-list-item-right f-24">+{{listItem.reward}}</view>
					</view>
				</view>
				<Loading v-if="!loading" />
			</scroll-view>
		</view>
		<view class="page-footer">
			<TabBars :tabBarAct="0" :pageType="'11'" />
		</view>
	</view>
</template>

<script>
	import Loadlogo from '@/components/template/loadlogo'
	import Loading from '@/components/template/loading'
	import App from "@/common/js/app.js"
	import TabBars from '@/components/template/tabBar.vue'
	export default {
		data() {
			return {
				info: {},
				list: [],
				current_page: 1, //当前页数
				total:null ,//总页数
				loadlogo: false, //页面是否加载完成
				loading:false //列表加载更多
			}
		},
		mounted() {
			this.getrecordList()
		},
		components:{
			Loadlogo,
			Loading,
			TabBars
		},
		computed:{
			TextSubstitution(){
				return uni.getStorageSync('TextSubstitution');
			}
		},
		methods: {
			getrecordList(page = 1, isPage = false) {
				let _this = this;
				App._post_form('&p=wlsign&do=recordList', {
					page
				}, res => {
					let recordData = res.data;
					if (isPage) {
						if (recordData.list.length > 0) {
							_this["list"].push(...recordData.list);
						} else {
							_this.loading = true;
						}
					} else {
						_this.setData(recordData)
						_this.loading = recordData.list.length === 0 || _this.current_page === recordData.total;
					}
				}, false, () => {
					_this.loadlogo = true
				})
			},
			//加载更多
			ReachBottom() {
				let _this = this;
				if (_this.current_page >= _this.page_total) {
					_this.loading = true;
					return false;
				}
				_this.getrecordList(++_this.current_page, true);
			},
		},

	}
</script>

<style lang="scss" scoped>
	page {
		background-color: rgb(239, 238, 243);
	}

	.scroll-view {
		height: 63vh;
	}

	.header-bg {
		height: 320upx;
		background-repeat: no-repeat;
		background-size: 100% 320upx;

		.header-bg-word {
			padding: 100upx 50upx 00upx;

			.word-label {
				color: rgba(255, 255, 255, .8);
			}
		}
	}

	.content-title {
		width: 100%;
		background-color: #000000;
		height: 80upx;

		.content-title-item {
			width: 50%;
			line-height: 80upx;
		}

		.total-sign-title {
			&>text {
				color: #FF7F50;
				margin-left: 10upx;
			}
		}
	}

	.content-title::after {
		content: "";
		width: 2upx;
		height: 50%;
		background-color: rgba(255, 255, 255, .6);
		position: absolute;
		top: 25%;
		left: 50%;
		transform: translateX(-50%);
	}

	.sign-list {
		padding-bottom: 120upx;
		.sign-list-item {
			.sign-list-item-left {
				.sign-list-item-label {
					background-color: rgb(111, 203, 64);
					padding: 2upx 40upx;
					border-radius: 40upx;
					margin-left: 10upx;
				}
			}

			.sign-list-item-right {
				color: #FF7F50;
			}
		}
	}
</style>
