<template>
	<view class="container">
		<view class="page">
			<view class="news-details">
				<view class="title">{{info.noticeTitle}}<view class="tag" v-if="info.urgentDegree === 'urgent'">非常紧急</view>
				</view>
				<!-- <view class="time">来源：{{info.source === 'community' ? '社区' : '物业服务中心'}} {{info.releaseTime || ''}}</view> -->
				<view class="time">来源：{{info.source | sourceFilter}} {{info.releaseTime || ''}}</view>
				<view class="content">
					<rich-text :nodes="content"></rich-text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getNoticeDetailApi
	} from '@/config/api.js'
	export default {
		data() {
			return {
				info: {},
				content: ''
			}
		},
		filters: {
			sourceFilter(value) {
				switch(value) {
					case 'community':
						return '小区'
						break
					case 'committee':
						return '业委会'
						break
					case 'councils':
						return '社区服务中心'
						break
					default:
						return '物业管理中心'
				}
			}
		},
		methods: {
			async getDetail(id) {
				let {result} = await getNoticeDetailApi({id})
				if(result.urgentDegree === 'urgent') {
					uni.setNavigationBarTitle({
						title: '紧急通知'
					})
				}
				this.info = result
				this.content = result.noticeContent.replace(/\<img/gi, '<img style="max-width:100%;height:auto"')
			}
		},
		onLoad(option) {
			this.getDetail(option.id)
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #ffffff;
	}

	.page {
		padding: 30rpx;
		background-color: #ffffff;
	}

	.news-details {
		.title {
			font-size: 36rpx;
			color: #373737;
			font-weight: bold;
			word-break: break-all;

			.tag {
				font-size: 22rpx;
				color: #F42E2E;
				border: 1px solid #F42E2E;
				padding: 4rpx 10rpx;
				border-radius: 30rpx;
				display: inline-block;
				margin-left: 20rpx;
			}
		}

		.time {
			font-size: 24rpx;
			color: #B6B6BA;
			margin: 20rpx 0 40rpx;
		}

		.content {
			font-size: 28rpx;
			color: #6A696D;
			line-height: 60rpx;
			word-break: break-all;
			img {
				max-width: 100%;
			}
		}
	}
</style>