<template>
	<view class="">
		<view class="account_header">
			<view class="cu-bar bg-blue search">
				<view class="action">
					<u-calendar v-model="calendarShow" mode="range" @change="calendarChange"></u-calendar>
					<view class="uni-input" @click="calendarShow = true">{{ days }}</view>
					<view class="kailong" @click="calendarShow = true"></view>
				</view>
			</view>
		</view>
		<view class="content">
			<view class="card" v-for="(item,index) in list" :key="index">
				<view class="card-box">
					<view class="card-box-top">
						<view class="card-box-top-address">
							名称--区域
						</view>
						<view class="card-box-top-time">
							2023-12-26 59:59:59
						</view>
					</view>
					<view class="card-box-body">
						<view class="card-box-body-photo">
							<image style="width: 100%;height: 100%;" src="../../../static/image/home-select.png"
								mode=""></image>
						</view>
						<view class="card-box-body-content">
							<view class="card-box-body-content-list">
								<text style="color: #000;font-weight: 900;opacity: 0.8;">打卡类型：</text>
								<text style="font-size:13px">上班签到</text>
							</view>
							<view class="card-box-body-content-list">
								<text style="color: #000;font-weight: 900;opacity: 0.8;">打卡设备：</text>
								<text style="font-size:13px">num123</text>
							</view>
							<view class="card-box-body-content-list">
								<text style="color: #000;font-weight: 900;opacity: 0.8;">工作内容：</text>
								<text style="font-size:13px"></text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [{}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}],
				calendarShow: false,
				days: '2023-12-01 —— 2023-12-26'
			};
		},
		methods: {
			calendarChange(days){
				console.log(days)
			},
		},
		onShow: function() {
			this.userInfo = uni.getStorageSync('userInfo')
			uni.stopPullDownRefresh();
		},
		onPullDownRefresh() {
			setTimeout(function() {
				uni.switchTab({
					url: './myHome'
				})
				uni.showToast({
					title: '刷新成功',
					icon: 'success',
					duration: 2000
				});
				uni.stopPullDownRefresh();
			}, 1000);

		}
	}
</script>

<style scoped>
	.kailong {
		width: 0;
		height: 0;
		margin-left: 5px;
		border-right: 9px solid transparent;
		border-left: 9px solid transparent;
		border-top: 9px solid #ccc;
	}

	.content {
		padding: 10upx 40upx;
		max-height: 90vh;
		overflow: auto;
	}

	.card {
		width: 100%;
		border-radius: 10upx;
		border-left: 2px solid #2979ff;
		box-shadow: 5px 5px 2px #ccc;
		margin-top: 10px;
	}

	.card-box {
		padding: 0 10px;
		box-sizing: border-box;
	}

	.card-box-top {
		display: flex;
		align-items: center;
		Justify-content: space-between;
	}

	.card-box-top-address {
		font-weight: 900;
	}

	.card-box-top-time {
		color: #FF3333;
		font-weight: 500;
	}

	.card-box-body {
		display: flex;
		align-items: center;
	}

	.card-box-body-photo {
		width: 60px;
		height: 60px;
		border: 1px dotted rebeccapurple;
	}

	.card-box-body-content {
		flex: 1;
		padding: 10px;
		overflow: hidden;
	}

	.card-box-body-content-list {
		font-size: 15px;
		color: rgb(105, 105, 105);
		overflow: hidden;
		text-overflow: ellipsis;
	}
</style>
