<template>
	<view class="page">

		<u-sticky>
			<view class="title-bar bg-white">
				<view style="width: 66upx;">进/出</view>
				<view style="width: 140upx;text-align: center;">开门时间</view>
				<view style="width: 240upx;text-align: center;">小区名称</view>
				<view style="width: 118upx;text-align: center;">操作者</view>
				<view style="width: 70upx;">体温</view>
			</view>
		</u-sticky>

		<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback" :down="downOption"
			:up="upOption">
			<block v-for="(item, index) in list" :key="index">
				<view class="record" :class="index % 2 == 0 ? 'bg-gray':''">
					<view class="text-center" style="width: 30upx;">
						<text v-if="item.isOut == 1">进</text>
						<text v-else>出</text>
					</view>
					<view style="width: 190upx;">{{formatTime(item.createTime)}}</view>
					<view style="width: 200upx;">{{item.residentialName}}</view>
					<view style="width: 168upx;">{{item.userName}}</view>
					<view style="width: 70upx;">
						<block v-if="$isEmpty(item.temperature)">-</block>
						<block v-else>{{item.temperature}}</block>
					</view>
				</view>
			</block>
		</mescroll-body>
	</view>
</template>

<script>
	import MescrollMixin from "@/comps/mescroll-body/mescroll-mixins.js";
	export default {
		mixins: [MescrollMixin], // 使用mixin
		name: '',
		data() {
			return {
				list: []
			};
		},
		computed: {
			formatTime() {
				return time => {
					let date = typeof(time) == 'string' ? time.replace(/\-/g, '/') : time
					return this.$u.timeFormat(new Date(date).getTime(), 'mm/dd hh-MM')
				}
			}
		},
		methods: {
			downCallback(mescroll) {
				setTimeout(() => {
					this.mescroll.resetUpScroll()
				}, 200)
			},
			upCallback(mescroll) {
				try {
					let params = {
						userId:this.vuex_member.id,
						query: {
							current: mescroll.num,
							size: 20
						}
					}
					this.$http.accessRecords(params).then(res => {
						let data = res.data.data.records
						let length = data.length
						this.total = res.data.data.total
						mescroll.endBySize(length, this.total);
						if (mescroll.num == 1) this.list = []; //如果是第一页需手动制空列表
						this.list = this.list.concat(data); //追加新数据
					})
				} catch (e) {
					console.log(e);
					this.mescroll.endErr()
				}
			}
		}
	};
</script>

<style lang="scss" scoped>
	.page {
		background-color: #FFFFFF;
	}

	.title-bar {
		display: flex;
		line-height: 80upx;
		border-top: #CCC 1upx solid;
		justify-content: space-around;
	}

	.record {
		display: flex;
		justify-content: space-around;
		line-height: 80upx;
		text-align: center;
	}
</style>
