<template>
	<view class="user-content content_box">
		<view class="user-header">
			<image class="header-bg" src="../../static/img/bg/userBg.png" />
			<view class="user-info flex">
				<view class="user_photo">
					<image src="../../static/img/empty/userPhoto.png"></image>
				</view>
				<view class="flex_col flex_cen" style="margin-left: 30rpx;" v-if="userInfo.name">
					<text class="user-name" user-select>{{userInfo.name}}</text>
					<text class="user-phone" user-select>{{userInfo.mobile}}</text>
				</view>
				<view class="flex_col flex_cen" style="margin-left: 30rpx;" v-else @click="toLoginPage">
					<text class="user-name" user-select>请点击登录</text>
				</view>
			</view>
		</view>
		
		<view class="flex_sb flex_center user_menu"  @click="toExpenseList" v-if="userInfo.name">
			<view class="flex_cen flex_center">
				<image src="../../static/img/icon/shipmentExpense.png"
					style="height: 56rpx; width: 56rpx;margin-right: 24rpx;"></image>
				<view class="user_menu_label">
					费用报销
				</view>
			</view>
			<image src="../../static/img/icon/arrowRight.png" style="height: 32rpx; width: 32rpx;"></image>
		</view>
		<button class="exit-login flex_cen" @click="exitLog" v-if="userInfo.name">退出登录</button>
		<bs-tabbar value="user" v-if="showCustomTabbar"></bs-tabbar>
	</view>
</template>

<script>
	import {userMobileOperation} from '../../api/apiList'
	import { TokenPrefix } from '../../publicConfig/config.js'
	export default {
		data() {
			return {
				userInfo: {},
				showCustomTabbar:false
			}
		},
		onLoad: function(options) {
			this.getUserInfo()
		},
		onReady() {
			if(uni.getStorageSync('showTabbars')){
				this.showCustomTabbar = true
				uni.hideTabBar()
				uni.removeStorageSync('showTabbars')
			}
		},
		methods: {
			//跳转费用报销列表页面
			toExpenseList() {
				uni.navigateTo({
					url: `/subpkg/expenseList/expenseList?mobile=${this.userInfo.mobile}`
				})
			},
			//获取用户信息
			getUserInfo() {
				userMobileOperation('getUserInfo').then(res => {
					let data = res.data.data
					data.mobile = data.userExt.mobile || '暂无'
					this.userInfo = {
						...data
					}
				})
			},
			//退出登录
			exitLog() {
				const _this = this
				uni.showModal({
					content: '确定退出当前用户吗？',
					success: (res) => {
						if (res.confirm) {
							// #ifdef H5
							const isWxBrowser = getApp().isWxBrowser()
							if (!isWxBrowser) { //非微信环境跳出
								_this.customTost()
								return
							}
							// #endif
							const {
								projectMini
							} = getApp().globalData
							const openId = _this.userInfo.userExt?.openid || ''
							const data = {
								openId,
								entryName: projectMini
							}
							userMobileOperation('logout', data).then(res => {
								if (res.data.messageType === 'success') {
									_this.customTost()
								}
							})
						} else if (res.cancel) {}
					}
				})
			},
			customTost() {
				uni.showToast({
					title: '退出成功！',
					duration: 1000
				})
				// #ifdef MP
				// uni.stopLocationUpdate() //停止地理位置监听
				// #endif
				uni.removeStorageSync(`${TokenPrefix}_token`)
				uni.removeStorageSync(`${TokenPrefix}_XSRFToken`)
				uni.removeStorageSync('cookies')
				setTimeout(() => {
					uni.reLaunch({
						url: '/pages/login/login',
					})
				}, 1500)
			},
			//访客身份跳转到登录页
			toLoginPage(){
				uni.redirectTo({
					url: "/pages/login/login",
				})
			}
		}
	}
</script>

<style lang="scss">
	.user-content {
		.user-header {
			height: 288rpx;

			.header-bg {
				width: 100%;
				height: 100%;
			}

			.user-info {
				position: absolute;
				top: 5%;
				left: 4%;
				font-size: 36rpx;
				color: #FFFFFF;

				.user_photo {
					width: 160rpx;
					height: 160rpx;
					border: 2rpx solid #EDF5FF;
					border-radius: 50%;
					background-color: #DBE2FB;

					image {
						width: 158rpx;
						height: 158rpx;
						background-size: 100%;
						background-position: center;
						background-repeat: repeat;
					}
				}

				.user-name,
				.user-phone {
					margin-bottom: 10rpx;
				}
			}
		}

		.exit-login {
			position: fixed;
			/* #ifdef H5 */
			bottom: 140rpx;
			/* #endif */
			/* #ifdef MP */
			bottom: 140rpx;
			/* #endif */
			width: 702rpx;
			height: 88rpx;
			left: 50%;
			transform: translateX(-50%);
			border-radius: 44rpx;
			border: 2rpx solid #8C8C8C;
			line-height: 88rpx;
			color: #8C8C8C;
		}

		.user_menu {
			padding: 32rpx 23rpx;
			background-color: #FFFFFF;

			.user_menu_label {
				color: #262626;
				font-size: 32rpx;
			}
		}
	}
</style>
