<template>
	<view>
		<!-- 添加 -->
		<button class="shadow round bg-cyan add-btn iconfont icon-plus" hover-class="cc-active" @tap="openPage('/pages/apply-code/apply-code')"></button>
		<view v-if="tableList && tableList.length>0" class="cu-timeline" :key="index" v-for="(item,index) in tableList">
			<view class="cu-time">{{ +item.time | formatDate }}</view>
			<view class="cu-item text-blue cuIcon-locationfill">
				<view class="content shadow-blur bg-blue light">
					{{ item.district }}，{{ item.address }}
				</view>
			</view>
			<view class="cu-item text-green cuIcon-wefill">
				<view class="content shadow-blur light"
				 :class="item.healthLevel === 0 ? 'bg-green' : item.healthLevel === 1 ? 'bg-yellow' : 'bg-red'"
				>
					<view class="margin-bottom flex">
						体温：{{ item.animalHeat }}℃，
						<text v-for="state in status" :key="state.id">
							<text v-if="state.id === item.healthTypeId">状态：{{ state.name }}</text>
						</text>
					</view>
					<view>
						<text class="radius bg-red margin-tb margin-right padding-xs" v-show="item.touchHubei === 1">
							武汉接触史
						</text>
						<text class="radius bg-red margin-tb margin-right padding-xs" v-show="item.touchSick === 1">
							患者接触史
						</text>
					</view>
					<view class="margin-tb-sm">
						<text class="radius bg-red margin-tb margin-right padding-xs" v-show="item.touchOverseas === 1">
							境外人员接触史
						</text>
						<text class="radius bg-green margin-tb margin-right padding-xs" v-if="item.schoolLocation === 1">
							在校
						</text>
						<text class="radius bg-green margin-tb margin-right padding-xs" v-else>
							不在校
						</text>
					</view>
					<view class="margin-top">紧急联系人:{{ item.emergencyName }}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{ item.emergencyPhone }}</view>
					<view class="margin-top" v-show="item.remark || item.filePath.length > 0">
						备注:{{ item.remark }}
						<view class="margin-top">
							<image @tap="viewImage(item.filePath,i)" :key="i" v-for="(file,i) in item.filePath" :src="file" style="width: 69px;height: 75px;" class="margin-lr-xs"></image>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view v-if="tableList && tableList.length === 0" class="padding-lg">
			您还没有申请健康码，请点击右下角加号申请健康码。
		</view>
	</view>

</template>

<script>
	import {
		formatDate
	} from 'common/script/filters';
	import {
		showToast
	} from 'common/script/util';
	import {
		HEALTH_SIGN_HISTORY
	} from 'api/api';
	import { mapState,mapMutations } from 'vuex';

	export default {
		data() {
			return {
				tableList: [],
			};
		},
		
		computed: mapState('user', ['token','userInfo','status']),
		
		// 时间戳转化日期
		filters: {
			formatDate(time) {
				var data = new Date(time);
				return formatDate(data, 'MM-dd');
			}
		},
		
		onLoad() {
			const startTime = +this.$moment()
				.startOf('year')
				.format('x');
			const endTime = +this.$moment()
				.endOf('day')
				.format('x');
			const params = {
				param: {
					startTime,
					endTime,
					token: this.token
				}
			};
			this.getHealthSignHistory(params);
		},
		
		methods: {
			...mapMutations('user', ['setStatus','setUserInfo']),
			
			// 获取健康打卡记录
			async getHealthSignHistory(params) {
				try {
					const res = await this.$http.post(HEALTH_SIGN_HISTORY, params);
					const {
						success,
						code,
						msg,
						data
					} = res.data;
					if (success && code === 200) {
						this.success = true;
						this.tableList = data;
					} else {
						uni.showToast({
							title: msg || '获取健康打卡记录失败',
							icon: 'none'
						});
					}
				} catch (error) {
					console.log('error: ', error);
					if (error.msg) {
						uni.showToast({
							title: error.msg || '获取健康打卡记录失败',
							icon: 'none'
						});
					}
				}
			},
		
			// 预览图片
			viewImage(filePath,index) {
				if(filePath && filePath.length > 0){
					uni.previewImage({
						urls: filePath,
						current:filePath[index]
					})
				}
			},
			
		},
	};
</script>

<style lang="scss" scoped>
	.data-wrap {
		display: flex;
		flex-direction: column;
		align-items: left;
		justify-content: flex-start;
		padding: 40rpx 0;

		.data-item {
			display: flex;
			flex-wrap: wrap;
			align-items: left;
			font-size: 36rpx;
			margin-bottom: 20rpx;
			
			.data-title{
				line-height: 60rpx;
				color: $black;
			}
		}
	}
	
	.add-btn{
		position: fixed;
		bottom: 40rpx;
		right: 40rpx;
		width: 96rpx;
		height: 96rpx;
		line-height: 96rpx;
		padding: 0;
		z-index: 1;
	}
	.add-btn::after{
		border: none;
	}
</style>
