<template>
	<view class="index-content-other">
		<view class="index-content-right">
			<!-- <image class="back-img" :src="`/static/index/settings/back.png`" />
			返回 -->
		</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">
			<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  class="item" @click="jumpToTarget(8)">
				<view class="left-item">
					<image class="left-icon" :src="`/static/index/settings/6.png`" />
					<view class="left-font">
						修改头像
					</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>
		<view class="text-center">
			<!-- <view>{{ uni.getStorageSync('orgListName') }}</view> -->
		</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" @touchmove.prevent @click="openany=false"></view>
			<view class="box-any" @touchmove.prevent>
				<view class="title-left">
					<!-- <image class="back-img" src="/static/left.png" @click="openany=false"></image> -->
					<view v-if="!opentype" class="back-font">护理单元隐私信息保护政策</view>
					<view v-if="opentype" class="back-font">护理单元用户服务协议</view>
				</view>
				<twoseven v-if="!opentype" />
				<oneseven v-if="opentype" />
			</view>
		</view>
		
		<view class="avator guodu" :style="avator?'opacity: 1':'opacity: 0;z-index: -1'">
			<text>点击头像更换</text>
			<view class="avatorimg" @click="uplod" >
				<image :src="userInfo.avatar?(userInfo.flag?userInfo.avatar : serverUrl+'/sys/common/static/'+userInfo.avatar):'/static/shouye/mrtx.png'" mode="aspectFill"></image>
			</view>
			<view class="butft" @click="sxdupld(userInfo.avatar)" v-if="userInfo?.flag">
				确定
			</view>
		</view>
		<view class="mengban" v-if="avator" @click="huanyuan"></view>
	</view>
	<view class="bg-mask" v-if="selectserve">
		<view @click.stop class="white-select">
			<view class="big-font">
				请选择您的机构
			</view>
			<view class="">
				<view class="small-father">
					<view class="small-select"
						:style="serverUrl==item.serverUrl?{color:`#0083FF`,borderColor:`#0083FF`}:{}"
						v-for="(item,index) in allserve" @click="changeServe(item)">
						{{ item.departName }}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { ref, onMounted, watch, nextTick } 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'
	import { getServiceTree0, getServiceTree1, getServiceTree2 } from '@/pages/NursingNew/component/nurse/api.js'
	import { getLoginCode, loginApp } from '@/pages/login/api.js'

	import {editAvatar} from './api.js'
	const zyupgrade = ref(null);
	const issay = ref(false)
	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("")
	const selectserve = ref(false)
	const allserve = ref(uni.getStorageSync('orgList'))

	
		
	const userInfo = ref(uni.getStorageSync('userInfo'));
	const avator = ref(false); 
	const uplod = ()=>{
		uni.chooseImage({
			count: 1, //默认9
			sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
			sourceType: ['camera','album'], //从相册选择
			success: (e) => {
				let ar = JSON.stringify(e.tempFilePaths)
				uni.compressImage({
					src: JSON.parse(ar)[0],
					quality: 80,
					success: res => {
						// sxdupld(res.tempFilePath)
						userInfo.value.flag = true;
						userInfo.value.avatar = res.tempFilePath;
						// v.picPatharr.push(res.tempFilePath);
					}
				})
			}
		});
	}
	const sxdupld = (e) => { 
		uni.uploadFile({
			url: uni.getStorageSync('serverUrl') + '/sys/common/upload',
			filePath: e,
			name: 'file',
			fileType: 'image',
			formData: {
				biz: '/touxiangPath'
			},
			header: {
				'X-Access-Token': uni.getStorageSync('token')
			},
			success: res => {
				const data = JSON.parse(res.data);
				userInfo.value.avatar = data.message;
				userInfo.value.flag = false;
				avaxg();
			},
			fail: () => {
				uni.showToast({ title: '上传失败', icon: 'none' })
			}
		})
	}
	const huanyuan = ()=>{
		avator.value = false;
		userInfo.value = uni.getStorageSync('userInfo');
	}
	const avaxg = () =>{
		editAvatar({avatar:userInfo.value.avatar,id:userInfo.value.id,employeesId:userInfo.value.employeesId}).then(res=>{
			if(res.success){
				uni.setStorageSync('userInfo', userInfo.value);
				uni.showToast({
					icon:'success',
					title:"更新成功！"
				})
				avator.value = false;
			}
		})
	}
	const changeServe = (item:any) => {
		uni.setStorageSync('serverUrl', item.serverUrl);
		uni.setStorageSync('orgListName', item.departName);
		uni.setStorageSync('orgListCode', item.orgCode);
		
		let form =  uni.getStorageSync('form');
		// gotoindex()
		let time = Date.now();
		getLoginCode(time).then((res : any) => {
			form.captcha = res.message
			form.checkKey = time
			
			loginApp(form).then(res => {
				
				if (res.success) {
					uni.setStorageSync('token', res.result.token);
					uni.setStorageSync('username', form.username);
					uni.setStorageSync('realname', res.result.userInfo.realname);
					uni.setStorageSync('userInfo', res.result.userInfo);
					// 缓存表格编辑右侧菜单的功能
					getServiceTree0().then((res : any) => {
						//缓存护嘱菜单
						console.log(res)
						uni.setStorageSync("saveTree0", res)
						getServiceTree1().then((res : any) => {
							//缓存护嘱菜单
							uni.setStorageSync("saveTree1", res)
						})
						getServiceTree2().then((res : any) => {
							//缓存护嘱菜单
							uni.setStorageSync("saveTree2", res)
							
						})
						
						setTimeout(()=>{
							uni.showToast({
								title: '切换机构成功',
								icon: 'success',       // 无图标，仅文字
								duration: 2000       // 显示时长，单位毫秒
							});
						},200)
					})
				} else {
					uni.showToast({
						title: res.message,
						icon: 'none', // 可选值：'success'、'loading'、'none'
						duration: 2000   // 持续时间，单位ms
					})
				}
			})
		})
		selectserve.value = false;
	
		

	}


	const animation = ref(false);
	const serverUrl = ref("")
	const jumpToTarget = (index : number) => {
		switch (index) {
			case 0:
				uni.navigateTo({
					url: '/pages/watch/settings/leida'
				})
				break
			case 1:
				uni.navigateTo({
					url: '/pages/watch/settings/saoma'
				})
				break
			case 2:
				uni.navigateTo({
					url: '/pages/watch/settings/input'
				})
				break
			case 3:
				resetshow.value = true
				break
			case 4:
				if (allserve.value.length == 1) {
					uni.showToast({
						title: `您目前只绑定了一个机构。如需切换，请先申请新的机构。`,
						icon: 'none',       // 无图标，仅文字
						duration: 2000       // 显示时长，单位毫秒
					});

				} else {
					serverUrl.value = uni.getStorageSync('serverUrl')
					selectserve.value = true;
				}
				break
			case 5:
				issay.value = true;
				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
			case 8:
			userInfo.value.flag = false;
			serverUrl.value = uni.getStorageSync('serverUrl')
			avator.value = true;
			break
		}
	}

	const noNeed = () => {
		if (issay.value) {
			uni.showToast({
				title: '已经是最新版了',
				icon: 'none',       // 无图标，仅文字
				duration: 2000       // 显示时长，单位毫秒
			});
		}

	}
	// const goback = () => {
	// 	uni.navigateBack()
	// }
</script>

<style scoped lang="less">
	.guodu {
		transition: .4s;
		-webkit-transform-style: preserve-3d;
		-webkit-overflow-scrolling: touch;
	}
	.avator{
		position: fixed;
		width: 750rpx;
		height: 700rpx;
		border-radius: 30rpx;
		background-color: #fff;
		display: flex;
		flex-direction: column;
		align-items: center;
		z-index: 1;
		padding: 0 10%;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		margin: auto;
		z-index: 20;
		box-shadow: 0rpx 0rpx 0.5vw 0rpx rgba(136,148,167,0.19);
		text{
			margin-top: 100rpx;
		}
		.butft {
			width: 8.5vw;
			height: 3.3vw;
			background-color: #fff;
			display: flex;
			justify-content: center;
			align-items: center;
			border-radius: 1.2vw;
			border: 1rpx solid #5AAEFF;
			color: #249BFA;
			margin-left: 1vw;
			background: linear-gradient(to bottom, #fff, #D1EAFF);
			margin-top: 45rpx;
		}
		.avatorimg{
			width: 300rpx;
			height: 300rpx;
			margin: 30rpx auto 0;
			border-radius: 50%;
			overflow: hidden;
			image{
				width: 100%;
				height: 100%;
			}
		}
	}
	.mengban{
		width: 100vw;
		height: 100vh;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 10;
	}
	.index-content-other {
		width: 100%;
		height: 100vh;
		transition: opacity 1s ease;
		position: relative;
		background-color: #EFF0F4;
		overflow: hidden;
	}

	.index-content-right {
		width: 100%;
		border-radius: 50rpx;
		display: flex;
		align-items: center;
		font-size: 32rpx;
		height: 35rpx;
	}

	.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: 76%;
		margin-left: 12%;
		border-radius: 30rpx;
		margin-top: 30rpx;
	}

	.bottom-button {
		margin-top: 30rpx;
		background-color: rgba(255, 255, 255, 0.6);
		width: 76%;
		margin-left: 12%;
		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;
		backdrop-filter: blur(1rpx);
		background-color: rgba(236, 237, 241, 0.4);
		/* 添加毛玻璃效果 */
		z-index: 999;
	}

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

	.box-any {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 1000rpx;
		height: 1300rpx;
		background: #fff;
		border-radius: 50rpx;
		overflow: hidden;
		display: flex;
		flex-direction: column;
		padding: 65rpx 60rpx;
	}

	.title-left {
		display: flex;
		align-items: center;
		justify-content: center;

		.back-img {
			width: 60rpx;
			height: 60rpx;
			margin-right: 30rpx;
		}

		.back-font {
			font-size: 35rpx;
			font-weight: 600;
		}
	}

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

	.text-center {
		margin-top: 40rpx;
		height: 30rpx;
		width: 100%;
		display: flex;
		justify-content: center;
	}

	.bg-mask {
		position: fixed;
		top: 0;
		left: 0;
		width: 100vw;
		height: 100vh;
		background: rgba(0, 0, 0, 0.3);
		backdrop-filter: blur(5rpx);
		z-index: 998;
		display: flex;
		justify-content: center;
		align-items: center;

		.white-select {
			display: flex;
			justify-content: center;
			align-items: center;
			background-color: #fff;
			width: 1200rpx;
			height: 1200rpx;
			border-radius: 30rpx;
			flex-direction: column;

			.big-font {
				font-size: 35rpx;
			}

			.small-father {
				display: flex;
				align-items: center;
				flex-wrap: wrap;
				flex-direction: column;
			}

			.small-select {
				display: flex;
				justify-content: center;
				align-items: center;
				width: 600rpx;
				height: 200rpx;
				margin-top: 50rpx;
				padding: 30rpx;
				border-radius: 30rpx;
				border: 2rpx solid;
				font-size: 32rpx;
			}
		}
	}
</style>