<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="card radius shadow-warp bg-white margin" :key="index" v-for="(item,index) in tableList">
			<view class="card-head solid-bottom">
				<view class="round bg-green cu-avatar">{{ index+1 }}</view>
				<view class="flex flex-sub"></view>
				<view class="flex justify-end">
					<text class="text-grey text-xl">{{ item.date }}</text>
				</view>
			</view>

			<view class="card-content padding-lr">
				<view class="data-wrap">
					<view class="data-item">
						<view class="data-title">当前所在地区：
							<text class="text-gray padding-left-xs">{{ item.area }}</text>
						</view>
					</view>
					<view class="data-item">
						<view class="data-title">当前所在详细地址:
							<text class="text-gray padding-left-xs">{{ item.address }}</text>
						</view>
					</view>
					<view class="data-item">
						<view class="data-title">当前状态:
							<text class="text-gray padding-left-xs">{{ item.state }}</text>
						</view>
					</view>
					<view class="data-item">
						<view class="data-title">就诊医院:
							<text class="text-gray padding-left-xs">{{ item.hospital }}</text>
						</view>
					</view>
					<view class="data-item">
						<view class="data-title">最近14天是否有武汉居住史、旅游史或武汉亲戚来访：
							<text class="text-gray padding-left-xs">{{ item.tour }}</text>
						</view>
					</view>
					<view class="data-item">
						<view class="data-title">最近14天是否有新冠肺炎患者或疑似患者接触史：
							<text class="text-gray padding-left-xs">{{ item.touch }}</text>
						</view>
					</view>
					<view class="data-item">
						<view class="data-title">当前体温:
							<text class="text-gray padding-left-xs">{{ item.temperature }}℃</text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>

</template>

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

	export default {
		data() {
			return {
				tableList: [{
					date: '2020-02-05',
						area: '太原',
						address: '小店',
						state: '正常',
						hospital: '无',
						tour: '否',
						touch: '否',
						temperature: '36'
					},
					{
						date: '2020-02-05',
						area: '太原',
						address: '迎泽',
						state: '正常',
						hospital: '无',
						tour: '否',
						touch: '否',
						temperature: '36.5'
					},
					{
						date: '2020-02-05',
						area: '太原',
						address: '迎泽',
						state: '正常',
						hospital: '无',
						tour: '否',
						touch: '否',
						temperature: '36.3'
					},
					{
						date: '2020-02-05',
						area: '太原',
						address: '迎泽',
						state: '正常',
						hospital: '无',
						tour: '否',
						touch: '否',
						temperature: '36.5'
					},
					{
						date: '2020-02-05',
						area: '太原',
						address: '迎泽',
						state: '正常',
						hospital: '无',
						tour: '否',
						touch: '否',
						temperature: '36'
					},
					{
						date: '2020-02-05',
						area: '太原',
						address: '迎泽',
						state: '正常',
						hospital: '无',
						tour: '否',
						touch: '否',
						temperature: '36'
					}
				],
			};
		},
		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>
