<!--
弹窗
-->
<template>
	<uni-popup ref="_rule_pop" type="center" maskBackgroundColor="rgba(0,0,0,0.9)" @change="popChange">
		<view class="_rule_pop common_bg">
			<view class="_rule_pop_title">{{ ruleData.title }}</view>

			<scroll-view scroll-y class="_rule_pop_bd" :class="{'has-check': noticeCheck}">
				<view v-html="ruleData.content"></view>
			</scroll-view>

			<view v-if="noticeCheck" class="check-btn" @click="todayHide = !todayHide">
				<view class="icon">
					<image v-if="todayHide" :src="$img1('common/check_act.png')" lazy-load></image>

					<image v-else :src="$img1('common/check.png')" lazy-load></image>
				</view>

				今日不再提醒
			</view>

			<view class="close icon" @click="close">
				<image :src="$img1('common/close.png')" lazy-load></image>
			</view>
		</view>
	</uni-popup>
</template>

<script>
	export default {
		props: {
			noticeCheck: {
				type: Boolean,
				default: false
			}
		},

		data() {
			return {
				ruleData: '',
				todayHide: false
			}
		},

		mounted() {
			console.log(this.noticeCheck)
		},

		methods: {
			popChange({
				show
			}) {
				if (!show) {
					if (this.todayHide) {
						uni.setStorageSync('_last_notice_date', this.$c.getDateTime())
					}
				}
			},

			close() {
				this.$refs._rule_pop.close()
			},

			open(opt) {
				this.ruleData = opt

				this.$refs._rule_pop.open()
			},

			async getRule(id, title = '') {
				let res = await this.$c.getRule(id, true)
				this.open({
					title: title,
					content: res.data
				})
			}
		}
	}
</script>

<style lang="scss">
	._rule_pop {
		width: 610rpx;
		height: 820rpx;
		box-sizing: border-box;
		padding: 0 40rpx 0;
		background: #FFFFFF;
		border-radius: 30rpx;

		._rule_pop_title {
			padding: 40rpx 0;
			text-align: center;
			font-weight: 500;
			font-size: 36rpx;
			color: #333333;
			// font-family: YouSheBiaoTiHei;
		}

		._rule_pop_bd {
			height: 670rpx;

			font-size: 26rpx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #999999;

			&.has-check {
				height: 620rpx;
			}
		}

		.check-btn {
			display: flex;
			justify-content: center;
			align-items: center;
			padding: 20rpx 0 0;

			.icon {
				width: 32rpx;
				height: 32rpx;
				margin-right: 10rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}

			font-size: 24rpx;
			color: #888;
		}

		.close {
			width: 48rpx;
			height: 48rpx;
			position: absolute;
			left: 50%;
			bottom: 0;
			transform: translate(-50%, 150%);
		}
	}
</style>