<template>
	<view class="user-content">
		<!-- 头部 -->
		<view class="user-head" >
			<view>
				<open-data type="userAvatarUrl" class="user-photo"></open-data>
				<!-- <u-image v-show="!hasLogin" src="/static/logo.png" width="100" height="100"></u-image> -->
			</view>
			<view class="user-info">
				<view v-if="hasLogin" class="user-info-item">{{userData.userName || ''}}</view>
				<view v-if="hasLogin" class="user-info-item">{{userData.userMobile || ''}}</view>
				<view v-if="!hasLogin"  class="user-info-item" @click="toLoginPage">
					请点击登录
				</view>
				<!-- <u-button v-else="!hasLogin" plain size="mini" shape="circle" @click="toLoginPage">立即登录</u-button> -->
			</view>
		</view>
		<!-- 列表 -->
		<view class="list-container">
			<navigator v-if="hasLogin" url="/pages/store/storeList" class="list-item flex align_center justify_between">
				<view class="flex align_center">
					<u-image src="/static/home/personal_store.png" width="48" height="48"></u-image>
					<text>店铺管理</text>
				</view>
				<u-icon name="arrow-right" color="#9DA8B5" size="32"></u-icon>
			</navigator>
			<navigator v-if="hasLogin" url="/pages/order/historyOrder" class="list-item flex align_center justify_between">
				<view class="flex align_center">
					<u-image src="/static/home/personal_historyOrder.png" width="48" height="48"></u-image>
					<text>历史订单</text>
				</view>
				<u-icon name="arrow-right" color="#9DA8B5" size="32"></u-icon>
			</navigator>
			<navigator v-if="hasLogin" url="/pages/recoveryTotal/index" class="list-item flex align_center justify_between">
				<view class="flex align_center">
					<u-image src="/static/home/personal_total.png" width="48" height="48"></u-image>
					<text>回收统计</text>
				</view>
				<u-icon name="arrow-right" color="#9DA8B5" size="32"></u-icon>
			</navigator>
			<navigator v-if="hasLogin" url="/pages/userCenter/changePwd" class="list-item flex align_center justify_between">
				<view class="flex align_center">
					<u-image src="/static/home/personal_passward.png" width="48" height="48"></u-image>
					<text>修改密码</text>
				</view>
				<u-icon name="arrow-right" color="#9DA8B5" size="32"></u-icon>
			</navigator>
			<view @click="checkUpdate" class="list-item flex align_center justify_between">
				<view class="flex align_center">
					<u-image src="/static/home/personal_version.png" width="48" height="48"></u-image>
					<text>版本检查</text>
				</view>
				<view>
					<text>{{version}}</text>
					<u-icon name="arrow-right" color="#9DA8B5" size="32"></u-icon>
				</view>
			</view>
			<view v-if="hasLogin" @click="quitSys" class="list-item flex align_center justify_between">
				<view class="flex align_center">
					<u-image src="/static/home/personal_loginout.png" width="48" height="48"></u-image>
					<text>退出登录</text>
				</view>
				<u-icon name="arrow-right" color="#9DA8B5" size="32"></u-icon>
			</view>
		</view>
		<!-- 客服电话 -->
		<view class="phone flex justify_center align_center">
			<u-icon name="phone" color="#191919" font-size="32" @click="callPhone(customerPhoneNum)"></u-icon>
			<text @click="callPhone(customerPhoneNum)">客服电话：{{customerPhoneNum || '--'}}</text>
		</view>
	</view>
</template>

<script>
	import { checkLogin, getUserInfo, logout,customerPhone } from '@/api/login.js'
	export default {
		data() {
			return {
				hasLogin: false,
				userData: {},
				version: '1.0.1' ,// 小程序版本
				customerPhoneNum:'' // 客服电话
			};
		},
		onShow() {
			checkLogin().then(res => {
				this.hasLogin = res.status == 200
				console.log(this.hasLogin,res,'this.hasLogin')
				if(this.hasLogin){
					this.getUserInfo()
				}else{
					// uni.navigateTo({
					// 	url:"/pages/login/login"
					// })
				}
			})
		},
		computed: {
			
		},
		onLoad() {
			this.getCustomerPhone()
			// 开启分享
			uni.showShareMenu({
				withShareTicket: true,
				menus: ['shareAppMessage', 'shareTimeline']
			})
		},
		methods:{
			// 获取当前小程序版本
			getVersion(){
				const accountInfo = uni.getAccountInfoSync();
				this.version = accountInfo.miniProgram.version
				console.log(accountInfo,accountInfo.miniProgram.appId,'ppppppppp'); // 小程序 appId
			},
			// 获取客服电话
			getCustomerPhone(){
				customerPhone().then(res=>{
					console.log(res,'=====================客服电话')
					if(res.status==200){
						this.customerPhoneNum=res.data.paramPhone
					}else{
						uni.showToast({
							title:res.message,
							icon:'none'
						})
					}
				})
			},
			//联系客服
			callPhone(customerPhoneNum){
				uni.makePhoneCall({
				    phoneNumber: customerPhoneNum
				});
			},
			// 检查更新
			checkUpdate(){
				if (uni.canIUse('getUpdateManager')) {
				      const updateManager = uni.getUpdateManager()
				      updateManager.onCheckForUpdate(function (res) {
				        console.log('onCheckForUpdate====', res)
				        // 请求完新版本信息的回调
				        if (res.hasUpdate) {
				          console.log('res.hasUpdate====')
				          updateManager.onUpdateReady(function () {
				            uni.showModal({
				              title: '更新提示',
				              content: '新版本已经准备好，是否重启应用？',
				              success: function (res) {
				                console.log('success====', res)
				                // res: {errMsg: "showModal: ok", cancel: false, confirm: true}
				                if (res.confirm) {
				                  // 新的版本已经下载好，调用 applyUpdate 应用新版本并重启
				                  updateManager.applyUpdate()
				                }
				              }
				            })
				          })
				          updateManager.onUpdateFailed(function () {
				            // 新的版本下载失败
				            uni.showModal({
				              title: '已经有新版本了哟~',
				              content: '新版本已经上线啦~，请您删除当前小程序，重新搜索打开哟~'
				            })
				          })
				        } else {
							uni.showToast({
								title: '已是最新版本',
								icon: 'none'
							})
						}
				      })
				    }
			},
			// 获取用户信息
			getUserInfo(){
				getUserInfo().then(res => {
					console.log(res,'getUserInfo')
					if(res.status == 200){
						this.$u.vuex("vuex_userData",res.data)
						this.userData = res.data
						console.log(this.userData,'-----用户信息')
					}
				})
			},
			// 打开对应的页面
			toPage(index){
				console.log(index)
				let pageUrl=[
					'/pages/agreement/agreement?fromPage=usercenter',
					'/pages/userCenter/changePwd',
					]
				uni.navigateTo({
					url: pageUrl[index]
				})
			},
			// 退出登录
			quitSys(){
				let _this = this
				uni.showModal({
				  title: '提示',
				  content: '您确定要退出登录吗?',
				  success(res) {
				    if (res.confirm) {
				      logout().then(res => {
					   console.log(res,'logout')
				       getApp().globalData.token = ''
				       _this.$u.vuex('vuex_token','')
					   // 关闭socket
				        uni.reLaunch({
				        	url: '/pages/login/login'
				        })
				      })
				    }
				  }
				})
			},
			
			toLoginPage(){
				uni.navigateTo({
					url: '/pages/login/login'
				})
			},
		}
	}
</script>

<style lang="scss">
	.user-content{
		width: 100%;
		height: 100vh;
		background-color: #fff;
		.user-head{
			display: flex;
			align-items: center;
			padding: 35rpx 55rpx;
			.user-info{
				flex-grow: 1;
				padding: 0 20rpx;
				color: #FFFFFF;
				.user-info-item{
					margin: 10rpx 0;
					color: #666666;
					font-size: 32upx;
				}
				:first-child{
					color: #000000;
					font-size: 48upx;
				}
			}
			.user-photo{
				display: block;
				width: 146rpx;
				height: 146rpx;
				border-radius: 50%;
				overflow: hidden;
			}
		}
		.list-container{
			width: 100%;
			
			.icon{
				width: 48rpx;
				height: 48rpx;
				margin-right: 30rpx;
			}
			.list-item{
				padding: 32rpx 36rpx;
				background-color: #fff;
				text{
					display: inline-block;
					margin-left: 28upx;
					font-size: 34rpx;
					color: #191919;
				}
			}
			.margin-bot{
				margin-bottom: 20rpx;
			}
		}
		.phone{
			position: absolute;
			text-align: center;
			bottom: 3%;
			left:28%
		}
	}
</style>
