<template>
	<a-modal
		title="微信认证提示"
		v-model:visible="visible"
		:maskClosable="false"
		width="580px"
		@cancel="handleDialogClose"
	>
		<p class="tip">
			为保障服务器数据安全，从2022年7月27日开始，用户通过微信认证之后才能上传文件，
			<a href="https://pan.qiwenshare.com/notice/10" target="_blank">详情查看公告</a>
			<br />是否跳转到账户设置页面进行微信认证？
		</p>
		<template #footer>
			<a-button @click="handleDialogClose">取 消</a-button>
			<a-button type="primary" @click="handleDialogSure">确 定</a-button>
		</template>
	</a-modal>
</template>

<script setup>
	import { ref, watch, onUnmounted } from 'vue'
	import { message, Modal as AModal, Button as AButton } from 'ant-design-vue' // 显式导入 AModal 和 AButton
	import { getWeChatAuthState } from '@/api/myResource/user'

	const props = defineProps({
		callback: Function
	})
	console.log('pross--------', props.callback)

	const visible = ref(false)

	const getWeChatAuthStateData = async () => {
		if (process.env.NODE_ENV !== 'development' && location.origin === 'https://pan.qiwenshare.com') {
			try {
				const res = await getWeChatAuthState()
				if (res.success) {
					if (res.data) {
						props.callback('go')
					} else {
						visible.value = true
					}
				} else {
					message.error(res.message)
				}
			} catch (error) {
				console.error(error)
			}
		} else {
			props.callback('go')
		}
	}

	const handleAddKeyupEnter = (event) => {
		if (event.key === 'Enter') {
			handleDialogSure()
		}
	}

	const handleDialogClose = () => {
		visible.value = false
		props.callback('cancel')
	}

	const handleDialogSure = () => {
		props.callback('confirm')
		visible.value = false
	}

	watch(visible, (newValue) => {
		if (newValue) {
			document.addEventListener('keyup', handleAddKeyupEnter)
		} else {
			document.removeEventListener('keyup', handleAddKeyupEnter)
		}
	})

	onUnmounted(() => {
		document.removeEventListener('keyup', handleAddKeyupEnter)
	})

	defineExpose({
		visible,
		getWeChatAuthStateData
	})
</script>

<style lang="less" scoped>
	@import '@/style/myResource/varibles.less';

	.tip {
		margin: 0;
		line-height: 1.8;

		a {
			color: @primary-color;
			text-decoration: none;

			&:hover {
				color: @hover-color;
			}
		}
	}

	.ant-btn-primary {
		&,
		&:hover,
		&:focus {
			background-color: @primary-color;
			border-color: @primary-color;
		}
	}

	.ant-btn {
		&:hover,
		&:focus {
			background-color: @hover-color;
			border-color: @hover-color;
			color: white;
		}
	}
</style>
