<template>
	<view class="rule-content-box">
		<text class="rule-content-title">{{title}}</text>
		<rich-text class="rule-content-body" :nodes="content"></rich-text>
		<uni-popup type="message" ref="msg">
			<uni-popup-message :type="msgType" :message="msgTxt" :duration="2000"></uni-popup-message>
		</uni-popup>
	</view>
</template>

<script>
	import ProApi from '@/common/js/net/projectApi.js'
	export default {
		data() {
			return {
				msgType: 'info',
				msgTxt: '',
				content: "",
				title: '',
				id: '',
			}
		},
		onLoad(options) {
			this.id = options.id
			uni.setNavigationBarColor({
				frontColor: '#000000', // 必写项，字体颜色仅支持#ffffff和#000000
				backgroundColor: '#F0F0F0', // 传递的颜色值，仅支持十六进制颜色
				animation: { // 可选项
					duration: 500,
					timingFunc: 'easeIn'
				}
			})
			this.getDeal()
		},
		methods: {
			//获取协议内容
			getDeal() {
				var _self = this
				uni.showLoading({
					title: '加载中...',
				})
				ProApi.doGetRuleDate(_self.id)
					.then(res => {
						uni.hideLoading()
						if (res && res.content && res.content != '') {
							uni.setNavigationBarTitle({
								title: res.title
							})
							_self.title = res.title
							_self.content = res.content
						} else {
							_self.msgType = 'error'
							_self.msgTxt = '很遗憾，当前服务器返回的数据有误，辛苦您过会儿再尝试。'
							_self.$refs.msg.open()
							setTimeout(() => {
								uni.navigateBack()
							}, 1500);
						}
					})
					.catch((err) => {
						uni.hideLoading()
						console.log(err)
						_self.msgType = 'error'
						_self.msgTxt = '很遗憾，当前服务器返回的数据有误，辛苦您过会儿再尝试。'
						_self.$refs.msg.open()
						setTimeout(() => {
							uni.navigateBack()
						}, 1500);
					})
			}
		}
	}
</script>

<style>
	.rule-content-box {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		padding: 20rpx;
	}

	.rule-content-title {
		font-size: 28rpx;
		font-weight: 500;
		color: black;
	}

	.rule-content-body {
		font-size: 24rpx;
		color: gray;
		margin-top: 20rpx;
		padding: 20rpx;
	}
</style>