<template>
	<view class="index-content-other" v-show="isShow" :style="transition?{opacity: `1`}:{opacity: `0`}">
		<view class="index-content-right">
			<view class="index-content-title">
				<view class="shu"></view>
				<view class="shu-font">长春市朝阳区久泰开运养老服务有限公司</view>
			</view>

			<view class="leida">
				<view class="kutong-father">
					<image class="kutong-img" src="@/static/index/leida/leidabgc.png" />
					<image class="kutong-shan" :class="progress < 1 ? 'spin-anim' : 'no-anim'"
						src="@/static/index/leida/shan.png" />
					<view class="huan">
						<view class="quarter-ring" :class="progress < 1 ? 'spin-anim-spec' : 'no-anim-spec'" />
					</view>
				</view>
				<view class="jindutiao">
					<view class="progress-fill" :style="{ transform: `scaleX(${progress})` }" />
				</view>
				<view class="color-font" style="margin-top: 80rpx;">
					{{ progress >= 1 ? "扫描完成。" : "正在使用雷达区域扫描护理机构," }}
				</view>
				<view class="color-font">{{ progress >= 1 ? "" : "请稍后..." }}</view>
				<view class="agagin-button" @click="again">重新扫描</view>
			</view>

			<view class="other">
				<scroll-view ref="scrollViewRef" scroll-y class="other-father" :scroll-top="scrollTop">
					<view class="card-father">
						<view class="card" v-for="(allitem, allindex) in cardarray" :key="allindex"
							:class="{ 'fade-in': allitem.isNew }" @animationend="onAnimEnd(allitem)">
							<view class="card-title">
								<view style="font-size: 25rpx;">NUID：{{allitem.nuId}}</view>
								<view class="right-box">护理单元</view>
							</view>
							<view class="card-middle">
								<view class="video-box" @click="renamenummber=-1">
									<image class="video-box-img" src="@/static/index/leida/video.png" />
								</view>
								<view>
									<view v-for="(item,index) in allitem.menu" :key="index"
										@click="item.target=!item.target;renamenummber=-1">
										<view class="small-menu">
											<image class="small-img" :src="item.target?item.targetUrl:item.url" />
										</view>
									</view>
								</view>
							</view>
							<view class="card-bottom">
								{{allitem.nuName}}
								<image class="bottom-img" src="@/static/index/leida/rename.png"
									@click="renamenummber=allindex;savevalue=allitem.nuName" />
							</view>
							<view class="rename-father" v-if="renamenummber==allindex">
								<view class="rename-title">
									重命名
								</view>
								<view class="rename-gray">
									NUID：20241001001
								</view>
								<view class="rename-input">
									<image class="left-img" src="@/static/index/click.png" />
									<input class="uni-input" placeholder="请重新命名" v-model="savevalue" />
									<image v-show="savevalue" class="right-img" src="@/static/index/quxiao.png"
										@click="savevalue=``" />
								</view>
								<view class="blue-button" @click="changename(savevalue,allindex)">
									确定
								</view>
							</view>
						</view>

					</view>
				</scroll-view>
			</view>
		</view>

		<!-- <view class="index-content-down">
			长春市朝阳区久泰开运养老服务有限公司
		</view> -->
	</view>
</template>

<script setup lang="ts">
	import { ref, onMounted, watch, nextTick } from 'vue'
	import { defineProps, defineEmits } from 'vue'
	import { getCardList } from "./api.js"
	// import { throttle } from '@/component/public/throttle.js'
	
	// const getCardListThrottled = throttle(getCardList(), 1000)
	const emit = defineEmits(['nav'])
	const props = defineProps({ isShow: { type: Boolean, required: true } })
	const savevalue = ref("");

	const renamenummber = ref(-1)
	const transition = ref(true)
	const progress = ref(1)
	const scrollTop = ref(0)
	const scrollViewRef = ref(null)
	const rightbutton = ref([
		{ url: '/static/index/leida/00.png', targetUrl: '/static/index/leida/01.png', target: false },
		{ url: '/static/index/leida/10.png', targetUrl: '/static/index/leida/11.png', target: false },
		{ url: '/static/index/leida/20.png', targetUrl: '/static/index/leida/21.png', target: false },
		{ url: '/static/index/leida/30.png', targetUrl: '/static/index/leida/31.png', target: false }
	])
	const cardarray = ref<Array<{ menu : any; isNew : boolean; nuName : string }>>([])
	const relArray = ref([]);
	
	// 区分首次渲染与动态添加
	watch(
		() => props.isShow,
		(newVal, oldVal) => {
			if (!oldVal && newVal) {
				transition.value = false
				setTimeout(() => (transition.value = true), 50)
				getCardList().then(res => {
					res.result.records.forEach((element : any) => {
						element.menu = JSON.parse(JSON.stringify(rightbutton.value))
						element.isNew = true
					})
					relArray.value = res.result.records
					console.log("????", relArray.value)
					again()
				})
			}
		}
	)

	// 随机生成并逐个添加卡片
	function suiji() {
		const n = relArray.value.length
		// console.log("?????",relArray.value)
		cardarray.value = []
		const randomWeights = Array.from({ length: n }, () => Math.random())
		const totalWeight = randomWeights.reduce((a, b) => a + b, 0)
		const intervals = randomWeights.map((w) => (w / totalWeight) * 5000)
		let cumulative = 0
		for (let i = 0; i < n; i++) {
			cumulative += intervals[i]
			setTimeout(async () => {
				// const menuCopy = JSON.parse(JSON.stringify(rightbutton.value))
				cardarray.value.push(relArray.value[i])
				// console.log("???",cardarray.value)
				// cardarray.value.push({ menu: menuCopy, name: `未命名${i}`, isNew: true })
				// 当卡片总数为 5,7,9,... 时滚动到底部
				const len = cardarray.value.length
				if (len >= 5 && len % 2 === 1) {
					scrollTop.value = 999
					await nextTick()
					scrollTop.value = 99999
				}
			}, cumulative)
		}
	}

	function again() {
		if(progress.value == 1){
			renamenummber.value = -1
			suiji()
			progress.value = 0
			const timer = setInterval(() => {
				progress.value += 0.01
				if (progress.value >= 1) {
					progress.value = 1
					clearInterval(timer)
				}
				
				
			}, 50)
		}
		
	}

	// 监听动画结束，清除标记
	function onAnimEnd(item : { isNew : boolean }) {
		item.isNew = false
	}

	const changename = (name, index) => {
		if (name) {
			cardarray.value[index].nuName = name;
		}
		renamenummber.value = -1

	}

	onMounted(() => {

	})
</script>

<style scoped lang="less">
	.index-content-other {
		width: calc(100% - 170rpx);
		height: 100%;
		transition: opacity 1s ease;
		position: relative;
	}

	.index-content-down {
		width: calc(100% - 60rpx);
		height: 100rpx;
		display: flex;
		justify-content: flex-end;
		align-items: center;
	}

	.index-content-right {
		// height: calc(100% - 100rpx);
		height: calc(100% - 30rpx);
		width: calc(100% - 60rpx);
		background-color: rgba(255, 255, 255, 0.8);
		background-image: url('/static/index/leida/bgc.png');
		background-position: 30% 70%;
		border-radius: 50rpx;
		// box-shadow: 4rpx 8rpx 16rpx 4rpx rgba(0, 0, 0, 0.3);
		display: flex;
		position: relative;
	}

	.leida {
		margin-top: 30rpx;
		height: 100%;
		width: 35%;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		position: relative;
	}

	.kutong-father {
		width: 300rpx;
		height: 450rpx;
		position: relative;
	}

	.kutong-img {
		position: absolute;
		top: 0;
		left: 0;
		width: 300rpx;
		height: 300rpx;
	}

	.kutong-shan {
		position: absolute;
		top: 0;
		left: 0;
		width: 150rpx;
		height: 206rpx;
		transform-origin: 100% 73%;
	}

	.spin-anim {
		animation: spin 2s linear infinite;
		animation-play-state: running;
	}

	.no-anim {
		animation: spin 2s linear infinite;
		animation-play-state: paused;
	}

	.spin-anim-spec {
		animation: spinx 2s linear infinite;
		animation-play-state: running;
	}

	.no-anim-spec {
		animation: spinx 2s linear infinite;
		animation-play-state: paused;
	}

	.huan {
		position: absolute;
		top: -65rpx;
		left: -65rpx;
		width: 430rpx;
		height: 430rpx;
		border: 20rpx solid rgb(206, 220, 245);
		border-radius: 50%;
	}

	.quarter-ring {
		position: absolute;
		top: -5%;
		left: -5%;
		width: 110%;
		height: 110%;
		box-sizing: border-box;
		border: 20rpx solid transparent;
		border-top-color: rgb(3, 169, 255);
		border-radius: 50%;
		transform: rotate(0deg);
		transform-origin: center center;
	}

	.jindutiao {
		width: 400rpx;
		border-radius: 20rpx;
		height: 20rpx;
		background-color: #a6c9fa;
		overflow: hidden;
	}

	.progress-fill {
		width: 100%;
		height: 100%;
		background: linear-gradient(to bottom, #00C9FF, #0076FF);
		transform-origin: left center;
		will-change: transform;
		transition: transform 0.05s linear;
	}

	.color-font {
		color: #415273;
		margin-top: 20rpx;
		height: 20rpx;
	}

	.agagin-button {
		width: 240rpx;
		height: 90rpx;
		margin-top: 80rpx;
		border-radius: 35rpx;
		background: linear-gradient(to bottom, #00C9FF, #0076FF);
		display: flex;
		justify-content: center;
		align-items: center;
		color: #fff;
	}

	.other {
		width: 65%;
		height: 100%;
	}

	.other-father {
		margin-top: 150rpx;
		height: calc(100% - 150rpx);
		width: 100%;
	}

	.card-father {
		width: 100%;
		display: flex;
		flex-wrap: wrap;
	}

	.card {
		width: 45%;
		margin-left: 3%;
		height: 530rpx;
		box-shadow: 2rpx 4rpx 8rpx 2rpx rgba(0, 0, 0, 0.3);
		background-color: #fff;
		border-radius: 30rpx;
		margin-bottom: 35rpx;
		padding: 0 25rpx;
		position: relative;

		.rename-father {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			width: 550rpx;
			height: 350rpx;
			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;

			.rename-title {
				width: 100%;
				height: 80rpx;
				border-bottom: 2rpx solid rgb(245, 245, 245);
				display: flex;
				justify-content: center;
				align-items: center;
			}

			.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;
				}

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

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

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

	.card-middle {
		width: 100%;
		height: 320rpx;
		display: flex;
		justify-content: space-between;
	}

	.video-box {
		width: 82%;
		height: 320rpx;
		background-color: #E5ECFA;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 20rpx;
	}

	.video-box-img {
		width: 80rpx;
		height: 80rpx;
	}

	/* 旋转动画 */
	@keyframes spin {
		from {
			transform: rotate(0deg);
		}

		to {
			transform: rotate(360deg);
		}
	}

	@keyframes spinx {
		from {
			transform: rotate(-70deg);
		}

		to {
			transform: rotate(290deg);
		}
	}

	/* 新卡片淡入动画 */
	@keyframes fadeIn {
		from {
			opacity: 0;
			transform: translateY(10rpx);
		}

		to {
			opacity: 1;
			transform: translateY(0);
		}
	}

	.fade-in {
		animation: fadeIn 0.4s ease-out forwards;
	}

	.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;
		}

	}

	.right-box {
		background: rgb(0, 171, 255);
		width: 160rpx;
		height: 65rpx;
		border-radius: 20rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #fff;
	}

	.small-menu {
		width: 75rpx;
		height: 73rpx;
		border-radius: 20rpx;
		background-color: #E7ECFA;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-bottom: 10rpx;

		.small-img {
			height: 50rpx;
			width: 50rpx;
		}
	}

	.card-bottom {
		margin-top: 17rpx;
		margin-left: 10rpx;
		display: flex;

		.bottom-img {
			width: 38rpx;
			height: 38rpx;
			margin-left: 30rpx;
		}
	}

	.blue-button {
		margin-top: 20rpx;
		width: 180rpx;
		height: 70rpx;
		border-radius: 30rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #fff;
		background: linear-gradient(to bottom, #00C9FF, #0076FF);
	}
</style>