<template>
	<view class="sweep">
		<statusBar />
		<view class="sweep_note">
			<view class="sweep_note_view">
				<view class="sweep_note_view_img">
					<image src="/static/image/djk.png" mode="widthFix"></image>
				</view>
				<view>插上</view>
				<view>充电枪</view>
			</view>
			<view class="sweep_note_view">
				<view class="sweep_note_view_img">
					<image src="/static/image/djs.png" mode="widthFix"></image>
				</view>
				<view>点击</view>
				<view>扫码充电</view>
			</view>
			<view class="sweep_note_view">
				<view class="sweep_note_view_img">
					<image src="/static/image/cs.png" mode="widthFix"></image>
				</view>
				<view>点击</view>
				<view>开始充电</view>
			</view>
		</view>

		<view class="sweep_scan" style="margin-top: 300rpx">
			<up-input placeholder="请输入充电枪编号" type="number" border="surround" v-model="value"></up-input>
			<view style="width: 100rpx">
				<up-button type="primary" text="确定" @click="toCd"></up-button>
			</view>
		</view>

		<view class="sweep_scan" style="margin-top: 150rpx">
			<up-button @click="scan" type="primary" shape="circle" text="扫码充电"></up-button>
		</view>
		<!-- <tabbar path="/pages/sweep/sweep" /> -->
	</view>
</template>

<script setup>
import { ref, reactive } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import { useNav } from '@/hooks/useNav.js';
import { urlQuery } from '@/utils/fun.js';
const { nav, navTo } = useNav();

let value = ref('');

onLoad(() => {

});

const scan = async () => {
	uni.scanCode({
		success: function (res) {
			let query = urlQuery(res.result);
			if (!query.num) {
				uni.showToast({
					title: '请扫描正确的设备码',
					icon: 'none'
				});
			} else {
				navTo(`/pages/home/star?id=${query.num}`);
			}
			// navTo(`/pages/home/star?id=${res.result}`);
		}
	});
};

const toCd = async () => {
	if (!value.value) {
		uni.showToast({
			title: '请输入枪号',
			icon: 'none'
		});
		return;
	}
	navTo(`/pages/home/star?id=${value.value}`);
};
</script>

<style scoped lang="scss">
.sweep {
	&_note {
		padding: 0 60rpx;
		@include flex($space: space-between);
		&_view {
			@include flex($direction: column, $space: center);
			font-weight: 800;
			font-size: 32rpx;
			color: #4879e6;

			&_img {
				display: flex;
				align-items: flex-end;
				height: 115rpx;
				margin-bottom: 30rpx;
			}
		}

		&_view:nth-child(1) {
			image {
				width: 151rpx;
				height: 99rpx;
			}
		}
		&_view:nth-child(2) {
			image {
				width: 120rpx;
				height: 99rpx;
			}
		}
		&_view:nth-child(3) {
			image {
				width: 106rpx;
				height: 113rpx;
			}
		}
	}
	&_scan {
		@include flex;
		padding: 0 120rpx;
	}
}
</style>
