<template>
	<JHeaderTitle title="登录确认" bgColor="#fff" imgUrl="/static/iconImg/icon-x.svg" @back="back"></JHeaderTitle>
	<view class="scan-content">
		<view class="computer">
			<image src="/static/iconImg/computer.svg" mode=""></image>
			<text>您正在登录代理商管理系统网站</text>
		</view>
		<view class="btn confirm" @tap="codeOk('confirmed')">确认登录</view>
		<view class="btn cancel" @tap="codeOk('canceled')">取消登录</view>
	</view>
</template>

<script setup>
import JHeaderTitle from '@/components/newComponents/JHeaderTitle/JHeaderTitle'
import { ref, reactive } from 'vue'
import { $scanCodeLogin } from '@/http/apiManager.js'
import { onLoad } from '@dcloudio/uni-app'

const code = ref('')
onLoad((option) => {
	console.log(option)
	code.value = option.id
})

// 点击左上交的取消按钮
const back = () => codeOk('canceled')

const codeOk = (val) => {
	$scanCodeLogin({ qrcodeNo: code.value, qrcodeStatus: val })
		.then((res) => {
			uni.showToast({
				title: val == 'confirmed' ? '登录成功' : '已取消'
			})
			setTimeout(function () {
				uni.navigateBack({})
			}, 1000)
		})
		.catch((err) => {
			console.log(err)
		})
}
</script>

<style scoped lang="scss">
.scan-content {
	height: 100%;
	width: 100%;
	display: flex;
	align-items: center;
	flex-direction: column;
	.computer {
		margin-top: 260rpx;
		margin-bottom: 150rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		image {
			width: 200rpx;
			height: 200rpx;
		}
		text {
			line-height: 46px;
			font-size: 33rpx;
			color: #000000;
		}
	}
	.btn {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 360rpx;
		height: 110rpx;
		border-radius: 20rpx;
		background: #4dab68;
		font-size: 33rpx;
	}
	.confirm {
		color: #fff;
		background-color: $primaryColor;
	}
	.cancel {
		margin-top: 35rpx;
		color: #666;
		background: transparent;
	}
}
</style>
