<template>
	<view class="index-content-other">
		<!-- <view class="index-content-right" @click="goback">
			<image class="back-img" :src="`/static/index/settings/back.png`" />
			返回
		</view> -->
		<view class="saomiao">
			<view class="card" v-if="allitem.nuName">

				<view class="main-title">
					<view class="main-title-font" style="font-weight: 600;font-size: 40rpx;">
						{{allitem.nuName}}
					</view>
					<view class="video-father">
						<image class="edit-img" @click="" src="/static/index/leida/play.png" />
					</view>

				</view>
				<view style="display: flex;justify-content: center;width: 100%;">
					<view class="blue-button" style="width: 200rpx;height: 70rpx;margin-top: 50rpx;"
						@click="allitem={} ">
						关闭
					</view>
					<view class="blue-button" style="width: 200rpx;height: 70rpx;margin-top: 50rpx;" @click="rename()">
						重命名
					</view>
				</view>

				<view class="card-tags">
					<view style="margin-left: 80rpx;">
						NUID:{{allitem.nuId}}
					</view>

				</view>
				<view class="play-img">
					护理单元
				</view>

			</view>


		</view>
		<view class="popup-any" v-show="isshowchange" :style="isdonghua?{opacity:1}:{opacity:0}">
			<view class="mask" @click="isdonghua=false"></view>
			<view class="rename-father">
				<view class="rename-title">
					重命名
				</view>
				<view style="width: 100%;margin-left: 5rpx;margin-bottom: 20rpx;">
					NUID:{{savenuId}}
				</view>
				<view class="rename-input">
					<input class="uni-input" placeholder="请重新命名" v-model="savevalue" @confirm="changename" />
					<image v-show="savevalue" class="right-img" src="@/static/index/quxiao.png" @click="savevalue=``" />
				</view>
				<view class="blue-button" style="width: 200rpx;height: 70rpx;margin-top: 40rpx;" @click="changename">
					确定
				</view>
			</view>
		</view>
	</view>
	<image class="big-bgc" src="@/static/kuai.png" v-if="!allitem.nuName" />
	<view class="big-img" @click="onScan" v-if="!allitem.nuName">
		<image style="width: 100%;height: 100%;" src="@/static/sao.png" />
		<view class="big-font">
			点击扫描区域二维码
		</view>
	</view>

	<image class="big-QR" src="@/static/qr.png" @click="onScan" v-if="!allitem.nuName" />
	<view class="index-content-down">
		长春市朝阳区久泰开运养老服务有限公司
	</view>
	
</template>

<script setup lang="ts">
	import { ref, onMounted, watch, nextTick } from 'vue'
	import { getqueryinfoByBuId, updateBaseInfo } from "./api.js"
	const goback = () => {
		uni.navigateBack()
	}
	const allitem = ref({})
	function onScan() {
		uni.scanCode({
			// 仅使用相机扫码，设置为 false 则可以从相册选择图片扫码（部分平台可能不支持）
			onlyFromCamera: true,
			scanType: ['qrCode', 'barCode'],
			success(res) {
				if (res.result) {
					uuid.value = res.result
					getqueryinfoByBuId(uuid.value).then((res : any) => {
						
						if (res.success) {
							allitem.value = res.result
						} else {
							uni.showToast({
								title: res.message,
								icon: 'none'
							})
						}
					})
				}
			},
			fail(err) {
				uni.showToast({ title: '扫码失败：' + err.errMsg, icon: 'none' })
			}
		})
	}
	const uuid = ref("")
	const isshowchange = ref(false)
	const isdonghua = ref(false);
	const savevalue = ref("");
	const savenuId = ref("")
	const rename = () => {
		savevalue.value = allitem.value.nuName;
		savenuId.value = allitem.value.nuId;
		isdonghua.value = false;
		isshowchange.value = true;
		// savevalue.value = ""
		setTimeout(()=>{
			isdonghua.value = true;
		},50)
	}
	const changename = () => {
		
		if (savevalue.value) {
			
			let data = {
				id:allitem.value.id,
				nuName:savevalue.value
			}
			updateBaseInfo(data).then((res:any)=>{
				if(res.success){
					getqueryinfoByBuId(uuid.value).then((res : any) => {
						if (res.success) {
							allitem.value = res.result;
							isshowchange.value = false;
							isdonghua.value = false
						} else {
							uni.showToast({
								title: res.message,
								icon: 'none'
							})
						}
					})
				}
			})
		}
	}
</script>

<style scoped lang="less">
	.index-content-other {
		width: 100%;
		height: 100%;
		transition: opacity 1s ease;
		position: relative;
		background-color: #EFF0F4;
	}

	.index-content-down {
		// width: calc(100% - 60rpx);
		// height: 100rpx;
		position: absolute;
		bottom: 40rpx;
		left: 50%;
		transform: translateX(-50%);
	}

	.index-content-right {
		width: 100%;
		border-radius: 50rpx;
		display: flex;
		align-items: center;
		padding-top: 100rpx;
		font-size: 32rpx;
		position: relative;

		.index-content-title {
			position: absolute;
			top: 60rpx;
			left: 60rpx;
			display: flex;
			align-items: center;

			.shu {
				width: 20rpx;
				height: 50rpx;
				background: linear-gradient(to right, #0052C2, #00B4FF);
				border-radius: 20rpx;
				margin-right: 30rpx;
			}

			.shu-font {
				color: #415273;
				font-size: 35rpx;
			}

		}
	}

	.saomiao {
		position: fixed;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		display: flex;
		z-index: 1;
	}

	.blue-button {
		// margin-top: 20rpx;
		margin-left: 30rpx;
		width: 170rpx;
		height: 90rpx;
		border-radius: 40rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #007CFF;
		font-size: 30rpx;
		background-color: #ddf0ff;
		border: 1rpx solid #007CFF;
	}

	.big-ball {
		width: 200rpx;
		height: 200rpx;
		position: absolute;
		top: 50%;
		left: -55rpx;
		transform: translateY(-50%);
		border-radius: 50%;
		background-color: rgb(219, 228, 246);

		.ball {
			width: 150rpx;
			height: 150rpx;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			border-radius: 50%;
			background-color: rgb(207, 221, 241);
		}
	}

	.back-img {
		width: 30rpx;
		height: 30rpx;
		margin-left: 100rpx;
		margin-right: 20rpx;
	}

	.big-bgc {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 1800rpx;
		height: 900rpx;

	}

	.big-img {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 350rpx;
		height: 350rpx;

		&::before {
			content: "";
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			animation: scanMove 1.3s ease-in-out infinite;
			z-index: 1001;
			height: 80rpx; // 尾巴长度
			background: linear-gradient(to bottom,
					rgba(5, 170, 254, 0.6),
					rgba(5, 170, 254, 0.1),
					transparent);
			will-change: transform;
		}
	}

	.big-QR {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 300rpx;
		height: 300rpx;
	}

	.big-font {
		position: absolute;
		// bottom: -50rpx;
		color: #888A8B;
		left: 0;
		bottom: -80rpx;
		// width: 300rpx;
		font-size: 32rpx;
		width: 100%;
		display: flex;
		justify-content: center;
		// transform: translateX(-50%);
	}

	// 扫描动画关键帧
	@keyframes scanMove {
		0% {
			top: 5%;
		}

		100% {
			top: 95%;
		}
	}

	.card {
		width: 600rpx;
		margin-left: 4%;
		height: 450rpx;
		box-shadow: 3rpx 6rpx 12rpx 3rpx rgba(206, 206, 206, 0.5);
		background-color: #f4f5f7;
		border-radius: 30rpx;
		margin-top: 5rpx;
		margin-bottom: 35rpx;
		padding: 0 25rpx;
		position: relative;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		overflow: hidden;


	}

	.card-title {
		width: 100%;
		height: 130rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.main-title {
		display: flex;
		align-items: center;
		margin-top: 70rpx;
		margin-bottom: 10rpx;
	}

	.video-father {
		width: 60rpx;
		height: 60rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-left: 15rpx;
	}

	.edit-img {
		width: 40rpx;
		height: 30rpx;
	}

	.play-img {
		position: absolute;
		top: 50rpx;
		right: 30rpx;
		width: 130rpx;
		height: 55rpx;
		font-size: 26rpx;
		border-radius: 35rpx;
		border: 2rpx solid #999;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.card-tags {
		position: absolute;
		top: 50rpx;
		left: 0rpx;
		width: 200rpx;
		height: 65rpx;
		font-size: 25rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.popup-any {
		position: fixed;
		inset: 0;
		z-index: 999;
		/* 初始透明度 */
		opacity: 0;
		/* 播放动画：名称 fadeIn，时长 0.5s，缓动函数 ease，保持最后状态 */
		transition: opacity 0.5s ease;
		backdrop-filter: blur(1rpx);
		background-color: rgba(236, 237, 241, 0.4);
		/* 添加毛玻璃效果 */
		z-index: 999;
	}

	.mask {
		position: absolute;
		inset: 0;
	}

	.rename-father {
		position: fixed;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 600rpx;
		height: 450rpx;
		border-radius: 30rpx;
		box-shadow: 2rpx 4rpx 8rpx 2rpx rgba(0, 0, 0, 0.3);
		background-color: #fff;
		display: flex;
		// justify-content: center;
		flex-direction: column;
		align-items: center;
		padding: 0 30rpx;
		z-index: 999;

		.rename-title {
			width: 100%;
			height: 80rpx;
			// border-bottom: 2rpx solid rgb(245, 245, 245);
			display: flex;
			justify-content: center;
			align-items: center;
			// margin: 30rpx 0;
			margin-top: 30rpx;
			margin-bottom: 20rpx;
			font-size: 32rpx;
		}

		.rename-gray {
			width: 100%;
			height: 80rpx;
			display: flex;
			// justify-content: center;
			color: rgb(167, 167, 167);
			align-items: center;
		}

		.rename-input {
			width: 100%;
			height: 80rpx;
			display: flex;
			background-color: rgb(245, 246, 250);
			border-radius: 20rpx;
			color: rgb(167, 167, 167);
			align-items: center;
			padding: 0 20rpx;
			position: relative;

			.uni-input {
				font-size: 25rpx;
				width: 100%;
			}

			.left-img {
				width: 50rpx;
				height: 50rpx;
				margin-right: 15rpx;
			}

			.right-img {
				position: absolute;
				right: 30rpx;
				top: 50%;
				transform: translateY(-50%);
				width: 30rpx;
				height: 30rpx;
			}
		}
	}
</style>