<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 style="padding: 10px 10px;" v-for="(item,index) in talk">
			<view>
				<text style="margin-left: 4%;">{{item.sigindate}}</text>
			</view>
			<uni-list class="custom-list">
				<u-card class="custom-card"  v-for="(cItem,index_) in item.data" @click="previewOpen(cItem.picUrl)"
					:show-foot="false" :show-head="false">
					<view slot="body" class="u-body-item" style="display: flex;flex-wrap:nowrap;">
						<view>
							<u-image :src="cItem.picUrl" width="60" height="80" mode="aspectFill" :lazy-load="true"></u-image>
						</view>
						<view slot="body"  style="margin-left: 20px;line-height: 28px;">
							<view class="u-body-title">姓名：</view><view class="u-body-item-desc">{{cItem.realName}}</view>
							<view class="u-body-title">打卡时间：</view><view class="u-body-item-desc">{{cItem.time}}</view>
						</view>
					</view>
				</u-card>
			</uni-list>
		</view>
		
		<!-- <view class="container">
			<view class="set_box" v-for="(item,index) in talk" :key="index">
				<view class="set_time">
					<view>{{item.sigindate}}</view>
				</view>
				<view class="set-1">
					<view class="set-2">
						<view class="tlak_o" v-for="(cItem,index_) in item.data">
							<view class="user like_">
								<view class="user_say like_o">
									<view class="user_head like_h">
										<text class="doc_name name_">{{cItem.realName}}</text><text
											class="doc_time time_">{{cItem.time}}</text>
									</view>
									<view class="user_talk like_talk">
										<view class="like_img" v-if="cItem.picUrl">
											<image :src="cItem.picUrl"  @click="previewOpen(cItem.picUrl)"></image>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view> -->
	</view>
</template>

<script>
	import {
		formatterDateTime
	} from "@/common/utils.js"
	export default {
		data() {
			return {
				applet:this.$url.data.applet,
				talk:[],
				query:{
					unitId:'',
					siginDateStart:'',
					siginDateEnd:''
				}
			}
		},
		onLoad(e) {
			this.query.unitId = e.unitId
			this.query.siginDateEnd = e.date
			this.query.siginDateStart = this.handleDate(e.date,'3')
			this.loadData()
		},
		methods: {
			loadData(){
				this.$http.get("/fire-customer/sign/record/signListByUnitId",this.query,{}).then(res =>{
					var dd = res.data
					for(let i=0;i<res.data.length;i++){
						dd[i].data = JSON.parse(dd[i].signdata.value);
						dd[i].data = dd[i].data.filter( u => u.isShow);
					}
					this.talk = dd
				})
			},
			handleDate(date, day){
			    var d = new Date(date);
			    d = d.valueOf();
			    d = d - day * 24 * 60 * 60 * 1000;
			    return formatterDateTime(new Date(d), 'Y-M-D');
			},
			previewOpen(e) {
				uni.previewImage({
					urls: [e]
				})
			},
			close() {
				uni.navigateBack()
			}
		}
	}
</script>


<style lang="scss" scoped>
	.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 {
			//margin: 12rpx 24rpx !important;
			position: relative;
		
			.card-nav {
				position: absolute;
				float: right;
				top: 40%;
				right: 35rpx;
			}
		}
	}
	.u-body-title {
		font-size: 28rpx;
		color: #333;
		font-weight: 550;
		padding: 8rpx 0;
		width: 36%;
		float: left;
	}
	
	.u-body-item {
		padding: 0rpx;
	}
	
	.u-body-item-desc {
		font-size: 28rpx;
		color: #555;
		padding: 8rpx;
		float: left;
		font-weight: 0;
		width: 60%;
	}
	
	.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;
	}
	// .container{
	// 	padding: 10px;
	// }
	// .set_box {
	// 	width: 100%;
	// 	height: 100%;
	// 	display: flex;
	// 	flex-direction: row;
	// }

	// /* 左侧时间 */
	// .set_time {
	// 	width: 26%;
	// 	position: relative;

	// 	view {
	// 		width: 120%;
	// 		position: absolute;
	// 		margin-top: 60upx;
	// 		right: -40rpx;
	// 		color: #999999;
	// 	}

	// }


	// /* 右侧内容 */


	// .set-1 {
	// 	width: 90%;
	// }

	// .set-2 {
	// 	min-height: 300upx;
	// 	border-radius: 10upx;
	// 	width: 84%;
	// 	margin-left: 100upx;
	// 	margin-top: 60upx;
	// 	padding-right: 10rpx;
	// 	position: relative;

	// 	.tlak_o {
	// 		width: 100%;
	// 		min-height: 300upx;

	// 		.like_ {
	// 			width: 100%;
	// 			min-height: 100rpx;

	// 			.like_o {
	// 				width: 100%;
	// 				height: 100%;

	// 				.like_h {
	// 					color: #999999;

	// 					.name_ {
	// 						margin-right: 20rpx;
	// 						font-size: 32rpx;
	// 					}

	// 					.time_ {
	// 						font-size: 24rpx;
	// 					}
	// 				}

	// 				.like_talk {
	// 					width: 95%;
	// 					min-height: 100rpx;
	// 					margin: 0 30rpx;

	// 					text {
	// 						color: #333333;
	// 					}

	// 					.like_img {
	// 						width: 100%;
	// 						min-height: 100rpx;
	// 						display: flex;
	// 						justify-content: flex-start;
	// 						flex-wrap: wrap;

	// 						image {
	// 							width: 30%;
	// 							height: 180rpx;
	// 							margin-bottom: 20rpx;
	// 							margin-right: 2%;
	// 						}
	// 					}
	// 				}
	// 			}
	// 		}
	// 	}
	// }

	// .set-2::after {
	// 	content: '';
	// 	/* 必须存在如果没有图标就留空 */
	// 	top: -20upx;
	// 	/* 定位 距离*/
	// 	border-left: #c6c6c6 1px solid;
	// 	/* 横线颜色 */
	// 	left: -44upx;
	// 	/* 定位 距离*/
	// 	height: 120%;
	// 	/* 高度 */
	// 	position: absolute;
	// 	/* 定位 */
	// }

	// .set-2::before {
	// 	content: "\e64d";
	// 	/* 必须存在如果没有图标就留空 */
	// 	color: #c6c6c6;
	// 	/* 设置颜色 */
	// 	position: absolute;
	// 	/* 定位 */
	// 	left: -70upx;
	// 	top: -20upx;
	// 	/* 移动到左边 */
	// 	font-weight: bold;
	// 	/* 图标样式在复制的图标文件中复制相对应的图标样式必须存在 */
	// 	font-family: "iconfont" !important;
	// 	/* 图标样式在复制的图标文件中复制相对应的图标样式必须存在 */
	// 	font-size: 54upx;
	// 	/* 图标大小 */
	// 	font-style: normal;
	// 	/* 图标样式在复制的图标文件中复制相对应的图标样式必须存在 */
	// 	-webkit-font-smoothing: antialiased;
	// 	/* 图标样式在复制的图标文件中复制相对应的图标样式必须存在 */
	// 	-moz-osx-font-smoothing: grayscale;
	// 	/* 图标样式在复制的图标文件中复制相对应的图标样式必须存在 */
	// }

	// @font-face {
	// 	font-family: "iconfont";
	// 	src: url('//at.alicdn.com/t/font_1337773_f06f5a7las.eot?t=1565581133395');
	// 	/* IE9 */
	// 	src: url('//at.alicdn.com/t/font_1337773_f06f5a7las.eot?t=1565581133395#iefix') format('embedded-opentype'),
	// 		/* IE6-IE8 */
	// 		url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAOIAAsAAAAAB8QAAAM7AAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDMgqCRIIjATYCJAMUCwwABCAFhG0HZhvNBsiemjwJqJERRCC3tX4YOM4iqNbCnr29uw8wKGBUsUAKqDyCjY5HcEzCALron1wr8wDk8hKBFpIc5yaXfWZJoIBIQkF1KlvVqWuFfZ3c/CBw0p8fcMJJsQY6uIuEMk8188LgXgfHTJceiXlrm0tGajTgaMCz2T6yyf5BXh+Ef9BdxMSIS9cTaKmvYGbzFhRXA1sZ2C0QO7cRAdhadnmkNTSEqufYLM4qNdKx9AJn+M/Hb2OiQVIWwL6rNufIIP1bj29voaZspAiK/byITqLAaEAmdvX6d7KQ+dEstCw2tjQL0FJDkvZald8e//3y+WglCIaW0E/e5R8vERWvuTWY5RYy3/ywXBtKXBEF395EBN++FCQ8V5CWsmEt4CBgHMz1Ad8rde7s2LbD7oUhT3l+eWHbhxwOB+LFrfkVL7I3FIAWdpdWvfHiYt8FltYWdzy1Pz/WfPhQ/elT7efPvUJiVlRsIj8+18X3az7+5Wb48vVrbnvo7OndVe1cPc55k2ebWG7OmMgYX01bT3vJnNlJWtemes0mn3vI/PJl80NQQqVErfcH/Ys5Fy3evrVoyyZNDLSq/cp5EyYsKTbb69bD/+5fmPs/cFwxG9ABoCNdTY+AKrwdi2npHk0Xu4vMH/Q7Wl+4+Yftkv83kMHXTiVutOlsnh68ZYPZit+hmDmRSxVwlDnvxvI8WOq3gz4VCy3xE8Id/d7H2GV2M6Ghi4ak1gcKDYORGTsaSq2Mg0rDTGhplLyTW+mEsRC5BUYadyC0dwpJWw+h0N53ZMb+glJX/6DSPgpoaUN4nLOVobGtZdYuJHAkQ7EbqiVqwMjF7UVrJSKKTmCmitNrETOpUzAiNLxZykMGxPY4wNRBIjnHEDOqh7nOzZBOR6GRUQ2SeKiKc2NiWBju+6JQieqBvbkYRMAhMkjUDVKTUAaYzufsW99fCSEUOgI20rMQr4UwJurloQihwmcg8/SGWT3v8hKTDkQkjsMgjKH0oFzHi+hgnoKM/VtpIBIulGpF1ihRmDcLz9WHnm/Uv0BZNAD40zJSFJGjjEq77dsEg1ahKoF2qbupYvP0KNS2e69WbmucSNZAOpEa5XpUagAAAA==') format('woff2'),
	// 		url('//at.alicdn.com/t/font_1337773_f06f5a7las.woff?t=1565581133395') format('woff'),
	// 		url('//at.alicdn.com/t/font_1337773_f06f5a7las.ttf?t=1565581133395') format('truetype'),
	// 		/* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
	// 		url('//at.alicdn.com/t/font_1337773_f06f5a7las.svg?t=1565581133395#iconfont') format('svg');
	// 	/* iOS 4.1- */
	// }

	// .iconfont {
	// 	font-family: "iconfont" !important;
	// 	font-size: 16px;
	// 	font-style: normal;
	// 	-webkit-font-smoothing: antialiased;
	// 	-moz-osx-font-smoothing: grayscale;
	// }

	// .icon-yuandian:before {
	// 	content: "\e64d";
	// }

	// .icon-dingweiweizhi:before {
	// 	content: "\e619";
	// }
</style>