<template>
	<view class="index-content-other" v-show="isShow" :style="transition?{opacity: `1`}:{opacity: `0`}">
		<view class="index-content-right">
			<view style="margin-right: 40rpx;">长春市朝阳区久泰开运养老服务有限公司</view>
		</view>
		<view class="array-father">
			<view v-for="(item,index) in iconsArray.slice(0,3)" :key="index" class="item" @click="jumpToTarget(index)">
				<view class="left-item">
					<image class="left-icon" :src="`/static/index/settings/${index}.png`" />
					<view class="left-font">
						{{item}}
					</view>
				</view>
				<view class="right-item">
					<image class="right-icon" :src="`/static/index/settings/00.png`" />
				</view>
			</view>
		</view>
		<view class="array-father" style="margin: 30rpx 0;">
			<view v-for="(item,index) in iconsArray.slice(3,5)" :key="index" class="item"
				@click="jumpToTarget(index+3)">
				<view class="left-item">
					<image class="left-icon" :src="`/static/index/settings/${index+3}.png`" />
					<view class="left-font">
						{{item}}
					</view>
				</view>
				<view class="right-item">
					<image class="right-icon" :src="`/static/index/settings/00.png`" />
				</view>
			</view>
		</view>
		<view class="array-father">
			<view v-for="(item,index) in iconsArray.slice(5,8)" :key="index" class="item" @click="jumpToTarget(index+5)">
				<view class="left-item">
					<image class="left-icon" :src="`/static/index/settings/${index+5}.png`" />
					<view class="left-font">
						{{item}}
					</view>
				</view>
				<view class="right-item">
					<image class="right-icon" :src="`/static/index/settings/00.png`" />
				</view>
			</view>
		</view>
		<view class="bottom-button" @click="exitshow=true">
			注销登录
		</view>
		<exit :show="exitshow" @close="exitshow=false" />
		<reset :show="resetshow" @close="resetshow=false" />
		<zy-update ref="zyupgrade" :noticeflag="true" theme="blue" :h5preview="false" oldversion="1.0.0"
			:appstoreflag="true" :autocheckupdate="true" @showupdateTips="noNeed" ></zy-update>
		<!-- 弹出层 -->
		<view v-if="openany" class="popup-any" :style="animation?{opacity:1}:{opacity:0}">
			<view class="mask" @click="openany=false"></view>
			<view class="box-any">
				<view class="title-left">
					<image class="back-img" src="/static/left.png" @click="openany=false"></image>
					<view v-if="!opentype" class="back-font">NU护理单元隐私信息保护政策</view>
					<view v-if="opentype" class="back-font">NU护理单元用户服务协议</view>
				</view>
				<twoseven v-if="!opentype" />
				<oneseven v-if="opentype" />
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { ref, onMounted, watch, nextTick } from 'vue'
	import { defineProps, defineEmits } from 'vue'
	import exit from "@/component/public/exit.vue"
	import reset from "@/component/public/reset.vue"
	import ZyUpdate from '@/component/zy-upgrade/zy-upgrade.vue'
	import oneseven from '@/pages/login/oneseven.vue'
	import twoseven from '@/pages/login/twoseven.vue'

	const zyupgrade = ref(null);
	const openany = ref(false);
	const opentype = ref(false);
	const exitshow = ref(false);
	const resetshow = ref(false);
	const emit = defineEmits(['jump'])
	const props = defineProps({ isShow: { type: Boolean, required: true } })
	const iconsArray = ref(["雷达扫描", "扫码添加", "手动录入", "修改密码", "切换机构", "检查更新", "用户协议", "隐私政策"])

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

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

			}
		}
	)
	const animation = ref(false)
	const jumpToTarget = (index : number) => {
		switch (index) {
			case 0:
				emit("jump", index)
				break
			case 1:
				emit("jump", index)
				break
			case 2:
				emit("jump", index)
				break
			case 3:
				resetshow.value = true
				break
			case 4:

				break
			case 5:
				zyupgrade.value?.check_update()
				break
			case 6:
				openany.value = true;
				opentype.value = true;
				animation.value = false;
				setTimeout(()=>{
					animation.value = true;
				},50)
				break
			case 7:
				openany.value = true;
				opentype.value = false;
				animation.value = false;
				setTimeout(()=>{
					animation.value = true;
				},50)
				break
		}
	}
	
	const noNeed = () => {
		if(props.isShow){
			uni.showToast({
			  title: '已经是最新版了',
			  icon: 'none',       // 无图标，仅文字
			  duration: 2000       // 显示时长，单位毫秒
			});
		}
		
	}
</script>

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

	.index-content-right {
		width: 100%;
		border-radius: 50rpx;
		display: flex;
		justify-content: flex-end;
		height: 120rpx;
		align-items: center;
	}

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

		.left-item {
			display: flex;
			align-items: center;
			margin-left: 20rpx;

			.left-icon {
				margin: 0 20rpx;
				width: 40rpx;
				height: 40rpx;
			}

			.left-item {}
		}

		.right-item {
			display: flex;
			align-items: center;
			margin-right: 50rpx;

			.right-icon {
				// margin: 0 20rpx;
				width: 15rpx;
				height: 30rpx;
			}
		}
	}

	.array-father {
		background-color: rgba(255, 255, 255, 0.6);
		width: 98.2%;
		border-radius: 30rpx;
	}

	.bottom-button {
		margin-top: 30rpx;
		background-color: rgba(255, 255, 255, 0.6);
		width: 98.2%;
		border-radius: 30rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 30rpx;
		height: 100rpx;
		color: #0174D3;
	}
	.popup-any {
		position: fixed;
		inset: 0;
		z-index: 999;
		/* 初始透明度 */
		opacity: 0;
		/* 播放动画：名称 fadeIn，时长 0.5s，缓动函数 ease，保持最后状态 */
		transition: opacity 0.5s ease;
		background-color: rgba(0, 0, 0, 0.3);
	}
	.mask {
		position: absolute;
		inset: 0;
	}
	
	.box-any {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 1000rpx;
		height: 1500rpx;
		background: #fff;
		border-radius: 50rpx;
		overflow: hidden;
		display: flex;
		flex-direction: column;
		padding: 65rpx 40rpx;
	}
	.title-left {
		display: flex;
		align-items: center;
	
		.back-img {
			width: 60rpx;
			height: 60rpx;
			margin-right: 30rpx;
		}
	
		.back-font {
			font-size: 35rpx;
			font-weight: 600;
		}
	}
</style>