<template>
	<view class="container">
		<view class="main-content">
			<view class="input-group">
				<u-input v-model="selectedWarehouse" placeholder="请选择仓库" readonly border="surround" />
				<u-button type="primary" @click="openWarehouseSelector" text="选择" />
			</view>
			<view class="input-group">
				<u-input v-model="trackingNumber" placeholder="扫描/输入物流单号" border="surround" />
				<u-button type="primary" @click="confirmTrackingNumber" text="确定" />
			</view>
		</view>

		<view class="fixed-bottom">
			<u-button size="large" type="success" @click="scanCode" text="扫码" class="scan-button" />
		</view>

		<WarehouseSelector v-model:show="showSelector" @warehouse-selected="handleWarehouseSelected" />
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import WarehouseSelector from './components/WarehouseSelector.vue';

	const showSelector = ref(false);
	const selectedWarehouse = ref('');
	const trackingNumber = ref('');

	function openWarehouseSelector() {
		// Logic to open warehouse selector
		showSelector.value = true;
	}

	function handleWarehouseSelected(warehouse) {
		selectedWarehouse.value = warehouse;
	}

	function confirmTrackingNumber() {
		// Logic to confirm tracking number
		playSuccessVoice('物流单号DPK202306014525已到仓签收成功')
	}

	//播放语音
	function playSuccessVoice(text) {
		// 构建 TTS 参数
		const ttsParams = {
			speed: 0.8, // 将 0-10 转换为 0-1
			pitch: 1, // 将 0-10 转换为 0-1
			volume: 1,
		}

		// #ifdef APP-PLUS
		// App 端使用原生 TTS
		const TTSModule = uni.requireNativePlugin('nrb-tts-plugin')
		TTSModule && TTSModule.init({
			"lang": "ZH",
			"country": "CN"
		}, res => {
			if (res.success == 0) {
				TTSModule.speak(text, ttsParams, (e) => {
					console.log(e, '播放语音成功')
				})
			}
		})
		// #endif
	}

	function scanCode() {
		uni.scanCode({
			success: (res) => {
				trackingNumber.value = res.result;
				// 处理扫码结果
				console.log('扫码结果:', res.result);
			},
			fail: (err) => {
				console.error('扫码失败:', err);
			}
		});
	}
</script>

<style lang="scss" scoped>
	.main-content {
		padding: 20px;
		gap: 20px;
	}

	.input-group {
		display: flex;
		gap: 10px;
		margin-bottom: 30rpx;

		:deep(.u-button) {
			width: 160rpx
		}

		.u-input {
			background-color: #fff;
		}
	}
</style>