<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>
	</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
			}
		},
		onLoad() {
			const app = this
			app.getLocation(res => {
				if(res.latitude &&res.longitude){
					app.latitude = res.latitude
					app.longitude = res.longitude
					app.scale = 16
				}
			})
			
		},
		onShow(){
			this.getUserInfo()
		},
		methods: {
			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;
		  }
	  }
</style>
