<template>
	<div class="container">
		<!-- <view class="title-back">
			<view class="left-father" @click="goBack">
				<image class="back-img" src="https://www.focusnu.com/media/directive/index/left.png" />
			</view>
		</view> -->
		<view class="title-back" :style="{height:`${uni.getStorageSync('moveHeight')+35}px`}">
			<view class="left-father" @click="goBack">
				<image class="back-img" src="https://www.focusnu.com/media/directive/index/left.png" />
				<!-- <view style="font-size: 30rpx;">机构加盟</view> -->
			</view>
		</view>
		<view :style="{height:`${uni.getStorageSync('moveHeight') + 30}px`}"></view>
		<view class="white-content">
			<view class="white-title">
				NUID:{{ item.nuId }}
			</view>
			<view class="white-second">
				{{ item.departName }}
			</view>
			<view class="white-center">
				{{ item.nuName }}
				<!-- <image class="center-img" src="https://www.focusnu.com/media/directive/index/sheying.png" /> -->
			</view>
			<view style="display: flex;width: 85%;position: absolute;bottom: 0rpx;">
				<view class="finish-button" v-if="item.nuCanUse==0" @click="goToPay">
					绑定护理单元
				</view>
				<view class="white-button" v-else>
					{{ item.msg }}
				</view>
			</view>
		</view>
		<view style="width: 100%;display: flex;justify-content: flex-end;">
			<view class="back-right" @click="goBack">
				重新扫码
			</view>

		</view>
	</div>
</template>

<script setup>
	import {
		ref,
		reactive
	} from 'vue'
	import {
		onLoad,
		onShow
	} from '@dcloudio/uni-app';
	import {
		getOrgNuId
	} from './api.js'

	const goBack = () => {
		uni.navigateBack()
	}
	const item = ref({});
	onLoad((options) => {
		item.value = JSON.parse(options.element)
		// console.log("AAAA",JSON.parse(options.element))
	})
	const goToPay = () => {
		uni.setStorageSync('payaccount', item.value);
		uni.navigateTo({
			url: '/pages/oldmanindex/protocol'
		})
	}
</script>

<style lang="scss" scoped>
	.container {
		display: flex;
		flex-direction: column;
		min-height: 100vh;
		width: 100%;
		background-color: #F7F7F7;
		position: relative;

		.title-back {
			background-color: #EFF6F9;
			width: 100%;
			height: 70rpx;
			display: flex;
			justify-content: space-between;
			align-items: flex-end;
			padding-bottom: 20rpx;
			border-bottom: 1rpx solid #cbd1d2;
			position: fixed;
			top: 0;
			left: 0;
			z-index: 9999;
		}

		.left-father {
			display: flex;
			align-items: center;

			.back-img {
				width: 45rpx;
				height: 40rpx;
				margin-left: 40rpx;
				margin-right: 15rpx;

			}
		}

		.white-content {
			width: 94%;
			margin-left: 3%;
			height: 450rpx;
			border-radius: 50rpx;
			background-color: #fff;
			position: relative;
			padding: 50rpx;

			.white-title {
				font-size: 32rpx;
			}

			.white-second {
				font-size: 28rpx;
				color: #999999;
				margin-top: 10rpx;
			}

			.white-center {
				margin-top: 50rpx;
				font-size: 35rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				font-weight: 600;

				.center-img {
					width: 45rpx;
					height: 35rpx;
					margin-left: 20rpx;
				}
			}
		}
	}

	.finish-button {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 60%;
		height: 90rpx;
		margin: 0rpx auto;
		margin-bottom: 50rpx;
		margin-top: 20rpx;
		color: #fff;
		background: linear-gradient(to left, #00C9FF, #0076FF);
		border-radius: 35rpx;
		font-size: 33rpx;
	}

	.back-right {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 25%;
		height: 80rpx;
		margin-right: 50rpx;
		// margin: 0rpx auto;
		// margin-bottom: 50rpx;
		margin-top: 50rpx;
		color: #fff;
		background: linear-gradient(to bottom, #00C9FF, #0076FF);
		border-radius: 30rpx;
		font-size: 33rpx;
	}

	.white-button {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 60%;
		height: 90rpx;
		margin: 0rpx auto;
		margin-bottom: 50rpx;
		margin-top: 20rpx;
		background: linear-gradient(to bottom, #f3f3f5, #dee4e9);
		border-radius: 35rpx;
		font-size: 33rpx;
	}
</style>