<template>
	<view class="bg">
		<view class="row-container header-row" v-if="list.length>0">
			<view>所属日期</view>
			<view>打卡时间</view>
			<view>打卡状态</view>
		</view>
		<view class="row-container item-row" v-for="(item, index) in list" :key="index" @click="goDetail(item)">
			<view>{{ item.date }}</view>
			<view v-if="item.status==1">
				{{item.type==1?item.create_time.slice(11):item.update_time.slice(11) }}
			</view>
			<view v-else></view>
			<view>
				{{item.status==0?'审批中':item.status==1?'打卡正常':item.status==2?'审批拒绝':item.status==3?'审批取消':''}}
			</view>
		</view>
		
		
		<view class="empty-text" v-if="list.length == 0">
			暂无打卡记录
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [],
				finished: false,
				page: 1,
				limit: 30,
			}
		},
		onShow() {
			this.page = 1
			this.finished = false
			this.list = []
			this.getList()
		},
		methods: {
			getList() {
				this.Post({
					page: this.page,
					limit: this.limit,
				},'/api/Merchants/getGuideClockList').then(res => {
					this.list = this.list.concat(res.data || [])
					this.page++
					if (res.data.length<this.limit) {
						this.finished = true
					}
				})
			},
			goDetail (item) {
				// 审批打卡要跳转详情
				if (item.type == 2) {
				uni.navigateTo({
					url: '/subPackages/clockIn/index?id='+item.id
				})
				}
			},
		},
		onReachBottom() {
			setTimeout(() => {
				if (!this.finished) this.getList()
			},1000)
		}
	}
</script>

<style lang="scss" scoped>
	.bg {
		background: #F5F5F5;
		min-height: calc(100vh - 44px - env(safe-area-inset-top)) ;
		padding: 26rpx 26rpx 50rpx;
	}
	.row-container{
		display: flex;
		width: 100%;
		flex-wrap: nowrap;
		background: white;
		&>view{
			flex: 1;
			flex-shrink: 0;
			text-align: center;
			padding: 22rpx 27rpx;
		}
	}
	.header-row{
		color: white;
		background: #96684F;
		border-radius: 13rpx 13rpx 0rpx 0rpx;
	}
	.item-row{
		border-bottom: 1px solid #ccc;
		&>view{
			border-left: 1px solid #ccc;;
		}
		&>view:first-child{
			border-left: none;
		}
		&:last-child{
			border-bottom: none;
			border-radius: 0rpx 0rpx 13rpx 13rpx;;
		}
	}
	
	.empty-text {
		font-weight: 500;
		font-size: 25rpx;
		color: #646464;
		text-align: center;
		margin: 50rpx 0;
	}
</style>