<template>
	<uni-nav-bar left-icon="left" @clickLeft="clickLeft">
		<template #default>
			<view class="default">
				<view :class="navbar == '0' ? 'sn switch' : 'sn'" @click="navbarLeft">SN码</view>
				<view :class="navbar != '0' ? 'jiesuo switch' : 'jiesuo'" @click="navbarRight">解锁密码</view>
			</view>
		</template>
	</uni-nav-bar>
	<view class="query-container">
		<view class="bgc"><uni-search-bar :focus="true" cancelButton="always" v-model="searchValue" @cancel="cancel" @clear="clear"></uni-search-bar></view>
	</view>
</template>

<script lang="ts" setup>
import { ref } from 'vue';

let searchValue = ref();

let navbar = ref('0');

let cancel = () => {
	let page = getCurrentPages();
	console.log(page);
};

let navbarLeft = () => {
	navbar.value = '0';
};

let navbarRight = () => {
	navbar.value = '1';
};

let clear = () => {};

let clickLeft = () => {
	uni.navigateBack();
};
</script>

<style lang="scss" scoped>
::v-deep .uni-navbar__header-container {
	justify-content: center;
	align-items: center;
}

.default {
	display: flex;
	justify-content: flex-start;
	width: 260rpx;
	height: 50rpx;
	font-size: 24rpx;
	border: 2rpx solid #cccccc;
	border-radius: 20rpx;
	color: #4875ea;
	overflow: hidden;
	.sn {
		height: 100%;
		width: 50%;
		border-right: 2rpx solid #cccccc;
		text-align: center;
		line-height: 50rpx;
	}
	.jiesuo {
		height: 100%;
		width: 50%;
		text-align: center;
		line-height: 50rpx;
	}

	.switch {
		background-color: #4875ea;
		color: #fff;
	}
}
.query-container {
	min-height: 100vh;
	background-color: #eceff6;
	.bgc {
		height: 120rpx;
		background-color: #fff;
	}
}
</style>
