//单位管理员
<template>
	<view style="min-height: 100vh;background-color: #F3F3F3;">
		<u-sticky>
			<view style="background-color: #3A71FF;height: 90px;">
				<image :src="applet+'/back.png'" style="width: 20px;height: 20px;margin-top: 55px;margin-left: 10px;" @tap="close"></image>
				<view style="text-align: center;color: #fff;position: absolute;top: 49px;left: 40%;font-size: 17px;" >打卡记录</view>
			</view>
		</u-sticky>
		<view >
			<u-search bgColor="#fff" v-model="pageInfo.unitName" placeholder="请输入单位名称" @custom="search" :showAction="true" actionText="搜索" :animation="true"></u-search>
		</view>
		
		<uni-list class="custom-list">
			<u-card class="custom-card" v-for="(val,index) in list"
				:show-foot="false" :show-head="false">
				<view slot="body"><span class="u-body-title">企业名称：</span><span class="u-body-item-desc">{{val.unitName}}</span></view>
				<view slot="body"><span class="u-body-title">应打卡：</span><span class="u-body-item-desc">{{val.sum}}人</span></view>
				<view slot="body"><span class="u-body-title">已打卡：</span><span class="u-body-item-desc">{{val.recnum}}人</span></view>
				<view slot="body"><span class="u-body-title">打卡时间：</span>
					<span class="u-body-item-desc" v-for="item in val.ut.split(',')" >{{item}}</span>
				</view>
				<!-- <view slot="body" class="u-body-title" style="display: flex;justify-content: space-between;width: 70%;margin-left: 10%;">
					
				</view> -->
			</u-card>
		</uni-list>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				applet:this.$url.data.applet,
				pageInfo:{
					page:1,
					limit:20,
					unitName:'',
					date:'2023-07-25',
					dateTime:'2023-07-25 15:00:00',
					regionId:'',
					type:''
				},
				list:[]
			}
		},
		onLoad(e) {
			this.pageInfo.type = e.type
			this.pageInfo.regionId = uni.getStorageSync("regionId")
			this.pageInfo.date = e.date
			this.pageInfo.dateTime = e.dateTime
			this.loadData()
		},
		methods: {
			loadData(){
				this.$http.get("/fire-customer/sign/record/supervise/page",this.pageInfo,{}).then(res =>{
					this.list = this.list.concat(res.data)
				})
			},
			search(e){
				this.pageInfo.page = 1;
				this.list = [];
				this.loadData()
				// console.log(e)
			},
			close(){
				uni.navigateBack()
			}
		},
		onPullDownRefresh() {
			this.pageInfo.page = 1;
			this.list = [];
			this.loadData();
			//下拉刷新
			uni.stopPullDownRefresh();
		},
		onReachBottom() {
			this.pageInfo.page = this.pageInfo.page + 1;
			this.loadData();
			//加载更多
		}
	}
</script>


<style scoped lang="scss">
	.CBlue {
		background-image: linear-gradient(#7cc9ff,#1771d7);
		box-shadow: 0 8px 8px #b0d2f3;
	}

	.module {
		overflow: hidden;
		margin: 20upx auto;
		width: 260upx;
		height: 260upx;
		border-radius: 50%;
		color: #fff;
		text-align: center;
	}

	.module .text {
		font-size: 20px;
		margin: 80upx auto 10upx;
	}
	
	.custom-list {
		background: #f1f1f4;
		
		.custom-card {
			position: relative;
		
		}
	}
	.u-body-title {
		font-size: 28rpx;
		color: #333;
		font-weight: 550;
		padding: 8rpx 0;
	}
	
	.u-body-item {
		padding: 0rpx;
	}
	
	.u-body-item-desc {
		font-size: 28rpx;
		color: #555;
		padding: 8rpx;
		float: right;
		font-weight: 0;
	}
	
	.u-body-item image {
		width: 160rpx;
		flex: 0 0 160rpx;
		height: 120rpx;
		border-radius: 8rpx;
		margin-left: 0rpx;
		margin-right: 12rpx;
	}
	
	.u-margin-right-12 {
		margin-right: 12rpx;
		border: 0;
	}
</style>