<template>
	<view class="index-content-other" v-show="isShow" :style="transition?{opacity: `1`}:{opacity: `0`}">
		<view class="index-content-right">
			<view style="display: flex;">
				<view v-for="(item,index) in tabsArray" :key="index" class="tab" @click="clicktab(index)">
					<view :style="tabnumber===index?{fontWeight:800}:{}">
						{{item}}
					</view>
					<view class="tab-heng" v-show="tabnumber===index"></view>
				</view>
			</view>
			
			<scroll-view scroll-y style="height: calc(100% - 150rpx);" :show-scrollbar="false">
				<view class="scroll-box">
					<view v-for="(item,index) in [1,2,3,4,5,6]" :key="index" >
						<view class="card">
							<view class="card-left">
								<view class="card-left-title">
									<view class="left-view">
										<image class="left-view-img" src="/static/index/oldman.png" />
										<view>
											<view class="top-font-line">
												<view class="line-weight">王金凤</view>
												<view class="line-margin">
													女
												</view>
												<view class="">
													80岁
												</view>
											</view>
											<view class="top-font-line">
												<view class="font-gray">
													省医保 | 重度失能 | 正常缴费
												</view>
												
											</view>
										</view>
									</view>
									<view class="right-spec">
										<view class="blue-button">
											服务指令
										</view>
										<view class="font-gray-right">
											2025.01.01
										</view>
									</view>
								</view>
								<image class="video-img" src="/static/index/bed.png" />
								<view class=""></view>
							</view>
							<view class="card-right">
								
							</view>
						</view>
					</view>
				</view>
			</scroll-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'

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

	const transition = ref(true)
	const uuid = ref("")
	const tabsArray = ref(["全部", " 护理单元", "配务室", "库房"])

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

			}
		}
	)
	const tabnumber = ref(0)
	const clicktab = (index : number) => {
		tabnumber.value = index;
	}
</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);
		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;
		flex-direction: column;
		position: relative;
	}

	.blue-button {
		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);
		}
	}

	.tab {
		width: 200rpx;
		height: 120rpx;
		font-size: 32rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		position: relative;

		.tab-heng {
			position: absolute;
			left: 50%;
			bottom: 17rpx;
			transform: translateX(-50%);
			width: 50rpx;
			height: 10rpx;
			border-radius: 10rpx;
			background: linear-gradient(to right, #0052C2, #00B4FF);
		}
	}
	.scroll-box{
		display: flex;
		flex-wrap: wrap;
		.card{
			margin-left: 30rpx;
			margin-top: 10rpx;
			margin-bottom: 20rpx;
			border: 4rpx solid #fff;
			background: url("/static/index/newpink.png") center/cover, rgba(255, 255, 255, 0.8);
			background-position: 30% 70%;
			width: 1003rpx;
			height: 530rpx;
			border-radius: 20rpx;
			box-shadow: 2rpx 4rpx 8rpx 2rpx rgba(0, 0, 0, 0.3);
			display: flex;
			overflow: hidden;
			.card-left{
				height: 100%;
				width: 65%;
				.card-left-title{
					height: 23%;
					width: 100%;
					padding: 0 20rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;
					.left-view{
						display: flex;
						.left-view-img{
							width: 90rpx;
							height: 90rpx;
						}
					}
				}
			}
			.card-right{
				height: 100%;
				width: 35%;
				background-color: #ddf2f8;
			}
		}
	}
	.top-font-line{
		display: flex;
		align-items: center;
		.line-weight{
			font-size: 35rpx;
			font-weight: 600;
			margin-left: 10rpx;
		}
		.line-margin{
			margin-left: 40rpx;
			margin-right: 20rpx;
		}
		.font-gray{
			margin-left: 10rpx;
			margin-top: 10rpx;
			font-size: 25rpx;
			color: #555555;
		}
	}
	.blue-button{
		width: 140rpx;
		height: 50rpx;
		color: #fff;
		font-size: 25rpx;
		background-color: #01B1FC;
		border-radius: 20rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.font-gray-right{
		margin-top: 10rpx;
		// margin-bottom: 5rpx;
		font-size: 25rpx;
		color: #555555;
		margin-right: 8rpx;
	}
	.right-spec{
		display: flex;
		flex-direction: column;
		align-items: flex-end;
	}
	.video-img{
		margin-left: 30rpx;
		width: 520rpx;
		height: 310rpx;
		border-radius: 30rpx;
	}
</style>