<template>
	<view class="container">
		<view class="list-view">
			<view v-for="(item,index) in doclist" :key="index" class="list-cell tui-list-item">
				<view class="cell-title-box">
					<view class="cell-title">{{item.title}}</view>
				</view>
				<view class="sub-title">
					<view style="position:relative;top:-25rpx">{{item.std}}</view>
					<view>
						<block v-for="(item1,index1) in item.tag" :key="index1">
							<text :class="item1.color" class="mytag">{{item1.name}}</text>
						</block>
					</view>
					<view style="padding-top:25rpx">{{item.desc}}</view>
					<view class="sub-content" @tap="goDocContent(index)">点击查看明细</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import myapp from '@/common/js/myapp.js'
	export default {
		data() {
			return {
				doclist: [{
					title: '医院消毒卫生标准',
					std: "GB15982－2012",
					desc:'本标准规定了医院消毒卫生标准、医院消毒管理要求以及检查方法。本标准适用于各级各类医疗机构，各级疾病预防控制机构和采供血机构按照执行',
					tag:[
						{name:'医疗',color:'b-blue'},
						{name:'卫生',color:'b-green'},
						{name:'消毒',color:'b-orange'},
						{name:'标准',color:'b-red'}
					]
				},{
					title: '软式内镜清洗消毒技术规范',
					std: "WS 507-2016",
					desc:'本标准规定了软式内镜清洗消毒相关的管理要求、布局及设施、设备要求、清洗消毒操作规程、监测与记录等内容。本标准适用于开展软式内镜诊疗工作的医疗机构',
					tag:[
						{name:'内镜',color:'b-blue'},
						{name:'清洗',color:'b-green'},
						{name:'消毒',color:'b-orange'},
						{name:'技术规范',color:'b-red'}
					]
				}, {
					title: '医务人员手卫生规范',
					std: "WS/T 313-2009",
					desc:'本标准规定了医务人员手卫生的管理与基本要求、手卫生设施、洗手与卫生手消毒、手卫生效果的监测等。本标准适用于各级各类医疗机构',
					tag:[
						{name:'医疗',color:'b-blue'},
						{name:'人员',color:'b-green'},
						{name:'手卫生',color:'b-orange'},
						{name:'规范',color:'b-red'}
					]
				}]
			}
		},
		onShow: function() {
			let user = myapp.checkLogin()
			uni.setStorageSync('lastPagePath', '/packagePage/pages/doc/doc')
		},
		methods: {
			goDocContent:function(id) {
				uni.navigateTo({
					url:'/packagePage/pages/doc_content/doc_content'
				})
			}
		}
	}
</script>

<style>
	page {
		background-color: #F5F6FA;
	}
	
	.container {
		padding-bottom: env(safe-area-inset-bottom);
	}

	.list-view {
		width: 100%;
		box-sizing: border-box;
	}

	.list-cell {
		background: #fff;
		padding: 30rpx 32rpx;
		box-sizing: border-box;
		margin-bottom:20rpx;
	}

	.cell-title-box {
		position: relative;
	}

	.cell-title {
		font-size: 32rpx;
		line-height: 56rpx;
		word-break: break-all;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 3;
	}

	.sub-title {
		padding-top: 24rpx;
		font-size: 28rpx;
		color: #BCBCBC;
		align-items: center
	}
	
	.sub-content {
		text-decoration: underline;
		color: #005DFF;
		padding-top:20rpx;
	}

	.tag {
		padding: 5rpx 10rpx;
		font-size: 24rpx;
		border-radius: 4rpx;
		margin-right: 20rpx;
	}

	.b-red {
		background: #FCEBEF;
		color: #AA2F3E;
		border:1px solid #AA2F3E !important;
	}

	.b-blue {
		background: #ECF6FD;
		color: #4DABEB;
		border:1px solid #4DABEB !important;
	}

	.b-orange {
		background: #FEF5EB;
		color: #FAA851;
		border:1px solid #FAA851 !important;
	}

	.b-green {
		background: #E8F6E8;
		color: #44CF85;
		border:1px solid #44CF85 !important;
	}
	
	.mytag {
		border:none;
		margin-right:20rpx;
		border-radius: 15rpx;
		padding:5rpx 20rpx;
	}
</style>
