<template>
	<view class="page">
		<!-- 自定义导航栏 -->
		<view class="navbar">
			<view class="nav-back" @click="goBack">
				<image src="/static/ic_back.png" class="back-icon" mode="aspectFit"></image>
			</view>
			<text class="nav-title">{{ $t('me.contactUs') }}</text>
		</view>
		
		<!-- 二维码容器 -->
		<view class="qr-container">
			<view class="qr-box">
				<image 
					v-if="qrImageUrl" 
					:src="qrImageUrl" 
					class="qr-image" 
					mode="aspectFit"
				></image>
				<view v-else class="qr-placeholder">
					<text class="placeholder-text">{{ loading ? '加载中...' : '暂无二维码' }}</text>
				</view>
			</view>
		</view>
		
		<!-- 联系方式 -->
		<view class="contact-info" v-if="contactPhone || contactEmail">
			<view class="contact-item" v-if="contactPhone">
				<text class="contact-label">{{ $t('me.contactPhone') || '联系电话' }}</text>
				<text class="contact-value" @click="callPhone">{{ contactPhone }}</text>
			</view>
			<view class="contact-item" v-if="contactEmail">
				<text class="contact-label">{{ $t('me.contactEmail') || '联系邮箱' }}</text>
				<text class="contact-value" selectable>{{ contactEmail }}</text>
			</view>
		</view>
	</view>
</template>

<script>
import Config from '@/modules/Config.js'

export default {
	data() {
		return {
			qrImageUrl: '',
			contactPhone: '',
			contactEmail: '',
			loading: true
		}
	},
	onLoad() {
		this.loadConfig()
	},
	methods: {
		goBack() {
			uni.navigateBack()
		},
		async loadConfig() {
			try {
				this.loading = true
				const config = await Config.getPublicConfig()
				if (config.contact_qr_image) {
					this.qrImageUrl = Config.getImageUrl(config.contact_qr_image)
				}
				this.contactPhone = config.contact_phone || ''
				this.contactEmail = config.contact_email || ''
			} catch (error) {
				console.error('加载配置失败:', error)
			} finally {
				this.loading = false
			}
		},
		callPhone() {
			if (this.contactPhone) {
				uni.makePhoneCall({
					phoneNumber: this.contactPhone.replace(/[\s\-\(\)]/g, ''),
					fail: () => {
						uni.showToast({ title: '拨打电话失败', icon: 'none' })
					}
				})
			}
		}
	}
}
</script>

<style lang="scss" scoped>
.page {
	min-height: 100vh;
	background-color: #F3F4F8;
}

.navbar {
	width: 100%;
	padding-top: 100rpx;
	padding-bottom: 20rpx;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	position: relative;
	
	.nav-back {
		position: absolute;
		left: 32rpx;
		width: 80rpx;
		height: 50rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		
		.back-icon {
			width: 48rpx;
			height: 48rpx;
		}
	}
	
	.nav-title {
		font-size: 34rpx;
		font-weight: 500;
		color: #333;
	}
}

.qr-container {
	display: flex;
	justify-content: center;
	padding: 60rpx 30rpx 40rpx;
	
	.qr-box {
		width: 600rpx;
		height: 600rpx;
		background-color: #fff;
		border-radius: 20rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 40rpx;
		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
		
		.qr-image {
			width: 100%;
			height: 100%;
		}
		
		.qr-placeholder {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 100%;
			height: 100%;
			
			.placeholder-text {
				font-size: 28rpx;
				color: #999;
			}
		}
	}
}

.contact-info {
	margin: 0 30rpx;
	background-color: #fff;
	border-radius: 20rpx;
	padding: 30rpx 40rpx;
	box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
	
	.contact-item {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		padding: 20rpx 0;
		
		&:not(:last-child) {
			border-bottom: 1rpx solid #f0f0f0;
		}
		
		.contact-label {
			font-size: 28rpx;
			color: #666;
		}
		
		.contact-value {
			font-size: 28rpx;
			color: #333;
			font-weight: 500;
		}
	}
}
</style>
