<template>
	<view class="gongzhonghao_pop_overlay" v-if="visible">
		<view class="gongzhonghao_pop_container">
			<!-- 弹窗头部 -->
			<view class="pop_header">
				<text class="pop_title">{{ props.title }}</text>
				<view class="close_button" @click="handleClose">
					<text class="close_icon">×</text>
				</view>
			</view>
			
			<!-- 弹窗内容 -->
			<view class="pop_content">
				<text class="description_text">{{ props.description }}</text>
				
				<!-- 二维码区域 -->
				<view class="qr_code_container">
					<image 
						class="qr_code_img" 
						:src="props.qrCodeUrl"
						mode="aspectFit"
						:show-menu-by-longpress="true"
					/>
				</view>
				
				<!-- 下载二维码按钮 -->
				<view class="download_button" @click="handleDownload">
					<image class="download_icon" src="https://course.feihe.com/momclub-picture/homepage/btn_download.png" mode="aspectFit" />
					<!-- <text class="download_text">下载二维码</text> -->
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { defineProps, defineEmits } from 'vue';

// Props 定义
const props = defineProps({
	visible: {
		type: Boolean,
		default: false
	},
	title: {
		type: String,
		default: '公众号'
	},
	description: {
		type: String,
		default: '长按关注星妈会公众号,了解更多专业育儿资讯'
	},
	qrCodeUrl: {
		type: String,
		default: 'https://course.feihe.com/momclub-picture/homepage/qrcode_gzh.png'
	}
});

// Emits 定义
const emit = defineEmits(['close', 'download']);

// 关闭弹窗
const handleClose = () => {
	emit('close');
};

// 下载二维码
const handleDownload = () => {
	emit('download', props.title);
};
</script>

<style lang="less" scoped>
@import '@/components/renwu/GongzhonghaoPop.less';
</style>
