<template>
	<view class="container">
		<view class="header">
			<text class="title">公共方法使用示例</text>
		</view>
		
		<view class="content">
			<!-- 日期处理示例 -->
			<view class="section">
				<text class="section-title">日期处理</text>
				<view class="example-item">
					<text class="label">当前日期：</text>
					<text class="value">{{ currentDate }}</text>
				</view>
				<view class="example-item">
					<text class="label">格式化日期：</text>
					<text class="value">{{ formattedDate }}</text>
				</view>
				<view class="example-item">
					<text class="label">相对时间：</text>
					<text class="value">{{ relativeDate }}</text>
				</view>
			</view>
			
			<!-- 数字处理示例 -->
			<view class="section">
				<text class="section-title">数字处理</text>
				<view class="example-item">
					<text class="label">千分位格式化：</text>
					<text class="value">{{ formattedNumber }}</text>
				</view>
				<view class="example-item">
					<text class="label">金额格式化：</text>
					<text class="value">{{ formattedMoney }}</text>
				</view>
				<view class="example-item">
					<text class="label">随机数：</text>
					<text class="value">{{ randomNumber }}</text>
				</view>
			</view>
			
			<!-- 字符串处理示例 -->
			<view class="section">
				<text class="section-title">字符串处理</text>
				<view class="example-item">
					<text class="label">UUID：</text>
					<text class="value">{{ uuid }}</text>
				</view>
				<view class="example-item">
					<text class="label">手机号脱敏：</text>
					<text class="value">{{ maskedPhone }}</text>
				</view>
				<view class="example-item">
					<text class="label">字符串截断：</text>
					<text class="value">{{ truncatedString }}</text>
				</view>
			</view>
			
			<!-- UI工具示例 -->
			<view class="section">
				<text class="section-title">UI工具</text>
				<view class="button-group">
					<button class="button success" @click="showSuccess">成功提示</button>
					<button class="button error" @click="showError">错误提示</button>
					<button class="button loading" @click="showLoading">加载提示</button>
					<button class="button confirm" @click="showConfirm">确认对话框</button>
				</view>
			</view>
			
			<!-- 设备信息示例 -->
			<view class="section">
				<text class="section-title">设备信息</text>
				<view class="example-item">
					<text class="label">状态栏高度：</text>
					<text class="value">{{ statusBarHeight }}</text>
				</view>
				<view class="example-item">
					<text class="label">设备平台：</text>
					<text class="value">{{ devicePlatform }}</text>
				</view>
				<view class="example-item">
					<text class="label">网络状态：</text>
					<text class="value">{{ networkStatus }}</text>
				</view>
			</view>
			
			<!-- 屏幕尺寸示例 -->
			<view class="section">
				<text class="section-title">屏幕尺寸</text>
				<view class="example-item">
					<text class="label">屏幕宽度：</text>
					<text class="value">{{ screenWidth }}</text>
				</view>
				<view class="example-item">
					<text class="label">屏幕高度：</text>
					<text class="value">{{ screenHeight }}</text>
				</view>
				<view class="example-item">
					<text class="label">窗口宽度：</text>
					<text class="value">{{ windowWidth }}</text>
				</view>
				<view class="example-item">
					<text class="label">窗口高度：</text>
					<text class="value">{{ windowHeight }}</text>
				</view>
				<view class="button-group">
					<button class="button loading" @click="loadScreenSize">获取屏幕尺寸</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { dateUtil, numberUtil, stringUtil, deviceUtil, networkUtil, uiUtil } from '@/utils/common';

// 日期处理示例数据
const currentDate = ref('');
const formattedDate = ref('');
const relativeDate = ref('');

// 数字处理示例数据
const formattedNumber = ref('');
const formattedMoney = ref('');
const randomNumber = ref(0);

// 字符串处理示例数据
const uuid = ref('');
const maskedPhone = ref('');
const truncatedString = ref('');

// 设备信息示例数据
const statusBarHeight = ref(0);
const devicePlatform = ref('');
const networkStatus = ref('');

// 屏幕尺寸示例数据
const screenWidth = ref(0);
const screenHeight = ref(0);
const windowWidth = ref(0);
const windowHeight = ref(0);

// 页面加载时初始化示例数据
onMounted(async () => {
	// 日期处理示例
	currentDate.value = dateUtil.now();
	const testDate = new Date('2025-12-25 10:30:00');
	formattedDate.value = dateUtil.format(testDate, 'YYYY年MM月DD日 HH时mm分ss秒');
	relativeDate.value = dateUtil.relative(testDate);
	
	// 数字处理示例
	formattedNumber.value = numberUtil.format(1234567.89);
	formattedMoney.value = numberUtil.formatMoney(98765.4321);
	randomNumber.value = numberUtil.random(1, 100);
	
	// 字符串处理示例
	uuid.value = stringUtil.uuid();
	maskedPhone.value = stringUtil.maskPhone('13812345678');
	truncatedString.value = stringUtil.truncate('这是一个很长的字符串，用于测试字符串截断功能', 20);
	
	// 设备信息示例
	await loadDeviceInfo();
	
	// 网络状态示例
	await loadNetworkStatus();
});

// 加载设备信息
async function loadDeviceInfo() {
	try {
		const systemInfo = await deviceUtil.getSystemInfo();
		statusBarHeight.value = systemInfo.statusBarHeight || 0;
		devicePlatform.value = systemInfo.platform || '未知';
	} catch (error) {
		console.error('获取设备信息失败:', error);
	}
}

// 加载网络状态
async function loadNetworkStatus() {
	try {
		const isConnected = await networkUtil.isConnected();
		networkStatus.value = isConnected ? '已连接' : '未连接';
	} catch (error) {
		console.error('获取网络状态失败:', error);
	}
}

// UI工具示例方法
function showSuccess() {
	uiUtil.showSuccess('操作成功');
}

function showError() {
	uiUtil.showError('操作失败，请重试');
}

function showLoading() {
	uiUtil.showLoading('加载中...');
	// 模拟加载完成
	setTimeout(() => {
		uiUtil.hideLoading();
	}, 2000);
}

function showConfirm() {
	uiUtil.showConfirm('确认操作', '您确定要执行此操作吗？', () => {
		uiUtil.showSuccess('确认成功');
	}, () => {
		uiUtil.showError('已取消操作');
	});
}

// 屏幕尺寸示例方法
async function loadScreenSize() {
	try {
		const screenSize = await deviceUtil.getScreenSize();
		screenWidth.value = screenSize.width;
		screenHeight.value = screenSize.height;
		windowWidth.value = screenSize.windowWidth;
		windowHeight.value = screenSize.windowHeight;
	} catch (error) {
		console.error('获取屏幕尺寸失败:', error);
	}
}
</script>

<style lang="less">
.container {
	min-height: 100vh;
	background-color: #f5f5f5;
	padding-bottom: 20px;
}

.header {
	padding: 20px;
	background-color: #007aff;
	text-align: center;
}

.title {
	font-size: 20px;
	font-weight: bold;
	color: #fff;
}

.content {
	padding: 15px;
}

.section {
	background-color: #fff;
	border-radius: 8px;
	padding: 15px;
	margin-bottom: 15px;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.section-title {
	font-size: 18px;
	font-weight: bold;
	margin-bottom: 15px;
	color: #333;
}

.example-item {
	margin-bottom: 10px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 8px 0;
}

.label {
	font-size: 14px;
	color: #666;
}

.value {
	font-size: 14px;
	color: #333;
	font-weight: 500;
}

.button-group {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.button {
	padding: 12px;
	border-radius: 6px;
	font-size: 16px;
	color: #fff;
	border: none;
	cursor: pointer;
	transition: opacity 0.2s;
	
	&.success {
		background-color: #4cd964;
	}
	
	&.error {
		background-color: #ff3b30;
	}
	
	&.loading {
		background-color: #007aff;
	}
	
	&.confirm {
		background-color: #5856d6;
	}
	
	&:active {
		opacity: 0.8;
	}
}
</style>