<!--
弹窗
-->
<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-if="is_image_optimizer&&images.length>0" class="image-optimizer">
					<image show-menu-by-longpress v-for="(image, index) in images" :key="index" :src="image" mode="widthFix" style="width: 100%;"></image>
				</view>
				<view v-else 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,
			is_image_optimizer: false,
			images: []
		}
	},

	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 = '') {
			this.is_image_optimizer = false;
			this.images = [];
			let { status, data, msg, is_image_optimizer } = await this.$c.getRule(id, true)
			if (status) {
				if (is_image_optimizer != null && is_image_optimizer == 1) {
					console.log('开启图片优化');
					this.is_image_optimizer = true;
					// 正则表达式获取所有图片地址
					const imgRegex = /<img[^>]+src="([^"]+)"[^>]*>/g;
					let match;
					while ((match = imgRegex.exec(data)) !== null) {
						// images.push(match[1]);
						this.images.push(match[1]);
					}
					console.log('提取的图片地址：', this.images);
					// 这里可以添加图片优化的逻辑
				}
				this.open({
					title: title,
					content: data
				})
			} else {
				this.$c.toast(msg)
			}
		}
	}
}
</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>