<template>
	<!-- 仅在有配置时显示悬浮球 -->
	<view v-if="floatConfig && floatConfig.image" class="float-ball" @click="openPopup">
		<image class="float-ball__img" :src="floatConfig.image" mode="aspectFill"></image>
	</view>

	<!-- 弹窗：居中展示图片，可关闭 -->
	<up-popup v-model:show="showPopup" mode="center" :closeable="true" :overlay="true" :safeAreaInsetBottom="false">
		<view class="popup-content">
			<image v-if="floatConfig && floatConfig.popupImage" class="popup-image" :src="floatConfig.popupImage" mode="widthFix" :show-menu-by-longpress="true"></image>
		</view>
	</up-popup>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { getFloatConfig, getConfigData } from '@/common/server/config';

const floatConfig = ref(null);
const showPopup = ref(false);

const loadConfig = async () => {
	// 确保配置已预加载
	await getConfigData();
	floatConfig.value = await getFloatConfig();
};

const openPopup = () => {
	showPopup.value = true;
};

onMounted(async () => {
	await loadConfig();
});
</script>

<style scoped>
.float-ball {
	position: fixed;
	right: 24rpx;
	bottom: 180rpx;
	width: 120rpx;
	height: 120rpx;
	z-index: 10080;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	overflow: hidden;
	box-shadow: 0 8rpx 20rpx rgba(0,0,0,0.15);
	background: rgba(255,255,255,0.9);
}

.float-ball__img {
	width: 100%;
	height: 100%;
}

.popup-content {
	max-width: 640rpx;
	max-height: 80vh;
	padding: 0;
}

.popup-image {
	width: 640rpx;
	border-radius: 16rpx;
	display: block;
}
</style>

