<template>
	<view id="mancont">
		<view>
			<up-swiper
			  height="500rpx"
			  keyName="picUrl"
			  :list="imglist"
			  indicatorMode="line"
			  radius="0"
			  :indicator="false"
			  circular
			/>
		</view>
			<view v-if="!islogin" class="kuaijrk" style="position: relative;margin-top: -50rpx;background: #fff;">
				<view style="display: flex;align-items: center;">
					<view style="width: 70rpx;height: 70rpx;border-radius: 50%;overflow: hidden;">
						<image style="width: 100%;height: 100%;" src="../../static/img/jrwm.png" />
					</view>
					<view>未登录</view>
				</view>
				<!--@tap="getUser"-->
				<view @tap="topage('/pages/login/index')" style="width: 180rpx;height:64rpx;background: #00aa7f;text-align:center;color:#fff;border-radius:10rpx;line-height: 64rpx;">去登录</view>
			</view>
			<view v-else class="kuaijrk" style="position: relative;margin-top: -50rpx;align-items:center;background: #fff;">
				<view @tap="topage('/minePages/userInfor/index')" style="display: flex;width:50%;align-items: center;">
					<view style="width: 70rpx;height: 70rpx;border-radius: 50%;overflow: hidden;">
						<image style="width: 100%;height: 100%;" :src="toux()" />
					</view>
					<view class="niche">{{username()}}</view>
				</view>
				<!-- <view>
					<view style="font-size: 36rpx;">5</view>
					<view style="font-size: 26rpx;color: #8e8a8a;">优惠券</view>
				</view> -->
				<view @tap="topage('/minePages/account/index')">
					<view style="font-size: 36rpx;">{{account.totalAmount?account.totalAmount/100:0}}</view>
					<view style="font-size: 26rpx;color: #8e8a8a;">余额</view>
				</view>
			</view>
			<view class="kuaijrk">
				<template v-if="islogin">
					<view @tap="topage('/minePages/order/index')">
						<image src="../../static/img/cd2.png" />
						<view>我的订单</view>
					</view>
					<view @tap="topage('/minePages/recharge/index')">
						<image src="../../static/img/chongz.png" />
						<view>充值中心</view>
					</view>
					<view @tap="topage('/minePages/reserlist/index')">
						<image src="../../static/img/shiyxy.png" />
						<view>预约记录</view>
					</view>
				</template>
				<template v-else>
					<view @tap="wdltip()">
						<image src="../../static/img/cd2.png" />
						<view>我的订单</view>
					</view>
					<view @tap="wdltip()">
						<image src="../../static/img/chongz.png" />
						<view>充值中心</view>
					</view>
					<view @tap="wdltip()">
						<image src="../../static/img/shiyxy.png" />
						<view>预约记录</view>
					</view>
				</template>
				<view>
					<image src="../../static/img/kefu.png" />
					<view>客服中心</view>
				</view>
				<!--topage('/homePages/agreement/index')-->
				<!-- <view @tap="showxy()">
					<image src="../../static/img/shiyxy.png" />
					<view>使用协议</view>
				</view> -->
				<!-- <view>
					<image src="../../static/img/jrwm.png" />
					<view>加入我们</view>
				</view> -->
			</view>
	
		
	</view>
	<!--  @callouttap="getdh()"-->
	<map
	  :style="{width:'100%',height: height}"
	  :latitude="latitude"
	  :longitude="longitude"
	  :markers="covers"
	  :scale="10"
	  :show-location="true"
	  @markertap="markertap"
	>
		<!-- <template #callout>
			<cover-view style="width:200px;height:200px;background:#fff;" :marker-id="0">
				<cover-view>1号换电站</cover-view>
				<cover-view  style="width: 100rpx;height:60rpx;line-height:60rpx;text-align:center;background:#00aa00;color:#fff;">导航</cover-view>
			</cover-view>
		</template> -->
	</map>
	<view v-if="showxq" class="dibucoten">
		<view style="margin-bottom: 10rpx;padding-bottom:10rpx;font-size: 38rpx;color: #00aa7f;border-bottom:1px #00aa7f dashed;">{{hdzname}}</view>
		<view>营业时间：<text style="color: #5f5f5f;">8:30 - 17:30</text></view>
		
		<view style="display: flex;justify-content: space-between;">
			<view style="padding-top: 8rpx;">距您 <text style="color: #5f5f5f;">4.5km</text></view>
			<view @tap="getdh()" style="width: 150rpx;height: 60rpx;line-height: 60rpx;text-align: center;background: #00aa7f;color: #fff;border-radius: 10rpx;">导航</view>
		</view>
	</view>
	<view v-if="islogin" @tap="topage(`/homePages/reservation/index?hdzcode=${hdzcode}&phoneNumber=${userInfo.phoneNumber}`)" class="yuyue">预 约</view>
	<view v-else @tap="wdltip()" class="yuyue">预约</view>
	<!--xyshow-->
	<up-popup 
	 :show="xyshow" 
	 mode="bottom" 
	 round="50"
	 :closeOnClickOverlay="true"
	 >
		<view style="box-sizing: border-box;padding: 20rpx;background: #fff;">
			<view style="margin-bottom: 20rpx;padding-bottom:20rpx;font-size: 40rpx;text-align: center;color: #00aa7f;border-bottom: 1px #00aa7f dashed;">伊特换电使用协议</view>
			<view style="height: 600rpx;overflow-y: auto;">
				<view style="padding: 25rpx 25rpx 50rpx;font-size: 26rpx;">
					<view style="padding-bottom: 30rpx;font-weight: bold;text-align: center;">{{xyobj.title}}</view>
					
					 <scroll-view scroll-y="true" style="height: 600rpx;">
					   <up-parse  :content="decodeURIComponent(xyobj.content)"></up-parse>
					</scroll-view>
				</view>
			</view>
			<!-- <view style="display: flex;align-items: center;;padding-top: 10rpx;">
				<label class="radio"><radio value="r1" checked="true">已阅读并同意</radio></label>
				<view @tap="topage('/minePages/agreement/index?type=1')" style="padding: 0 10rpx;color: #ffaa00;">《服务条款》</view>
				<view @tap="topage('/minePages/agreement/index?type=2')" style="color: #ffaa00;">《隐私协议》</view>
			</view> -->
			<view class="xybtns">
				<view @tap="btnshan(2)" style="background: #fff;border:1px #8e8a8a solid;color: #000;">取消</view>
				<view  @tap="btnshan(1)">同意</view>
			</view>
		</view>
	</up-popup>
</template>

<script setup lang="ts">
import { ref,reactive,watch,getCurrentInstance  } from 'vue'
import { onLoad,onShow,onTabItemTap } from '@dcloudio/uni-app'
import { 
	login,
	getUser,
	gethdz,
	loginstate,
	swiperimg,
	agreement,
	getInfo,
	getaccou
} from '@/utils/service'

let height = ref('')
let islogin = ref(false)
let PhoneNumber = ref('')
let	covers =ref<any[]>([])
let hdzcode = ref('')
let imglist = ref<any[]>([])

uni.removeStorageSync('wxuid')
uni.removeStorageSync('wxToken')
uni.removeStorageSync('PhoneNumber')
uni.removeStorageSync('Init')

let xyobj = ref<any>({})
let account = ref<any>({})

let isinit = true

onLoad((opt:any) => {
	hdzcode.value = opt.hdzcode
	if(uni.getStorageSync('wxuid')){
		loginstate({
			wuid:uni.getStorageSync('wxuid')
		}).then((rps:any) => {
			if(rps.data && rps.data.wxToken){
				uni.setStorageSync('wxToken',rps.data.wxToken)
			}
			getinfo()
		})
	}
})

onShow(() => {
	xyshow.value = false
	uni.showTabBar()
	//判断是否登录
	if(uni.getStorageSync('wxuid')){
		islogin.value = true
		getinfo()	//??
		// if(!isinit){
		// 	getinfo()
		// }else{
		// 	isinit = false
		// }
	}else{
		islogin.value = false
		PhoneNumber.value = ''
		covers.value = []
		//hdzcode.value = ''
		imglist.value = []
		if(!uni.getStorageSync('Init')){
			showxy()
		}
	}
	const instance = getCurrentInstance()
	const query = uni.createSelectorQuery().in((instance as any).proxy)
	
	query.select('#mancont').boundingClientRect(v => {
		uni.getSystemInfo({
		  success: n => {
		    // 屏幕可用高度 减去 其他元素高度
		   height.value = (n.windowHeight - (v as any).height + 20)+'px'
		  }
		})
	})
    .exec()
})

//获取经纬度
let latitude = ref(37.844522)
let	longitude = ref(114.530428)
let hdzname = ref('')

let xyshow = ref(false)

let userInfo = reactive<any>({
	phoneNumber:'',
	avatarUrl:'',
	name:'',
	nickName:''
})

function username() {
	if(userInfo.phoneNumber){
		return userInfo.phoneNumber
	}else if(userInfo.nickName){
		return userInfo.nickName
	}else if(userInfo.name){
		return userInfo.name
	}
	return '微信用户'
}

function getinfo(){
	//获取轮播图
	swiperimg({
		appid:'wx2ab384cf1e6f85a1',
		type:2
	}).then((rps:any) => {
		imglist.value = rps.data
	})
	
	//获取换电站
	covers.value.splice(0)
	gethdz({
		//plateNum:formdata.plateNum
	}).then((rps:any) => {
		if(rps.data && rps.data.length > 0){
			 rps.data.forEach((n:any,i:any) => {
				let jwd = n.locationPoint?n.locationPoint.split(','):[]
				covers.value.push({
					id:i,
					latitude: jwd[0]?jwd[0]:'',
					longitude: jwd[1]?jwd[1]:'',
					width:20,
					height:30,
					options: {
					  isStore: true,
					  status: 1,
					  xian: 12,
					  all: 20
					},
					callout: {
					  content: n.name,
					  bgColor:'#00aa7f',
					  color:'#fff',
					  fontSize:'30rpx',
					  padding:'10rpx',
					  borderRadius:'20rpx',
					  display: 'BYCLICK'	//点击显示
					}
				})
			})
		}
	})
	
	//获取用户信息
	getInfo({
		wuid:uni.getStorageSync('wxuid')
	}).then((rps:any) => {
		uni.setStorageSync('userInfor',rps.data)
		userInfo.phoneNumber = rps.data.phoneNumber?rps.data.phoneNumber:''
		userInfo.nickName = rps.data.nickName?rps.data.nickName:''
		userInfo.avatarUrl = rps.data.avatarUrl?rps.data.avatarUrl:''
		userInfo.name = rps.data.name?rps.data.name:''
	})
	
	//获取账户信息
	getaccou(uni.getStorageSync('wxuid')).then((rps:any) => {
		if(rps.data.records){
			account.value =	rps.data.records[0]
			uni.setStorageSync('totalAmount', rps.data.records[0].totalAmount)
			uni.setStorageSync('walletCode', rps.data.records[0].code)
		}
	})
}

function toux() {
	return userInfo.avatarUrl?userInfo.avatarUrl:'../../static/img/toux.png'
}

//页面跳转
function topage(url:string){
	uni.navigateTo({
		url
	})
}

function wdltip() {
	uni.showToast({
		title:'请您先登录',
		icon:'none'
	})
}

function getdh() {
	uni.openLocation({
		latitude:latitude.value*1,
		longitude:longitude.value*1,
		address:hdzname.value,
		success() {
			console.log('success');
		},
		fail(err) {
			console.error('打开地图失败', err);
		}
	})
}

//点击地图标注
let showxq = ref(false) 
function markertap(v:any) {
	showxq.value = true
	
	 const markerId = v.markerId
	  // 更新markers数组，重新渲染地图
	  covers.value = covers.value.map((n:any) => {
		if(n.id === markerId) {
			console.log(n,'123')
		  // 当前点击的标注显示气泡
		  n.callout.display = 'ALWAYS'
		  hdzname.value = n.callout.content
		  latitude.value = n.latitude
		  longitude.value = n.longitude
		}else{
		  // 其他标注隐藏气泡
		  n.callout.display = 'BYCLICK'
		}
		return n
	  })
}

//协议
function showxy() {
	agreement({
		appid:'wx2ab384cf1e6f85a1',	//uni.getStorageSync('wxuid'),
		type:'1'
	}).then((rps:any) => {
		xyobj.value = rps.data[0]
		uni.hideTabBar()
		xyshow.value = true
	})
}

function btnshan(type:number = 1) {
	if(type == 1){
		getUser().then(() => {
			xyshow.value = false
			uni.showTabBar()
			islogin.value = true
			
			//是否初次使用
			uni.setStorageSync('Init',true)
			
			getinfo()
			setTimeout(()=> {
				uni.getLocation({
					type: 'wgs84',
					success(res) {
						longitude.value = res.longitude
						latitude.value = res.latitude
					},
					fail(rps) {
						console.log(rps)
					}
				})
			},1000)
		})
	}else{
		uni.exitMiniProgram({
			success: function() {
				console.log('退出小程序成功')
			},
			fail: function(err) {
				console.log('退出小程序失败', err)
			}
		})
		// xyshow.value = false
		// uni.showTabBar()
	}
}

</script>

<style lang="scss" scoped>
page{
	background: #ccc;
}
.top {
	width: 100%;
	background: #00aa00;
	view{
		padding: 30rpx 0;
		font-size: 40rpx;
		color: #fff;
		text-align: center;
	}
}
.kuaijrk{
	display: flex;
	justify-content: space-between;
	margin: 20rpx;
	padding: 20rpx;
	border-radius: 20rpx;
	font-size: 30rpx;
	box-shadow: 0 0 20px 2px rgba(0, 170, 0, 0.5);
	>view{
		width: 25%;
		text-align: center;
		//color: #00aa00;
		//font-weight: bold;
		image{
			width: 70rpx;
			height: 70rpx;
		}
	}
}
.dibucoten{
	box-sizing: border-box;
	position: fixed;
	width: 90%;
	//height: 200rpx;
	padding: 30rpx;
	border-radius: 10rpx;
	background:#fff; //#00aa00;
	left: 5%;
	bottom: 20rpx;
	box-shadow: 0 0 20px 2px rgba(0, 170, 0, 0.5);
}
.xybtns{
	box-sizing: border-box;
	display: flex;
	width: 100%;
	justify-content: space-between;
	padding:20rpx 0 100rpx 0;
	>view{
		display: flex;
		box-sizing: border-box;
		width: 300rpx;
		height: 80rpx;
		align-items: center;
		justify-content: center;
		border-radius: 50rpx;
		color: #fff;
		background: #00aa00;
	}
}
.yuyue{
	position: fixed;
	right: 5%;
	bottom: 300rpx;
	width: 120rpx;
	height: 120rpx;
	line-height: 120rpx;
	text-align: center;
	background: #00aa00;
	border-radius: 50%;
	color: #fff;
	box-shadow: 0 0 20px 2px rgba(0, 170, 0, 0.5);
}
.niche{
	width: 200rpx;
	padding-left: 20rpx;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
	text-align: left;
}
</style>
