<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 class="cu-timeline" :key="index" v-for="(item,index) in tableList">
			<view class="cu-time">{{ item.time }}</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">
						体温{{ item.animalHeat }}℃，状态：{{ item.healthTypeId }}
					</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-top" v-show="item.hospital">就诊医院:{{ item.hospital }}</view>
				</view>
			</view>
		</view>
	</view>

</template>

<script>
	import {
		showToast
	} from 'common/script/util';

	export default {
		data() {
			return {
				tableList: [{
						time: '2020-02-05',
						district: '太原',
						address: '小店',
						healthTypeId: '正常',
						hospital: '是深V',
						touchHubei: 1,
						touchSick: 1,
						animalHeat: 0,
						healthLevel: 0, // 健康码等级 0正常 1隔离中或疑似 2确诊
					},
					{
						time: '2020-02-05',
						district: '太原',
						address: '小店',
						healthTypeId: '正常',
						hospital: '',
						touchHubei: 1,
						touchSick: 0,
						animalHeat: 0,
						healthLevel: 1
					},
					{
						time: '2020-02-05',
						district: '太原',
						address: '小店',
						healthTypeId: '正常',
						hospital: '',
						touchHubei: 1,
						touchSick: 0,
						animalHeat: 0,
						healthLevel: 2
					}
				],
			};
		},
		methods: {

		},
	};
</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>
