<template>
	<view class="share-report-btns">
		<!-- 分享按钮 -->
		<view class="action-btn share-btn" @tap="handleShare">
			<image class="btn-icon" src="/static/assetDetail/fenxiang.png" mode="aspectFit"></image>
			<text class="btn-text">分享</text>
		</view>
		<!-- 举报按钮 - 只在不是自己的资产时显示 -->
		<view v-if="showReport" class="action-btn report-btn" @tap="handleReport">
			<image class="btn-icon" src="/static/assetDetail/jubao.png" mode="aspectFit"></image>
			<text class="btn-text">举报</text>
		</view>
	</view>

	<!-- 分享弹窗 -->
	<ShareModal
		:visible="showShareModal"
		:coverUrl="shareCoverUrl"
		:ownerNickname="ownerNickname"
		:qrcodeUrl="shareQrcodeUrl"
		@close="showShareModal = false"
	/>
</template>

<script setup>
import { ref, computed } from 'vue';
import ShareModal from './ShareModal.vue';

const props = defineProps({
	// 资产拥有者的昵称
	ownerNickname: {
		type: String,
		default: ''
	},
	// 资产ID，用于分享
	assetId: {
		type: String,
		default: ''
	},
	// 封面图片
	coverUrl: {
		type: String,
		default: ''
	}
});

// 当前用户昵称
const currentNickname = computed(() => {
	try {
		const userStr = uni.getStorageSync('user');
		if (userStr) {
			const userInfo = JSON.parse(userStr);
			return userInfo?.nickname || '';
		}
	} catch (e) {
		console.error('获取用户信息失败:', e);
	}
	return '';
});

// 是否显示举报按钮（不是自己的资产时显示）
const showReport = computed(() => {
	return props.ownerNickname && currentNickname.value && props.ownerNickname !== currentNickname.value;
});

// 分享弹窗状态
const showShareModal = ref(false);
const shareCoverUrl = ref('');
const shareQrcodeUrl = ref('');

// 分享
const handleShare = () => {
	shareCoverUrl.value = props.coverUrl;
	// TODO: 生成二维码 URL，实际项目中需要调用后端 API 生成
	shareQrcodeUrl.value = '/static/icon/qrcode-placeholder.png';
	showShareModal.value = true;
};

// 举报
const handleReport = () => {
	uni.showModal({
		title: '举报',
		content: '确定要举报该藏品吗？',
		success: (res) => {
			if (res.confirm) {
				// TODO: 调用举报API
				uni.showToast({ title: '举报成功', icon: 'success' });
			}
		}
	});
};
</script>

<style scoped>
.share-report-btns {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 24rpx;
}

.action-btn {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 100rpx;
	height: 100rpx;
	border-radius: 24rpx;
	gap: 8rpx;
}

.action-btn:active {
	opacity: 0.7;
}

.btn-icon {
	width: 56rpx;
	height: 56rpx;
	filter: drop-shadow(0 2rpx 4rpx rgba(0, 0, 0, 0.5));
}

.btn-text {
	font-size: 24rpx;
	color: #fff;
	font-family: 'yt', sans-serif;
	text-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.6);
}
</style>