<template>
	<view>
		<u-datetime-picker :show="showDatePicker" v-model="date" mode="date" @cancel="showDatePicker=false"
			@confirm="showDatePicker=false" @change="dateChanged">
		</u-datetime-picker>
		<view class="date-picker-btn" @tap="showDatePicker=true">
			{{new Date(date).getFullYear()}}-{{new Date(date).getMonth()+1}}-{{new Date(date).getDate()}}
			<u-icon name="calendar" color="#2979ff" size="24"></u-icon>
		</view>
		<view class="record-list">
			<view class="record-item" v-for="(item ,index) in recordList" :key="index">
				<!-- <view class="record-status"
					:style="`background-image: linear-gradient(219deg, ${statusDict[item.status].color1} 0%, ${statusDict[item.status].color2} 99%)`">
					<text>{{statusDict[item.status].name}}</text>
				</view> -->
				<image class="photo" src="../../../../attendance_photo_example.png" mode=""></image>
				<view class="desc">
					<view class="desc-item">
						<text class="key">姓名：</text>
						<text class="value">{{item.name}}</text>
					</view>
					<view class="desc-item">
						<text class="key">年龄：</text>
						<text class="value">{{item.age}}</text>
					</view>
					<view class="desc-item">
						<text class="key">联系方式：</text>
						<text class="value">{{item.phone}}</text>
					</view>
					<view class="desc-item">
						<text class="key">身份证号：</text>
						<text class="value">{{item.idCard}}</text>
					</view>

					<view class="desc-item-row">
						<view class="desc-item">
							<text class="key">进门时间：</text>
							<text class="value">{{item.time}}</text>
						</view>
						<view class="desc-item">
							<text class="key">出门时间：</text>
							<text class="value">{{item.time}}</text>
						</view>
					</view>

				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'Record',
		data() {
			return {
				statusDict: {
					0: {
						name: '正常',
						color1: '#39DAAA',
						color2: '#02C489'
					},
					1: {
						name: '异常',
						color1: '#FD934E',
						color2: '#FF7442'
					},

				},
				date: new Date().getTime(),
				showDatePicker: false,
				recordList: [{
					name: '张十八',
					age: '23',
					phone: '18212341234',
					idCard: '342922199904664352',
					time: '12:32:43',
					status: 0,

				}, {
					name: '张十九',
					age: '23',
					phone: '18212341234',
					idCard: '342922199904664352',
					time: '12:32:43',
					status: 1,
				}, {
					name: '张三十七',
					age: '23',
					phone: '18212341234',
					idCard: '342922199904664352',
					time: '12:32:43',
					status: 0,
				}, {
					name: '张五十六',
					age: '23',
					phone: '18212341234',
					idCard: '342922199904664352',
					time: '12:32:43',
					status: 1,
				}, {
					name: '张九十三',
					age: '23',
					phone: '18212341234',
					idCard: '342922199904664352',
					time: '12:32:43',
					status: 0,
				}, ]
			}
		},
		methods: {
			confirmDatePicker(date) {
				this.showDatePicker = false
				// this.date = date.value
			},
			dateChanged(date) {
				console.log(date);
			}
		}
	}
</script>

<style lang="scss" scoped>
	.date-picker-btn {
		width: 300rpx;
		height: 60rpx;
		border-radius: 20rpx;
		border: 1px solid #ccc;
		display: flex;
		justify-content: center;
		align-items: center;
		margin: 0 auto;
	}

	.record-list {
		padding: 0 20rpx 20rpx;

		.record-item {
			position: relative;
			padding: 24rpx;
			display: flex;
			background: #FFFFFF;
			border-radius: 8rpx;

			&:not(:last-child) {
				margin-bottom: 20rpx;
			}

			.record-status {
				position: absolute;
				top: 0;
				right: 0;
				display: flex;
				justify-content: center;
				align-items: center;
				width: 112rpx;
				height: 48rpx;
				background-image: linear-gradient(219deg, #FD934E 0%, #FF7442 99%);
				border-radius: 0 8rpx 0 32rpx;

				text {
					font-size: 12rpx;
					color: #fff;
				}
			}

			image {
				width: 164rpx;
				height: 200rpx;
			}

			.desc {
				margin-left: 20rpx;

				.desc-item {
					.key {
						font-family: PingFangSC-Regular;
						font-size: 24rpx;
						color: #8F959E;
						line-height: 28rpx;
						font-weight: 400;
					}

					.value {
						font-family: PingFangSC-Regular;
						font-size: 24rpx;
						color: #333333;
						line-height: 28rpx;
						font-weight: 400;
					}
				}
			}
		}
	}
</style>
