<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>
		<view class="saomiao">
			<view class="big-ball">
				<view class="ball">

				</view>
			</view>
			<image class="left-img" src="@/static/click.png" />
			<input class="saoma-input" :password="false" v-model="uuid" placeholder="请手动录入NUID" />
			<image v-show="uuid" class="right-img" src="@/static/x.png" @click="uuid=''" />
			<view class="blue-button">
				确定
			</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'
	// getqueryinfoByBuId

	const emit = defineEmits(['nav'])
	const props = defineProps({ isShow: { type: Boolean, required: true } })

	const transition = ref(true)
	const uuid = ref("")

	// 区分首次渲染与动态添加
	watch(
		() => props.isShow,
		(newVal, oldVal) => {
			if (!oldVal && newVal) {
				transition.value = false
				setTimeout(() => (transition.value = true), 50)

			}
		}
	)
</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;

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

		.saoma-input {
			background-color: #fff;
			width: 550rpx;
			height: 90rpx;
			border-radius: 30rpx;
			padding-left: 100rpx;
			z-index: 1;
		}

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

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

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

	.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);
		}
	}
</style>