<template>
	<view class="content">
		<view class="his" v-for="item in list">
			<view class="his-tit">
				日期：{{item.create_time.split(' ')[0]}}
			</view>
			<view class="his-info">
				打卡状态：已打卡
			</view>
			<view class="his-info">
				打卡时间：{{item.create_time.split(' ')[1]}}
			</view>
			<view class="his-info" v-if="item.content">
				工作记录：{{item.content}}
			</view>
		</view>
		<empty v-if="list.length == 0 && loaded"></empty>
		<uni-load-more v-else :status="loading"></uni-load-more>
	</view>
</template>

<script>
	import empty from '@/components/empty/empty.vue'
	import { getClockList } from '@/api/signing.js'
	export default {
		components: {
			empty
		},
		data() {
			return {
				loaded: false,
				list: [],
				loading: 'more',
				id: 0,
				page: 1,
				limit: 10
			}
		},
		methods: {
			getList() {
				if(this.loading == 'loading' || this.loading == 'noMore') return;
				this.loading = 'loading'
				getClockList({
					contract_id: this.id,
					page: this.page,
					limit: this.limit
				}).then(res => {
					// console.log(res);
					this.list = this.list.concat(res.data.list)
					if(res.data.list.length == this.limit) {
						this.loading = 'more'
					}else {
						this.loading = 'noMore'
					}
					this.loaded = true
				})
			},
		},
		onLoad(opt) {
			this.id = opt.id
			this.getList()
		},
		onReachBottom() {
			this.getList()
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		height: 100vh;
		background-color: #fff;
	}
	.his {
		&-tit {
			padding-left: 28rpx;
			height: 68rpx;
			line-height: 68rpx;
			background: #EDF8FE;
			font-size: 32rpx;
			color: #000000;
		}
		&-info {
			padding-left: 28rpx;
			font-size: 28rpx;
			color: #000000;
			line-height: 55rpx;
			margin: 20rpx 0;
		}
	}
</style>