<template>
	<view class="container-with-lines"  style="overflow: hidden; ">
		<view class="status-bar" :style="{ height: statusBarHeight + 'px' }"></view>
		<view class="header">
			<view class="avatar-box">
				<u-avatar class="avatar" mode="aspectFill" size="120rpx" :src="avatar" @click="handleToAvatar"></u-avatar>
			</view>
			<view class="user-info">
				<text v-show="!isLogin" style="color: #777; font-size: 19px;" @click="goLogin">{{languageData.me.unLogin}}</text>
				<text v-show="isLogin" class="nickname">{{this.$store.state.user.nickName}}</text>
				<text v-show="isLogin" class="phoneNumber">{{phoneNumber}}</text>
			</view>
			<view style="position: absolute; right: 2em;">
				<!-- <u-tag @click="handleToInfo()" v-if="isAuthed" :text="" type="error" plain></u-tag> -->
				<u-tag @click="handleToInfo()" :text="isAuthed" type="warning" plain></u-tag>
			</view>
		</view>
		<view class="content">
			<view class="section">
				<view class="menu-item" @click="handleAccount">
					<view class="menu-left">
						<uni-icons type="wallet" size="22" color="#f0ad4e" />
						<text class="menu-text">{{isPerson ? languageData.me.merchantAccount:languageData.me.personalAccount}}</text>
					</view>
					<uni-icons type="right" size="16" color="#999" />
				</view>
			</view>
			<view class="">
				<view class="menu-row">
					<view class="menu-item flex-1 section" @click="handleToSecurity">
						<view class="menu-left">
							<uni-icons type="locked-filled" size="22" color="#5cb85c" />
							<text class="menu-text">{{languageData.me.securityCenter}}</text>
						</view>
						<uni-icons type="right" size="16" color="#999" />
					</view>
					<view class="menu-item flex-1 section" @click="handleToInfo">
						<view class="menu-left">
							<uni-icons type="person" size="22" color="#5bc0de" />
							<text class="menu-text">{{isPerson ? languageData.me.merchantData : languageData.me.personalData }}</text>
						</view>
						<uni-icons type="right" size="16" color="#999" />
					</view>
				</view>
			</view>
			<view class="section">

				<view class="menu-item menu-item-underLine">
					<view class="menu-left">
						<uni-icons type="staff" size="22" color="#ff9800" />
						<text class="menu-text">{{languageData.me.shareLink}}</text>
					</view>
					<text class="menu-desc">{{languageData.me.shareFriend}}</text>
				</view>

				<view class="menu-item menu-item-underLine">
					<view class="menu-left">
						<uni-icons type="contact" size="22" color="#2196f3" />
						<text class="menu-text">{{languageData.me.myContact}}</text>
					</view>
					<uni-icons type="right" size="16" color="#999" />
				</view>

				<view class="menu-item menu-item-underLine" @click="handleAbout">
					<view class="menu-left">
						<uni-icons type="info" size="22" color="#9c27b0" />
						<text class="menu-text">{{languageData.me.personage}}</text>
					</view>
					<uni-icons type="right" size="16" color="#999" />
				</view>

				<view class="menu-item menu-item-underLine" @click="handleHelp">
					<view class="menu-left">
						<uni-icons type="help-filled" size="22" color="#607d8b" />
						<text class="menu-text">{{languageData.me.commonProblem}}</text>
					</view>
					<uni-icons type="right" size="16" color="#999" />
				</view>

				<view class="menu-item menu-item-underLine">
					<view class="menu-left">
						<uni-icons type="refresh" size="22" color="#795548" />
						<text class="menu-text">{{languageData.me.checkUpdate}}</text>
					</view>
					<text class="menu-desc">{{languageData.me.versionNum}} 2.0.02</text>
				</view>
			</view>
			<view v-show="isLogin" class="section">
				<view class="menu-item" style="line-height: 19rpx;" @click="handleLogout">
					<view class="menu-left">
						<uni-icons type="closeempty" size="22" color="#f44336" />
						<text class="menu-text">{{languageData.me.logOut}}</text>
					</view>
					<uni-icons type="right" size="16" color="#999" />
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				statusBarHeight: uni.getSystemInfoSync().statusBarHeight,
				avatarUrl: 'https://ai-public.mastergo.com/ai/img_res/0476ecb1fc18c5f9ee340a450b13ed9c.jpg',
				languageShow: false, // 切换语言
				onTabItemTapRenovate: true, // 刷新语言
				currentLanguage: uni.getStorageSync("LANGUAGE-CODE"), // 当前语言
				name: this.$store.state.user.name,
				version: getApp().globalData.config.appInfo.version,
				languageData: {},
				nickName: this.$store.state.user.nickName,
				phoneNumber: this.$store.state.user.phonenumber
			}
		},
		computed: {
			avatar() {
				return this.$store.state.user.avatar
			},
			windowHeight() {
				return uni.getSystemInfoSync().windowHeight - 50
			},
			isLogin(){
				return this.$store.state.user.token && this.$store.state.user.token.length > 0
			},
			isPerson(){
				return this.$store.state.user.userCate == 1
			},
			user() {
				return this.$store.state.user
			},
			isAuthed(){
				switch(this.$store.state.user.status){
					case '1':
					return this.languageData.me.auditing
					case '2':
					return this.languageData.me.pass
					case '3':
					return this.languageData.me.fail
					default:
					return this.languageData.me.unAuthed
				}
			}
		},
		onLoad() {
			this.$store.dispatch('GetInfo').then(res => {
				setTimeout(() => {
					this.$refs.loading.close();
					setTimeout(() => {
						this.$modal.msgSuccess(this.languageData.updateSuccess)
						uni.navigateBack({
							delta: 1,
						})
					}, 500)
				}, 1000)
			})
			this.languageData = this.$languageData;
		},
		onShow() {
			this.languageShow = false;
			this.languageData = this.$languageData;
		},
		created() {
			uni.setNavigationBarTitle({
				title: this.$languageData.navBar.my
			});
			this.languageData = this.$languageData;
			// 切换TabBar标题
			this.setTabBarTabBar(this.languageData.tabbar);
		},
		watch:{
			languageData(){
				uni.setNavigationBarTitle({
					title: this.$languageData.navBar.my
				});
			}
		},
		methods: {
			goLogin(){
					uni.navigateTo({
						url: '/pages/login'
					})
			},
			handleAccount() {
				this.$tab.navigateTo('/pages/mine/myAccount/index')
			},
			handleToSecurity() {
				this.$tab.navigateTo('/pages/mine/security/index')
			},
			handleToInfo() {
				if(this.$store.state.user.userCate == '1'){
					uni.navigateTo({url:'/pages/mine/info/merchant/index'})
				}else if(this.$store.state.user.userCate == '2'){
					uni.navigateTo({url:'/pages/mine/info/proxy/index'})
				}else{
					this.$tab.navigateTo('/pages/mine/info/index')
				}
			},
			editUsrInfo() {
				if(this.$store.state.user.userCate == '1' ){
					uni.navigateTo({url:'/pages/mine/info/merchant/edit'})
				}else if(this.$store.state.user.userCate == '2'){
					uni.navigateTo({url:'/pages/mine/info/proxy/edit'})
				}else{
					this.$tab.navigateTo('/pages/mine/info/edit')
				}
				
			},
			handleToEditInfo() {
				if(this.$store.state.user.userCate == '1' ){
					uni.navigateTo({url:'/pages/mine/info/merchant/edit'})
				}else if(this.$store.state.user.userCate == '2'){
					uni.navigateTo({url:'/pages/mine/info/proxy/edit'})
				}else{
					this.$tab.navigateTo('/pages/mine/info/edit')
				}
			},
			handleToSetting() {
				this.$tab.navigateTo('/pages/mine/setting/index')
			},
			handleToLogin() {
				this.$tab.reLaunch('/pages/login')
			},
			handleToAvatar() {
				this.$tab.navigateTo('/pages/mine/avatar/index')
			},
			handleLogout() {
				this.$modal.confirm(this.$languageData.settings.logoutCont).then(() => {
					this.$store.dispatch('LogOut').then(() => {
						this.$tab.reLaunch('/pages/index')
					})
				})
			},
			handleHelp() {
				this.$tab.navigateTo('/pages/mine/help/index')
			},
			handleAbout() {
				this.$tab.navigateTo('/pages/mine/about/index')
			},
			handleJiaoLiuQun() {
				this.$modal.showToast('QQ群：①133713780(满)、②146013835(满)、③189091635')
			},
			handleBuilding() {
				this.$modal.showToast('模块建设中~')
			},
			overBtn(data) {
				// console.log("data---",data)
				this.currentLanguage = data;
				uni.setStorageSync("LANGUAGE-CODE", data);
				this.$LGC_swich();
				this.languageData = this.$languageData;
				// 切换TabBar标题
				this.setTabBarTabBar(this.languageData.tabbar);
			},
		}
	}
</script>


<style lang="scss" scoped>
	// page {
	// 	height: 100%;
	// 	background-color: #f5f5f5;
	// }

	// .content {
	// 	background-color: #fff;
	// 	opacity: .9;
	// }

	.checkmark {
		position: relative;
		width: 20px;
		height: 20px;
	}

	.checkmark::before {
		content: "";
		position: absolute;
		top: 4px;
		left: 7px;
		width: 8px;
		height: 8px;
		border-left: 1px solid #999;
		/* 左侧边线 */
		border-bottom: 1px solid #999;
		/* 底边线 */
		transform: rotate(310deg);
		/* 旋转45度 */
	}

	.language-list {
		padding: 20rpx;
		border: 1rpx solid #ffffff;
		background-color: #fafafa;
	}


	.header {
		position: relative;
		display: flex;
		align-items: center;
		padding: 40rpx 30rpx;
		background-image: linear-gradient(to bottom, #FCEDC9,#FCEDC9);
		// background-color: rgba(77, 181, 254, .95);
		border-radius: 16rpx;
		margin-bottom: 20rpx;
	}

	.avatar-box {
		width: 120rpx;
		height: 120rpx;
		margin-right: 30rpx;
		border-radius: 60rpx;
		overflow: hidden;
	}

	.avatar {
		width: 100%;
		height: 100%;
	}

	.user-info {
		display: flex;
		flex-direction: column;
	}

	.nickname {
		font-size: 16px;
		color: #333333;
		// color: #fff;
		font-weight: 500;
		margin-bottom: 8rpx;
	}

	.phoneNumber {
		font-size: 14px;
		color: #999999;
		// color: #fff;
	}

	.section {
		background-color: #ffffff;
		border-radius: 16rpx;
		margin-bottom: 20rpx;
	}

	.menu-row {
		display: flex;
		justify-content: space-between;
		gap: 20rpx;
	}

	.menu-item-underLine {
		border-bottom: 2rpx solid #f5f5f5;
	}

	.menu-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 30rpx;
	}

	.flex-1 {
		flex: 1;
		border-radius: 12rpx;
	}

	.menu-item:last-child {
		border-bottom: none;
	}

	.menu-left {
		display: flex;
		align-items: center;
	}

	.menu-text {
		font-size: 14px;
		color: #333333;
		margin-left: 20rpx;
	}

	.menu-desc {
		font-size: 12px;
		color: #999999;
	}
</style>