<template>
	<view v-if="show" class="hm-mask">
		<view class="hm">
			<!-- 追击动画区 -->
			<view class="hm-stage" v-if="phase !== 'result'">
				<view class="hm-radar">
					<view class="hm-radar-sweep"></view>
					<view class="hm-radar-ring r1"></view>
					<view class="hm-radar-ring r2"></view>
					<view class="hm-rocket" :class="phase">GO</view>
					<image class="hm-target-avatar" :src="target.avatar || defaultAvatar" mode="aspectFill"></image>
				</view>
				<view class="hm-phase-text">{{phaseText}}</view>
				<view class="hm-dots">
					<text class="hm-dot"></text>
					<text class="hm-dot"></text>
					<text class="hm-dot"></text>
				</view>
			</view>

			<!-- 结果区 -->
			<view class="hm-result" v-else>
				<view class="hm-result-emoji">{{resultBadge}}</view>
				<view class="hm-result-title" :class="result.result">{{resultTitle}}</view>
				<view class="hm-result-msg">{{result.message}}</view>
				<view class="hm-result-gain" v-if="result.result === 'success'">
					<text class="hm-gain-num">+{{result.totalGain}}</text>
					<text class="hm-gain-unit">星球券</text>
				</view>
				<view class="hm-result-remain">今日剩余追捕 {{result.remainHunt}} 次</view>
				<view class="hm-result-btn" @tap="onClose">{{result.result === 'success' ? '收入囊中' : '知道了'}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			show: { type: Boolean, default: false },
			phase: { type: String, default: 'searching' },
			result: { type: Object, default: null },
			target: { type: Object, default: () => ({}) }
		},
		data() {
			return {
				defaultAvatar: 'https://jewel-shop.oss-cn-beijing.aliyuncs.com/41cfb56caff4419b94b69d0f2303b602.png'
			}
		},
		computed: {
			phaseText() {
				const map = {
					searching: '雷达搜索目标飞船...',
					locking: '已锁定目标坐标...',
					chasing: '星际追击中...'
				}
				return map[this.phase] || '追击中...'
			},
			resultBadge() {
				if (!this.result) return 'GO'
				if (this.result.result === 'success') return 'GET'
				if (this.result.result === 'shield') return 'SAFE'
				return 'MISS'
			},
			resultTitle() {
				if (!this.result) return ''
				if (this.result.result === 'success') return '追捕成功'
				if (this.result.result === 'shield') return '目标已防护'
				return '追捕扑空'
			}
		},
		methods: {
			onClose() {
				this.$emit('close')
			}
		}
	}
</script>

<style lang="scss" scoped>
	.hm-mask {
		position: fixed;
		top: 0; left: 0; right: 0; bottom: 0;
		background: rgba(18,52,47,0.28);
		backdrop-filter: blur(8px);
		z-index: 80;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.hm {
		width: 580rpx;
		padding: 56rpx 40rpx 40rpx;
		border-radius: 46rpx;
		background: linear-gradient(155deg, rgba(255,255,255,0.94), rgba(244,255,249,0.78));
		border: 2rpx solid rgba(255,255,255,0.92);
		box-shadow: 0 34rpx 80rpx rgba(53,214,166,0.22);
	}

	.hm-stage {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.hm-radar {
		position: relative;
		width: 340rpx;
		height: 340rpx;
		border-radius: 50%;
		background: radial-gradient(circle, rgba(53,214,166,0.14), rgba(79,183,255,0.06) 52%, transparent 70%);
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.hm-radar-ring {
		position: absolute;
		border-radius: 50%;
		border: 2rpx solid rgba(53,214,166,0.26);
	}

	.hm-radar-ring.r1 { width: 240rpx; height: 240rpx; }
	.hm-radar-ring.r2 { width: 340rpx; height: 340rpx; }

	.hm-radar-sweep {
		position: absolute;
		width: 154rpx;
		height: 5rpx;
		top: 50%;
		left: 50%;
		transform-origin: left center;
		background: linear-gradient(90deg, rgba(53,214,166,0.68), rgba(53,214,166,0));
		border-radius: 999rpx;
		animation: sweep 1.6s linear infinite;
	}

	@keyframes sweep {
		from { transform: rotate(0deg); }
		to { transform: rotate(360deg); }
	}

	.hm-target-avatar {
		width: 96rpx;
		height: 96rpx;
		border-radius: 50%;
		border: 5rpx solid rgba(255,255,255,0.94);
		opacity: 0.95;
		box-shadow: 0 14rpx 30rpx rgba(255,122,89,0.18);
	}

	.hm-rocket {
		position: absolute;
		width: 58rpx;
		height: 58rpx;
		line-height: 58rpx;
		text-align: center;
		border-radius: 50%;
		background: linear-gradient(135deg, #FF7A59, #FFB84D);
		color: #FFFFFF;
		font-size: 20rpx;
		font-weight: 900;
		left: 20rpx;
		top: 130rpx;
		box-shadow: 0 12rpx 26rpx rgba(255,122,89,0.24);
	}

	.hm-rocket.searching { animation: orbit 2.5s linear infinite; }
	.hm-rocket.locking { animation: orbit 1.4s linear infinite; }
	.hm-rocket.chasing { animation: orbit 0.7s linear infinite; }

	@keyframes orbit {
		0% { transform: rotate(0deg) translateX(150rpx) rotate(0deg); }
		100% { transform: rotate(360deg) translateX(150rpx) rotate(-360deg); }
	}

	.hm-phase-text {
		margin-top: 30rpx;
		color: #12342F;
		font-size: 28rpx;
		font-weight: 800;
		letter-spacing: 1rpx;
	}

	.hm-dots {
		margin-top: 16rpx;
		display: flex;
	}

	.hm-dot {
		width: 12rpx;
		height: 12rpx;
		border-radius: 50%;
		background: #35D6A6;
		margin: 0 6rpx;
		animation: blink 1.2s ease infinite;
	}

	.hm-dot:nth-child(2) { animation-delay: 0.2s; }
	.hm-dot:nth-child(3) { animation-delay: 0.4s; }

	@keyframes blink {
		0%, 100% { opacity: 0.3; }
		50% { opacity: 1; }
	}

	.hm-result {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.hm-result-emoji {
		width: 160rpx;
		height: 160rpx;
		line-height: 160rpx;
		text-align: center;
		border-radius: 50%;
		background: linear-gradient(145deg, #E5FFF1, #EAF8FF);
		color: #22B889;
		font-size: 30rpx;
		font-weight: 900;
		letter-spacing: 2rpx;
		animation: pop 0.5s ease;
		box-shadow: inset 0 0 0 2rpx rgba(255,255,255,0.92), 0 18rpx 42rpx rgba(53,214,166,0.14);
	}

	@keyframes pop {
		0% { transform: scale(0.3); opacity: 0; }
		70% { transform: scale(1.2); }
		100% { transform: scale(1); opacity: 1; }
	}

	.hm-result-title {
		margin-top: 16rpx;
		font-size: 40rpx;
		font-weight: 800;
		color: #12342F;
	}

	.hm-result-title.success { color: #22B889; }
	.hm-result-title.shield { color: #4FB7FF; }
	.hm-result-title.fail { color: #7E9691; }

	.hm-result-msg {
		margin-top: 14rpx;
		color: #42635E;
		font-size: 26rpx;
		text-align: center;
		padding: 0 20rpx;
	}

	.hm-result-gain {
		margin-top: 24rpx;
		display: flex;
		align-items: baseline;
	}

	.hm-gain-num {
		color: #22B889;
		font-size: 64rpx;
		font-weight: 800;
	}

	.hm-gain-unit {
		color: #42635E;
		font-size: 26rpx;
		margin-left: 8rpx;
	}

	.hm-result-remain {
		margin-top: 16rpx;
		color: #7E9691;
		font-size: 22rpx;
	}

	.hm-result-btn {
		margin-top: 36rpx;
		width: 100%;
		height: 84rpx;
		line-height: 84rpx;
		text-align: center;
		border-radius: 42rpx;
		background: linear-gradient(135deg, #35D6A6, #4FB7FF);
		color: #FFFFFF;
		font-size: 30rpx;
		font-weight: 800;
		box-shadow: 0 18rpx 36rpx rgba(53,214,166,0.22);
	}
</style>
