<template>
	<view class="section">
		<!-- 登录成功展示 -->
		<view class="flex padding justify-between" v-if="isLogin==true">
			<view class=" padding-sm  radius">
				<view class="flex align-center">
					<view class="radius avatar" @click="personalDetails">
						<!-- <view class="cu-avatar round "> -->
						<!-- avatar -->
						<u-avatar :src="avatar" :size="60" mode="aspectFit"></u-avatar>
						<!-- <u-avatar src="/static/user/headPortrait.svg"></u-avatar> -->
						<!-- <image v-if="avatar!=null" :src="avatar" mode="aspectFit"></image> -->
						<!-- <image v-else src="/static/user/headPortrait.svg" mode="aspectFit"></image> -->
						<!-- </view> -->
					</view>
					<view class="padding-sm  radius" @click="personalDetails">
						{{userName}}
						<view class="padding-top-xs text-sm text-gray">
							{{phone?phone:''}}
						</view>
					</view>
					<uv-tags text="未审核用户" size="mini" type="error" v-if="realNameAuthFlag == 0"></uv-tags>
					<uv-tags text="已审核" size="mini" type="success" v-if="realNameAuthFlag == 1"></uv-tags>
					<uv-tags text="审核中..." size="mini" type="warning" v-if="realNameAuthFlag == 2"></uv-tags>

				</view>
			</view>
			<view class="padding-sm radius">
				<image class="png margin-top-sm" src="/static/user/Vector.svg" mode="aspectFit" @click="goSetting">
				</image>
			</view>
		</view>
		<!-- 未登录展示 -->
		<view class="flex padding justify-between" v-if="isLogin==false">
			<view class=" padding-sm  radius">
				<view class="flex align-center">
					<view class="radius">
						<view class="cu-avatar lg round ">
							<image
								src="https://www.zzpower.net/admin-api/infra/file/4/get/3acc373550998087bad0b6ae5a3651f362ec98d312ff82cc9482234fbe1c5cd0.svg"
								mode="aspectFit"></image>
						</view>
					</view>
					<view class="padding-sm  radius">
						<button class="cu-btn round line-gray margin-left-sm" @click="gologin">立即登录</button>
					</view>
				</view>
			</view>
		</view>
		<view class="cu-card ">
			<view class="cu-item shadow padding-lr-sm">
				<view class="flex solids-bottom padding-tb-sm justify-between" @click="accountBalance(1)"
					v-if="now_version == '个人版'">
					<view class="flex">
						<image class="titleImg" src="../../static/user/balance.svg" mode="scaleToFill"></image>
						<view class="titleFont">个人账户</view>
					</view>
					<view><text class="lg text-gray cuIcon-right padding-top-xs"></text></view>
				</view>
				<view class="flex solids-bottom padding-tb-sm justify-between" @click="accountBalance(2)"
					v-if="now_version == '车队版' ">
					<view class="flex">
						<image class="titleImg" src="../../static/user/balance.svg" mode="scaleToFill"></image>
						<view class="titleFont">个人账户</view>
					</view>
					<view><text class="lg text-gray cuIcon-right padding-top-xs"></text></view>
				</view>
				<view class="flex solids-bottom padding-tb-sm justify-between" @click="accountBalance(3)"
					v-if="now_version == '车队版' ">
					<view class="flex">
						<image class="titleImg" src="../../static/user/balance.svg" mode="scaleToFill"></image>
						<view class="titleFont">车队账户</view>
					</view>
					<view><text class="lg text-gray cuIcon-right padding-top-xs"></text></view>
				</view>
				<view class="flex solids-bottom padding-tb-sm justify-between" @click="personalDetails">
					<view class="flex">
						<image class="titleImg" src="../../static/user/chargingDeclaration.svg" mode="scaleToFill">
						</image>
						<view class="titleFont">个人信息</view>
					</view>
					<view class="flex">
						<text class="lg text-gray cuIcon-right padding-top-xs"></text>
					</view>
				</view>
				<view class="flex padding-tb-sm justify-between" @click="gobillingPage">
					<view class="flex">
						<image class="titleImg" src="../../static/user/myOrder.svg" mode="scaleToFill">
						</image>
						<view class="titleFont">套餐购买</view>
					</view>
					<view class="flex">
						<text class="lg text-gray cuIcon-right padding-top-xs"></text>
					</view>
				</view>
				<view class="flex padding-tb-sm justify-between" @click="gobillingPage_my">
					<view class="flex">
						<image class="titleImg" src="../../static/user/myOrder.svg" mode="scaleToFill">
						</image>
						<view class="titleFont">我的套餐</view>
					</view>
					<view class="flex">
						<text class="lg text-gray cuIcon-right padding-top-xs"></text>
					</view>
				</view>
			</view>
		</view>
		<view class="cu-card ">
			<view class="cu-item shadow padding-lr-sm">
				<view class="flex solids-bottom padding-tb-sm justify-between" @click="vehicleCertification"
					v-if="now_version == '个人版' ">
					<view class="flex">
						<image class="titleImg" src="../../static/user/motor.svg" mode="scaleToFill"></image>
						<view class="titleFont">车辆认证</view>
					</view>
					<view><text class="lg text-gray cuIcon-right padding-top-xs"></text></view>
				</view>
				<view class="flex solids-bottom padding-tb-sm justify-between" @click="personnelCertification">
					<view class="flex">
						<image class="titleImg" src="../../static/user/shiftTurnover.svg" mode="scaleToFill"></image>
						<view class="titleFont">个人身份认证</view>
					</view>
					<view><text class="lg text-gray cuIcon-right padding-top-xs"></text></view>
				</view>
				<!-- solids-bottom -->
				<view :class="{'flex':true, 'padding-tb-sm':true, 'justify-between':true,'solids-bottom': true}"
					@click="gomotorCade" v-if="now_version == '个人版' ">
					<view class="flex">
						<image class="titleImg" src="../../static/user/driverhandover.svg" mode="scaleToFill"></image>
						<view class="titleFont">车队绑定</view>
					</view>
					<view><text class="lg text-gray cuIcon-right padding-top-xs"></text></view>
				</view>
				<view :class="{'flex':true, 'padding-tb-sm':true, 'justify-between':true,'solids-bottom': true}"
					@click="gomotorCade_mycar">
					<view class="flex">
						<image class="titleImg" src="../../static/user/driverhandover.svg" mode="scaleToFill"></image>
						<view class="titleFont">{{ now_version == '车队版'? '车队车辆': '我的车辆'  }}</view>
					</view>
					<view><text class="lg text-gray cuIcon-right padding-top-xs"></text></view>
				</view>
				<!--  -->
				<view class="flex padding-tb-sm justify-between" @click="goShiftTurnover">
					<view class="flex">
						<image class="titleImg" src="../../static/user/shiftTurnover.svg" mode="scaleToFill"></image>
						<view class="titleFont">修改密码</view>
					</view>
					<view><text class="lg text-gray cuIcon-right padding-top-xs"></text></view>
				</view>
			</view>
		</view>
		<uv-notify ref="errornotify" message="当前无操作权限,请审核通过后再试" type="error"></uv-notify>
		<!-- tabbar -->
		<cc-myTabbar :tabBarShow="2" @handle_scan="handle_scan"></cc-myTabbar>
		<uv-modal ref="startswapmodal" title="提示" content='当前站已验证完成,可以进行换电,请点击确认开始换电'
			@confirm="handle_swaping_pay"></uv-modal>
		<uv-modal ref="startchargmodal" title="提示" content='当前枪已验证完成,可以进行充电,请点击开始充电'>
			<template v-slot:confirmButton>
				<view class="" style="margin:0 20px 20px 20px;">
					<button type="primary" @click="startconfirm" style="font-size: 24rpx;">开始充电</button>
				</view>
			</template>
		</uv-modal>
	</view>
</template>

<script setup>
	import config from '@/common/config/config.js';
	import {
		reactive,
		ref,
	} from "vue";
	import {
		onLoad,
		onShow,
		onReachBottom
	} from "@dcloudio/uni-app";

	import {
		globalStore
	} from '../../stores/globalData.js';
	const loginStore = globalStore()
	// 声明变量
	// const dataCode = ref()
	const isLogin = ref(false) //判断是否登录
	const userName = ref('默认用户')
	const phone = ref()
	const avatar = ref()
	const realNameAuthFlag = ref(0)
	const tabBarList = ref([{
			"isTabBar": true,
			"pagePath": "pages/index/index",
			"text": "首页",
			"iconPath": "static/tabbar/home.png",
			"selectedIconPath": "static/tabbar/home_hl.png"
		},
		{
			"text": "扫一扫",
			"iconPath": "static/home/scan.png",
			"selectedIconPath": "static/tabbar/home_hl.png"
		},
		{
			"isTabBar": true,
			"pagePath": "pages/userCenter/userCenter",
			"text": "个人中心",
			"iconPath": "static/tabbar/me.png",
			"selectedIconPath": "static/tabbar/me_hl.png"
		}
	])
	const now_version = ref()
	onLoad(() => {

	})
	onShow(() => {
		// console.log(loginStore,'loginStore');
		isLogin.value = loginStore.isLogin
		now_version.value = uni.getStorageSync("version")
		if (isLogin.value == true) {
			// 展示头像与用户信息
			uni.$request({
				url: config.baseUrl + 'app-api/member/user/get',
			}).then((res) => {
				// console.log(res,'获取基本信息');
				if (res.data.code == 0) {
					avatar.value = res.data.data.avatar
					userName.value = res.data.data.userName
					phone.value = res.data.data.mobile
					realNameAuthFlag.value = res.data.data.realNameAuthFlag
					uni.setStorageSync("realNameAuthFlag", res.data.data.realNameAuthFlag)
					uni.setStorageSync("teamId", res.data.data.teamId)
					uni.setStorageSync("mobile", res.data.data.mobile)
					uni.setStorageSync("captainOrNot", res.data.data.captainOrNot)
					// console.log(uni.getStorageSync("version"), '----');
					if (uni.getStorageSync("version") == "") {
						uni.setStorageSync("version", "个人版")
					}
				}
			})
		}
	})
	const clickTab = () => {

	}
	const errornotify = ref(null)
	// 去设置页面
	const goSetting = () => {
		uni.navigateTo({
			url: './setting/setting'
		})
	}
	const gologin = () => {
		uni.navigateTo({
			url: '../../pagesCenter/login/enter'
		})
	}
	const personalDetails = () => {
		if (!uni.getStorageSync("userInfo")) {
			uni.showToast({
				title: '请先完成登录',
				duration: 2000,
				icon: 'error'
			});
			return;
		} else if (realNameAuthFlag.value != 1) {
			errornotify.value.show()
			return
		} else {
			uni.navigateTo({
				url: './personalDetails/personalDetails'
			})
		}


	}
	const gobillingPage = () => {
		// console.log('点击了')
		if (!uni.getStorageSync("userInfo")) {
			uni.showToast({
				title: '请先完成登录',
				duration: 2000,
				icon: 'error'
			});
			return;
		} else if (realNameAuthFlag.value != 1) {
			errornotify.value.show()
			return
		} else {
			uni.navigateTo({
				url: '../../pagesCenter/billingPage/billingPage'
			})
		}
	}

	const gobillingPage_my = () => {
		// console.log('点击了')
		if (!uni.getStorageSync("userInfo")) {
			uni.showToast({
				title: '请先完成登录',
				duration: 2000,
				icon: 'error'
			});
			return;
		} else if (realNameAuthFlag.value != 1) {
			errornotify.value.show()
			return
		} else {
			uni.navigateTo({
				url: '/pagesCenter/billingPage/billingMean/billingMean'
			})
		}
	}
	const vehicleCertification = () => {
		if (!uni.getStorageSync("userInfo")) {
			uni.showToast({
				title: '请先完成登录',
				duration: 2000,
				icon: 'error'
			});
			return;
		} else if (realNameAuthFlag.value != 1) {
			errornotify.value.show()
			return
		} else {
			uni.navigateTo({
				url: './carIdentification/carIdentification'
			})
		}
	}

	const personnelCertification = () => {
		if (!uni.getStorageSync("userInfo")) {
			uni.showToast({
				title: '请先完成登录',
				duration: 2000,
				icon: 'error'
			});
			return;
		}
		// else if (realNameAuthFlag.value != 1) {
		// 	errornotify.value.show()
		// 	return
		// }
		else {
			uni.navigateTo({
				url: './personneldentification/personneldentification'
			})
		}

	}
	const accountBalance = (type) => {
		if (!uni.getStorageSync("userInfo")) {
			uni.showToast({
				title: '请先完成登录',
				duration: 2000,
				icon: 'error'
			});
			return;
		} else if (realNameAuthFlag.value != 1) {
			errornotify.value.show()
			return
		} else {
			let url_push = ''
			if (type == 1) {
				url_push = '/pagesCenter/accountBalance/accountBalance'
			} else if (type == 2) {
				url_push = '/pagesCenter/accountBalancePersonnelCar/accountBalancePersonnelCar'
			} else {
				url_push = '/pagesCenter/accountBalanceTeam/accountBalanceTeam'
			}
			uni.navigateTo({
				url: url_push
			})

		}
	}
	const goAbout = () => {
		if (!uni.getStorageSync("userInfo")) {
			uni.showToast({
				title: '请先完成登录',
				duration: 2000,
				icon: 'error'
			});
			return;
		} else if (realNameAuthFlag.value != 1) {
			errornotify.value.show()
			return
		} else {
			uni.navigateTo({
				url: './about/about'
			})
		}

	}
	const gomotorCade = () => {
		if (!uni.getStorageSync("userInfo")) {
			uni.showToast({
				title: '请先完成登录',
				duration: 2000,
				icon: 'error'
			});
			return;
		} else if (realNameAuthFlag.value != 1) {
			errornotify.value.show()
			return
		} else {
			uni.navigateTo({
				url: '../../pagesCenter/motorCade/motorCade'
			})
		}
	}

	const gomotorCade_mycar = () => {
		if (!uni.getStorageSync("userInfo")) {
			uni.showToast({
				title: '请先完成登录',
				duration: 2000,
				icon: 'error'
			});
			return;
		} else if (realNameAuthFlag.value != 1) {
			errornotify.value.show()
			return
		} else {
			uni.navigateTo({
				url: '../../pagesCenter/motorCadeMy/motorCadeMy'
			})
		}
	}
	const goShiftTurnover = () => {
		if (!uni.getStorageSync("userInfo")) {
			uni.showToast({
				title: '请先完成登录',
				duration: 2000,
				icon: 'error'
			});
			return;
		} else {
			uni.navigateTo({
				url: `/pagesCenter/login/changepassword?mobile=123`
			})
		}
	}
	const swap_pay_stationNo = ref('')
	const startchargmodal = ref(null)
	const startswapmodal = ref(null)
	const handle_scan = () => {
		uni.scanCode({
			scanType: ['qrCode'],
			success: async function(res) {
				let res_result = JSON.parse(res.result)
				if (res_result.hasOwnProperty('stationNo')) {
					uni.showToast({
						title: '验证成功',
						duration: 1000,
						icon: 'success'
					})
					swap_pay_stationNo.value = res_result.stationNo
					setTimeout(() => {
						startswapmodal.value.open()
					}, 2000)
				} else {
					handle_charging_pay(res_result)
				}

			}
		})
	}
	const handle_swaping_pay = async () => {
		// let stationNo = res_result.stationNo
		await uni.request({
			url: config.baseUrl +
				`app-api/cloud/swapOrder/sendSwap`,
			method: 'POST',
			header: {
				'Content-Type': 'application/x-www-form-urlencoded',
				'Authorization': 'Bearer ' + uni.getStorageSync('token'),
				'tenant-id': 1
			},
			data: {
				stationNo: swap_pay_stationNo.value
			}
		}).then(response => {
			// console.log(response, '验证');
			if (response.data.code == 0) {
				uni.showLoading({
					title: '充电机启动中...请稍后'
				});
				setTimeout(() => {
					uni.hideLoading()
				}, 2000)
			} else {
				uni.showModal({
					title: '错误',
					showCancel: false,
					content: response.data.msg,
					success: function(res) {}
				});
			}

		}).catch((err) => {
			uni.showToast({
				title: '错误,验证失败',
				duration: 2000,
				icon: 'error'
			});
		})
	}
	const check_chargeEqm = ref('')
	const check_gunNo = ref('')
	const handle_charging_pay = async (res_result) => {
		check_chargeEqm.value = res_result.chargeEqm
		check_gunNo.value = res_result.gunNo
		await uni.$request({
			url: config.baseUrl +
				`app-api/cloud/outCharge/confirmGunCanCharging/${res_result.chargeEqm}/${res_result.gunNo}`,
			method: 'GET'
		}).then(response => {
			if (response.data.code == 0) {
				uni.showToast({
					title: '验证成功',
					duration: 1000,
					icon: 'success'
				})
				setTimeout(() => {
					startchargmodal.value.open()
				}, 2000)
			} else {
				uni.showModal({
					title: '错误',
					showCancel: false,
					content: response.data.msg,
					success: function(res) {}
				});
			}

		}).catch((err) => {
			uni.showToast({
				title: '错误,验证失败',
				duration: 2000,
				icon: 'error'
			});
		})
	}
	const startconfirm = async () => {
		startchargmodal.value.close()

		let config_url = ''
		if (uni.getStorageSync("version") == '个人版') {
			config_url = `app-api/cloud/personal/startCharge/${check_chargeEqm.value}/${check_gunNo.value}`
		} else {
			config_url = `app-api/cloud/team/startCharge/${check_chargeEqm.value}/${check_gunNo.value}`
		}
		await uni.$request({
			url: config.baseUrl + config_url
		}).then(res => {
			if (res.data.code == 0) {
				uni.showLoading({
					title: '充电机启动中...请稍后'
				});
				setTimeout(() => {
					uni.hideLoading()
				}, 2000)
				chargorder.value = res.data.data
				setTimeout(() => {
					handle_chargorder()
				}, 6000)
				// uni.navigateTo({
				// 	url: '/pages/order/chargorder/order'
				// })
			} else {
				uni.showToast({
					title: res.data.msg,
					duration: 2000,
					icon: 'error'
				});
			}
			// console.log(res, 'res开始充电');
		}).catch((err) => {

		})
	}
	const handle_chargorder = async () => {
		let config_url = ''
		if (uni.getStorageSync("version") == '个人版') {
			config_url = `app-api/cloud/personal/queryRealTimeOrder/${chargorder.value}`
		} else {
			config_url = `app-api/cloud/team/queryRealTimeOrder/${chargorder.value}`
		}

		clearInterval(timer.value)
		timer.value = null
		await uni.$request({
			url: config.baseUrl + config_url
		}).then(res => {
			// console.log(res, '当前充电订单');
			if (res.data.code == 0) {
				let str = res.data.data
				uni.navigateTo({
					url: '/pages/order/chargorder/detailInf/detailInf?details=' + JSON.stringify(
						str)
				})
			} else {
				uni.showToast({
					title: res.data.msg,
					duration: 2000,
					icon: 'error'
				});
			}
		}).catch((err) => {
			uni.showToast({
				title: '加载失败',
				duration: 2000,
				icon: 'error'
			});
		})
	}
</script>

<style lang='scss' scoped>
	.png {
		width: 50rpx;
		height: 50rpx;
	}

	.section {
		width: 100%;
		height: 100vh;
		background: linear-gradient(180deg, #E4EFFF 0%, rgba(228, 239, 255, 0) 100%);
	}

	.titleImg {
		width: 50rpx;
		height: 50rpx;
	}

	.titleFont {
		font-size: 28rpx;
		color: #000;
		margin-top: 8rpx;
		margin-left: 10rpx;
	}

	.cu-card>.cu-item {
		margin: 0 30rpx 30rpx 30rpx;
	}
</style>