<template>
	<view class="content">
		<!-- 店铺页面组件 -->
		<view class="top-bar" v-if="isLogin" @click="navTo('pages/user/equipment/index')">点击查看设备情况</view>
		<view class="login-bar" v-else>
			<text class="info">授权登录、获取头像昵称，加入安博驰</text>
			<text class="login" @click="navTo('pages/user/user')">立即登录</text>
		</view>
		<map id="map" class="map" :scale="scale" :show-location="true" :latitude="latitude"
			:longitude="longitude"></map>
		<view class="bottom-bar" @click="scan()">扫码设备二维码下单租赁</view>
		<u-modal @confirm="showNotice = false" @cancel="hideNotice" v-model="showNotice" title="注意事项" :content='content'
			showCancelButton cancel-text="不再提醒">
			<view class="slot-content">
				<text> {{content}}</text>
			</view>
		</u-modal>
	</view>
</template>

<script>
	import {
		userId
	} from '@/config.js';
	import {
		getUser
	} from '@/websoft/api/user.js'
	import {
		login
	} from '@/websoft/api/login.js'
	import store from '@/store/index.js'
	import storage from '@/utils/storage'
	import {
		ACCESS_TOKEN,
		USER_ID
	} from '@/store/mutation-types'
	export default {
		data() {
			return {
				user: {},
				avatar: '/static/logo.png',
				nickName: 'Hello',
				latitude: 22.766777,
				longitude: 108.375152,
				scale: 10,
				isLogin: false,
				// #ifdef MP-ALIPAY
				canIUseAuthButton: my.canIUse('button.open-type.getAuthorize'),
				// #endif
				showNotice: false,
				content: `
注意事项
△禁止将电池浸入水中或投入火中请将电池远离热源及儿童触及不到的地方
△禁止将锂电池正负极端口与金属物质接触，以避免短路和发生危险
△出现充电器外观损坏、充电器无法正常工作的情况，请客户及时归还交回，并联系我司更换
△禁止私自拆解电池组
△请在使用锂电池前检查其外观是否有任何损坏，如变形、裂纹或漏液等△使用锂电池时，请确保不要过度放电或充电，以避免电池损坏公请使用本公司适配的专用充电器放电后让电池冷却30分钟再充电
△充电位置严禁阻碍人员疏散及逃生的路线
△在使用期间如出现任何问题，请立即通知租赁服务商
△当不再需要使用锂电池时，请将其归还给租赁服务商，并确保其在运输过程中保证安全
△使用期间请按时或提前缴纳租金，租金按月计算，如不足一个月的按一个月计算，退租时订单有逾期则收取10元1天逾期费用
△因个人原因使用不当引起的事故及电池故障租赁服务商不承担任何责任如果您有任何疑问或需要进一步的支持，请随时联系我们的微信或电话17776499804,我们将竭诚为您解答并提供解决方案。
`
			}
		},
		onLoad() {

			const app = this
			app.getLocation(res => {
				if (res.latitude && res.longitude) {
					app.latitude = res.latitude
					app.longitude = res.longitude
					app.scale = 16
				}
			})

			const hideNotice = uni.getStorageSync("hideNotice");
			this.showNotice = !hideNotice

		},
		onShow() {
			this.getUserInfo()
		},
		methods: {
			hideNotice() {
				uni.setStorageSync("hideNotice", true)
				this.showNotice = false
			},
			getUserInfo() {
				const {
					form
				} = this
				const app = this
				getUser().then(res => {
					if (res.code == 0 && res.data.username != 'www') {
						app.isLogin = true
					}
				})

			},
			// 检查是否登录
			checkLogin() {
				if (!!store.getters.userId && store.getters.userId != userId) {
					this.isLogin = true
				}
			},
			// 获取用户坐标
			// 参考文档：https://uniapp.dcloud.io/api/location/location?id=getlocation
			getLocation(callback) {
				const app = this
				uni.getLocation({
					success: callback,
					fail() {
						app.$toast('获取定位失败，请点击右下角按钮重新尝试定位')
						app.isAuthor = false
					}
				})
			},
			// 跳转页面
			navTo(url) {
				uni.$u.route(url);
			},
			scan() {
				const app = this
				// 只允许从相机扫码
				// uni.scanCode({
				//   success (res) {
				// 			console.log("res: ",res);
				// 			// app.$navTo('package/equipment/checkout/index')
				// 			// // app.$navTo(res.path)
				// 			my.alert({ title: res.code });
				//   }
				// })
				my.ap.openAlipayApp({
					appCode: 'alipayScan',
					success: res => {
						console.log('openAlipayApp success', res);
					},
					fail: err => {
						console.log('openAlipayApp fail', err);
					}
				});

				// my.scan({
				//   scanType: ['qrCode'],
				//   autoDecodeCharset: true,
				//   success: res => {
				// 	  console.log("res: ",res);
				//     my.ap.openAlipayApp()
				//   },
				// });
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		background: #fff;
	}

	.top-bar {
		position: fixed;
		top: 10rpx;
		left: 25rpx;
		line-height: 50rpx;
		height: 50rpx;
		z-index: 1000;
		background-color: #fff;
		width: 700rpx;
		border-radius: 12rpx;
		text-align: center;
	}

	.get-phone-number {
		position: fixed;
		top: 300rpx;
		left: 25rpx;
		z-index: 1000;
		line-height: 70rpx;
		height: 70rpx;
		background-color: #0f80ff;
		color: #fff;
		width: 700rpx;
		margin: 25rpx auto;
		border-radius: 12rpx;
		text-align: center;
	}

	.bottom-bar {
		position: fixed;
		/* #ifdef H5 */
		bottom: 100rpx;
		/* #endif */
		/* #ifndef H5 */
		bottom: 10rpx;
		/* #endif */
		left: 25rpx;
		z-index: 1000;
		line-height: 70rpx;
		height: 70rpx;
		background-color: #0f80ff;
		color: #fff;
		width: 700rpx;
		margin: 25rpx auto;
		border-radius: 12rpx;
		text-align: center;

	}

	.login-bar {
		position: fixed;
		top: 10rpx;
		left: 25rpx;
		z-index: 1000;
		line-height: 70rpx;
		height: 70rpx;
		color: #fff;
		width: 700rpx;
		margin: 17rpx auto;
		display: flex;
		justify-content: space-between;

		.info {
			padding-left: 20rpx;
			background-color: #000000;
			opacity: 0.5;
			width: 100%;
		}

		.login {
			width: 200rpx;
			padding: 0 20rpx;
			background-color: #0f80ff !important;
			opacity: 1;
		}
	}

	.slot-content {
		padding: 30rpx;
	}
</style>