<template>
	<view class="detail_main" v-if="detail">
		<nav-bar title='专家讲座'></nav-bar>
		<view class="content">
			<view class="content_out">
				<view class="content_in">
					<view class="content_tle" style="margin-bottom: 30rpx;">活动主题</view>
					<view class="content_tips" style="margin-bottom: 44rpx;">{{detail.noticeName}}</view>
					<view class="content_tle" style="margin-bottom: 30rpx;">活动指南</view>
					<view class="content_time">
						<view class="tips">
							<image src="/static/firstaid/time-1.png"></image>
							<view class="left">发布时间</view>
							<view class="right">{{detail.createdTime}}</view>
						</view>
						<view class="tips">
							<image src="/static/firstaid/location.png"></image>
							<view class="left">活动地点</view>
							<view class="right">{{detail.parkTypeName}}</view>
						</view>
					</view>
					<view class="content_tle" style="margin-top: 50rpx;">活动内容</view>
					<view class="html_nav" v-html="detail.instruction"></view>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	import navBar from "@/components/navBar/index.vue";
	import {
		callbackRequest
	} from '@/common/util.js';
	import {
		noticeDetail
	} from '@/common/api.js';
	export default {
		components: {
			navBar
		},
		data() {
			return {
				id: '',
				detail: null
			}
		},
		onLoad(options) {
			this.id = options.id
			this.getDetail()
		},
		mounted() {
			
		},
		methods: {
			getDetail() {
				let params = {
					method: noticeDetail,
					id: this.id
				}
				callbackRequest(params).then((res) => {
					if (res.returnCode == 1) {	
						this.detail = res.returnData
						this.$nextTick(() => {
							var videos = document.getElementsByTagName('video')
							var imgs = document.getElementsByTagName('img')
							for(let i=0;i<videos.length;i++) {
								videos[i].setAttribute('width', '100%')
								videos[i].setAttribute('height', '300px')
								videos[i].parentNode.setAttribute('style', 'background:#000000')
							}
							for(let i=0;i<imgs.length;i++) {
								imgs[i].addEventListener('click',(e) => {
									uni.previewImage({
										urls: [e.target.currentSrc]
									});
								})
								imgs[i].parentNode.setAttribute('style', 'text-indent: 0em !importent')
							}
						})
					} else {
						uni.showToast({
							title: res.returnMsg,
							icon: 'none'
						});
					}
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.notice_tle {
		font-size: 40rpx;
		font-weight: bold;
		text-align: center;
		margin: 20rpx 0;
	}
	.notice_tips {
		font-size: 32rpx;
		margin: 20rpx 0;
		color: #888888;
	}
	.detail_main {
		min-height: 100vh;
		background-color: #DEE5F8;
		padding-top: 100rpx;
	}
	.detail_main::-webkit-scrollbar {
			width: 0;
			height: 0;
		}
		.content::-webkit-scrollbar {
				width: 0;
				height: 0;
			}
	.content {
		width: 100vw;
		height: calc(100vh - 100rpx);
		overflow-y: auto;
		overflow-x: hidden;
		padding: 20rpx;
		box-sizing: border-box;
		background-image: url('@/static/firstaid/zhuanjback.png');
		background-size: 100% 500rpx;
		background-repeat: no-repeat;
		background-color: #DEE5F8;
		padding-bottom: 100rpx;
	}

	::v-deep.html_nav {
		margin-top: 60rpx;
		img {
			max-width: 100% !important;
			// min-height: 400rpx !important;
		}
	}
	.content_out {
		width: calc(100% - 48rpx);
		min-height: 800rpx;
		background: rgba(255,255,255,1);
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		margin-top: 250rpx;
		margin-left: 50%;
		transform: translateX(-50%);
		padding: 14rpx;
		box-sizing: border-box;
	}
	.content_in {
		min-height: 800rpx;
		width: 100%;
		border-radius: 20rpx;
		border: 6rpx solid #8BC3FF;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 0 28rpx;
		box-sizing: border-box;
	}
	.content_tle {
		width: 228rpx;
		height: 56rpx;
		background-image: url('/static/firstaid/tleback.png');
		background-size: 100% 100%;
		background-repeat: no-repeat;
		font-family: PingFang SC, PingFang SC;
		font-weight: bold;
		font-size: 34rpx;
		color: #FFFFFF;
		text-align: center;
	}
	.content_tips {
		font-family: PingFang SC, PingFang SC;
		font-weight: bold;
		font-size: 32rpx;
		color: #0E1A24;
		text-align: center;
	}
	.content_time {
		width: 100%;
	}
	.tips {
		display: flex;
		align-items: center;
		margin-top: 12rpx;
		image {
			width: 30rpx;
			height: 30rpx;
			display: block;
			margin-right: 12rpx;
		}
		.left {
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 30rpx;
			color: #4B5B68;
			margin-right: 24rpx;
		}
		.right {
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 30rpx;
			color: #0E1A24;
			flex: 1;
		}
	}
</style>