<template>
	<view v-if="Bindvisible" class="popup-overlay" :class="{ 'popup-overlay-enter': showAnimation }">
		<view class="popup-fixed" :class="{ 'popup-scale-enter': showAnimation }">
			<view class="popup-container-bg">
				<!-- <image src="/static/UploadQrcode.png" class="popup-bg-image" mode="aspectFill"></image> -->
				<view class="popup-container">
					<text class="popup-title">
						绑定设备
					</text>
					<view class="popup-input-container">
						<input class="popup-input" placeholder-style="placeholders" type="number" placeholder="请输入设备应用码"
							v-model="machine_code" />
					</view>
					<view class="popup-btn">
						<button class="popup-btn-btn" @click="handleBind">确定</button>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script setup lang="uts">
	import { binds, type ResponseData } from '../../utils/reques.uts'
	// #ifdef APP
	import { getDevicesInfo } from "@/uni_modules/zws-deviceInfo"
	// #endif
	type PopupUploadProps = {
		Bindvisible : boolean
		closeOnOverlay : boolean
	}

	type PopupUploadEmits = {
		(e : 'close') : void
		(e : 'success') : void
	}

	const props = withDefaults(defineProps<PopupUploadProps>(), {
		Bindvisible: false,
		closeOnOverlay: false
	})

	const emit = defineEmits<PopupUploadEmits>()

	const machine_code = ref('')
	const device_id = ref('')
	const showAnimation = ref(false)

	onMounted(() => {
		// #ifdef APP
		device_id.value = getDevicesInfo().ANDROID_ID
		// #endif
		
	})

	// 监听弹窗显示状态，控制动画
	watch(() : boolean => props.Bindvisible, (newVal : boolean) : void => {
		if (newVal) {
			// 弹窗打开时，延迟一帧触发动画
			nextTick(() => {
				showAnimation.value = true
			})
		} else {
			// 弹窗关闭时，重置动画状态
			showAnimation.value = false
		}
	})

	const handleBind = async () : Promise<void> => {
		const params = {
			machine_code: machine_code.value,
			device_id: device_id.value,
		} as object
		try {
			const res = await binds(params) as ResponseData
			if (res.code == 0) {
				uni.setStorage({ key: 'machine_code', data: machine_code.value })
				uni.setStorage({ key: 'device_id', data: device_id.value })
				uni.showToast({ title: '绑定成功', icon: 'none' })
				emit('success')
				emit('close')
			} else {
				uni.showToast({ title: res.message, icon: 'none' })
			}
		} catch (e) {
			uni.showToast({ title: '绑定失败', icon: 'none' })
			console.log('绑定失败:', e)
		}
	}
</script>
<style>
	.popup-overlay {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0);
		z-index: 99;
		display: flex;
		justify-content: center;
		align-items: center;
		transition: background-color 0.3s ease;
	}

	.popup-overlay-enter {
		background-color: rgba(0, 0, 0, 0.5);
	}

	.popup-fixed {
		margin-top: 50rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		transform: scale(0.7);
		transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
	}

	.popup-scale-enter {
		transform: scale(1);
	}

	.popup-container {
		height: 547.92rpx;
		position: relative;
		z-index: 2;
		align-items: center;
	}

	.popup-container-bg {
		display: flex;
		justify-content: center;
		position: relative;
		width: 660rpx;
height: 516rpx;
background: #FFFFFF;
border-radius: 20px;
	}

	.popup-title {
		margin-top: 57rpx;
		font-weight: bold;
		font-size: 40rpx;
		color: #21061A;
		align-items: center;
	}

	.popup-bg-image {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 1;
	}

	.icon-hand,
	.icon-lightning {
		font-size: 18rpx;
	}

	.popup-input-container {
		width: 100%;
		align-items: center;
		margin-top: 75rpx;
	}

	.popup-input {
		width: 460rpx;
height: 88rpx;
background: #FFFFFF;
border: 2rpx solid #B2B2B2;
		border-radius: 10rpx;
		font-weight: 400;
		font-size: 25rpx;
		color: #333333;
		text-align: center;
	}

	.placeholders {
		font-family: PingFang SC;
		font-weight: 400;
		font-size: 36rpx;
		color: #333333;
	}

	.popup-btn {
		margin-top: 102rpx;
		width: 100%;
		height: 100%;
		align-items: center;
	}

	.popup-btn-btn {
		width: 50%;
		height: 76rpx;
		background: #FD3DA0;
		border-radius: 10rpx;
		font-family: PingFang SC;
		font-weight: 400;
		font-size: 36rpx;
		color: #FFFFFF;
		line-height: 76rpx;
		border: none;
	}
</style>