/*
 * @Description: 系统维护页面
 * @Author: shh, laoliu
 * @Date: 2022-09-13 14:43:52
 */
<template>
	<view class="system-body">
		<image v-if="bgImage !== 'useSpriteIcon'" :src="bgImage" mode="aspectFill" class="system-body-image"></image>
		<image v-else class="img icon-index-sysmaintain" mode="aspectFill"></image>
		<text class="system-body-title">{{sysMaintainData.title}}</text>
		<view class="tips">
			<text>{{sysMaintainData.startNotice}}</text>
			<text style="color: #BD9540;">{{sysMaintainData.timeRange}}</text>
			<text>{{sysMaintainData.endNotice}}</text>
		</view>
	</view>
</template>

<script>
export default {
	// bgImage ：'useSpriteIcon' 代表使用精灵图
	props : ["bgImage" , "sysMaintainInfo"],
	data() {
		return {
		}
	},
	computed: {
		sysMaintainData() {
			// 因为时间的样式和其余字体样式不一样 ，所以进行对content内容分割
			//content 内容格式参照：为了给您提供更优质的服务，本系统于<TimeRange>进行升级维护，维护期间暂停星护云系统的使用。给您带来的不便敬请谅解！
			if (this.sysMaintainInfo.content) {
				let content = this.sysMaintainInfo.content;
				return {
					'startNotice' : content.split('<')[0],
					'endNotice' : content.split('>')[1],
					'timeRange' : this.sysMaintainInfo.timeRange,
					'title' : this.sysMaintainInfo.title
				};
			}
		}
	},
	
	methods: {
	}
}
</script>

<style scoped>
.system-body {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 0 60rpx;
	margin-top: 316rpx;
}

.system-body-image {
	width: 200px;
	height: 180px;
}

.system-body-title {
	font-size: 18px;
	color: #000000;
	margin: 6rpx 0 30rpx 0;
	line-height: 25px;
}

.tips {
	font-size: 14px;
	line-height: 20px;
	color: #666666;
}
</style>