<template>
	<view class="page">
		<image class="bkg" :src="info.cover?info.cover.url:''"></image>
		<view class="cotainer">
			<view class="hospital">
				<view class="title">{{ info.name }}</view>
				<view class="tag">
					<view class="tag__item" v-if="info.tags">{{ info.tags }}</view>
					<view v-if="info.good_at">{{ info.good_at }}</view>
				</view>
				<view class="description"  v-if="info.address">
					<u-icon name="map"></u-icon>
					<text  style="margin-left:20rpx">{{info.address?info.address:'12333333'}}</text>
				</view>
			</view>
			<view class="department">
				<view class="title">医院简介</view>
				<view class="content">
					{{info.content?info.content:'暂无简介'}}
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				id: '',
				info: {},

			};
		},
		mounted() {
		},
		onLoad(options) {
			this.id = options.id ? options.id : ''

			this.getDetail()
		},
		methods: {
			async getDetail() {
				const res = await this.$u.api.detailHospital({
					id: this.id
				})
				this.info = res

			},
			

		},
	}
</script>

<style lang="scss">
	.page {
		position: relative;
		background-color: #f5efee;
		min-height: 100vh;
		padding-bottom: 80rpx;
	}

	.bkg {
		height: 540rpx;
		width: 100vw;
		position: absolute;
	}

	.cotainer {
		padding-top: 460rpx;
	}

	.hospital {
		background-color: #fff;
		border-radius: 10rpx;
		filter: drop-shadow(2.192rpx 4.494rpx 5rpx rgba(33, 32, 32, 0.15));
		// padding-top:460rpx;
		padding: 40rpx;
		padding-bottom:15rpx;
		margin: 25rpx;
		margin-top: 0;

		.title {
			font-size: 28rpx;
			color: #000000;
			font-weight: bold;
		}

		.tag {
			margin-top: 16rpx;
			// display: flex;
			// flex-wrap: wrap;
			font-size: 24rpx;
			color:#929196;
			padding-bottom: 25rpx;
			&__item {
				padding: 5rpx 16rpx;
				font-size: 22rpx;
				line-height: 31rpx;
				font-weight: 500;
				margin-bottom:10rpx;
				display: inline-block;
				&:nth-child(1) {
					color: #ca2328;
					background-color: #faefef;
				}

				&:nth-child(2) {
					color: #f38628;
					background-color: #fcf3e9;
				}
			}

			.tag__item+.tag__item {
				margin-left: 12rpx;
			}
		}

		.description {
			// max-width: 350rpx;
			width: 100%;
			font-size: 26rpx;
			color: #929196;
			font-weight: 500;
			border-top:1rpx solid rgba(0,0,0,0.1);
			padding-top: 25rpx;
			padding-bottom:25rpx;
		}
	}

	.department {
		background-color: #fff;
		border-radius: 10rpx;
		filter: drop-shadow(2.192rpx 4.494rpx 5rpx rgba(33, 32, 32, 0.15));
		// padding-top:460rpx;
		padding: 40rpx;
		margin: 25rpx;
		margin-top: 0;
		margin-bottom: 50rpx;

		.title {
			font-size: 28rpx;
			color: #000000;
			font-weight: bold;
			margin-bottom: 30rpx;
		}

		.content {
			color:#666666;
			font-size: 26rpx;
			line-height: 1.8;
		}

	}
</style>