<template>
	<view class="content">
		<view class="tops">
			<view class="infos">
				<view class="account">
					<image :src="avatarUrl ? avatarUrl : '/static/avatar.png'" mode="aspectFill" @click="handleToAvatar"
						v-if="token != '' && token != null"></image>
					<image src="/static/avatar.png" mode="aspectFill" @click="handleToAvatar" v-else></image>
					<view class="names">
						<view class="title-wrap">
							<view class="name-wrap" v-if="wxStatus">
								<u--text size=16 bold :text="profile.nickName ? profile.nickName : $tt('user.visitor')"
									color="#fff" @click="handleGotoLogin"></u--text>
								<span style="margin-left: 16rpx;">
									<u-icon name="/static/wechat_bind.png" size="22" color="#fff"
										@click="handleUnbindWeChart"></u-icon>
								</span>
							</view>
							<!-- #ifdef H5-->
							<view class="name-wrap" v-if="!wxStatus">
								<u--text size=16 bold :text="profile.nickName ? profile.nickName : $tt('user.visitor')"
									v-if="token != '' && token != null" color="#fff" @click="gotoAccount()"></u--text>
								<u--text size=16 bold :text="$tt('user.login')" v-else color="#fff"
									@click="handleGotoLogin"></u--text>
							</view>
							<!-- #endif -->
							<!-- #ifdef APP-PLUS || MP-WEIXIN-->
							<view class="name-wrap" v-if="!wxStatus">
								<u--text size=16 bold :text="profile.nickName ? profile.nickName : $tt('user.visitor')"
									color="#fff" @click="gotoAccount()" v-if="token != '' && token != null"></u--text>
								<u--text size=16 bold :text="$tt('user.login')" v-else color="#fff"
									@click="handleGotoLogin"></u--text>
								<span style="margin-left: 16rpx;">
									<u-icon name="/static/wechat_unbind.png" size="22" color="#fff"
										@click="handleBindWeChart" v-if="token != '' && token != null"></u-icon>
								</span>
							</view>
							<!-- #endif -->
						</view>
					</view>

				</view>
				<view class="users">

					<view class="u-item" @click="gotoScene()">
						<view class="num">
							<u-icon name="/static/scene(1).png" size="25" color="#fff" labelPos="bottom" labelSize="11"
								space="10rpx" customStyle=" border-radius:6rpx; padding:20rpx;"></u-icon>
						</view>
						<view class="u-tit">{{$tt('user.addScene')}}</view>
					</view>
					<view class="u-item" @click="gotoGroup()">
						<view class="num">
							<u-icon name="/static/group.png" size="25" color="#fff" labelPos="bottom" labelSize="11"
								space="10rpx" customStyle=" border-radius:6rpx; padding:20rpx;"></u-icon>
						</view>
						<view class="u-tit">{{$tt('user.groupManagement')}}</view>
					</view>
					<view class="u-item" @click="gotoEmulator()">
						<view class="num">
							<u-icon name="/static/message.png" size="25" color="#fff" labelPos="bottom" labelSize="11"
								space="10rpx" customStyle=" border-radius:6rpx; padding:20rpx;"></u-icon>
						</view>
						<view class="u-tit">{{$tt('user.platformMsg')}}</view>
					</view>

				</view>
			</view>
			<view class="bg">
				<image src="/static/bg.png" mode="aspectFill"></image>
			</view>
		</view>
		<view class="main">
			<view class="list">
				<view class="group">
					<!-- 平台消息 -->
					<view class="item" @click="gotoMessageList()">
						<view class="left">
							<u-icon class="iconfont" name="chat-fill" size="10" color="#fff"
								customStyle=" border-radius:50%;  background: linear-gradient(45deg, #00FFCC,#33CCFF, #6699FF);padding:6rpx;"></u-icon>
							<text class="text">{{$tt('user.platformMsg')}}</text>
						</view>
						<view class="right">
							<u-icon class="iconfont" name="arrow-right" size="12" color="#333"></u-icon>
						</view>
					</view>
					<!-- 多语言 -->
					<view class="item" @click="gotoLanguage()">
						<view class="left">
							<u-icon class="iconfont" name="/static/language.png" size="10" color="#fff"
								customStyle=" border-radius:50%;  background: linear-gradient(45deg, #6CB4EE,#7FFFD4, #40E0D0);padding:6rpx;"></u-icon>
							<text class="text">{{$tt('user.language')}}</text>
						</view>
						<view class="right">
							<u-icon class="iconfont" name="arrow-right" size="12" color="#333"></u-icon>
						</view>
					</view>
					<!-- 密码修改 -->
					<view class="item" @click="gotoResetPsd()" v-if="token != '' && token != null">
						<view class="left">
							<u-icon class="iconfont" name="lock-fill" size="10" color="#fff"
								customStyle=" border-radius:50%;  background: linear-gradient(45deg, #87CEEB,#00FA9A,#48D1CC );padding:6rpx;"></u-icon>
							<text class="text">{{$tt('user.updatePassword')}}</text>
						</view>
						<view class="right"><u-icon class="iconfont" name="arrow-right" size="12" color="#333"></u-icon>
						</view>
					</view>

				</view>

				<view class="group" v-if="token != '' && token != null">
					<view class="logout" @click="handleExit">
						<view class="left">
							<text class="text">{{$tt('user.exitAccount')}}</text>
						</view>
					</view>
					<view class="logout" @click="handleUnsubscribe()">
						<view class="left">
							<text class="text">{{$tt('user.signOut')}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="other-wrap">
			<!-- 退出系统提示框 -->
			<u-modal :show="show" :title="$tt('user.confirmExit')" :showCancelButton="true" @cancel="cancelExit"
				@confirm="confirmExit"></u-modal>
			<!-- 扫码模态框 -->
			<u-modal :show="modal.show" :content="modal.content" @confirm="confirm" @cancel="cancel"
				:showConfirmButton="modal.showConfirmButton" showCancelButton></u-modal>
			<!-- 注销账号提示 -->
			<u-modal :show="isUnsubscribe" :title="$tt('user.confirmSignOut')" :content="$tt('user.signOutAlert')"
				:cancelText="$tt('user.notWriteOff')" :confirmText="$tt('user.confirmWriteOff')"
				:showCancelButton="true" confirmColor="#606266" cancelColor="#2979ff" @cancel="isUnsubscribe = false"
				@confirm="confirmUnsubscribe"></u-modal>
			<!-- 解除微信绑定提示框 -->
			<u-modal :show="isBindWeChart" :title="$tt('user.confirmWxBind')" :content="$tt('user.wxBindAlertTitle')"
				:cancelText="$tt('user.notBind')" :confirmText="$tt('user.confirmBind')" :showCancelButton="true"
				@cancel="isBindWeChart = false" @confirm="confirmBindWeChart"></u-modal>
			<!-- 提示登录 -->
			<u-modal :show="showModel" :content="$tt('user.notice')" @confirm="confirmGotoLogin"
				@cancel="() => showModel = false" showCancelButton></u-modal>
		</view>
	</view>
</template>

<script>
	import projectConfig from '@/env.config.js';
	import {
		mapState,
		mapMutations
	} from 'vuex';
	import {
		logout,
		secureBind,
		wechatBind
	} from '@/apis/modules/common';
	import {
		deviceRelateUser
	} from '@/apis/modules/device';

	export default {
		components: {},
		data() {
			return {
				avatarUrl: '', // 头像
				// 扫码模态窗
				modal: {
					show: false,
					showConfirmButton: false,
					content: ''
				},
				showModel: false,
				wxStatus: false,
				scanJson: {}, // 扫码获取的Json
				// 退出模态窗
				show: false,
				isTopShow: false, // 顶部弹出层
				isUnsubscribe: false, // 是否注销账号
				isBindWeChart: false, // 是否绑定微信
				isVipModel: false, // 是否会员升级
				token: '',
			};
		},
		onShow() {
			// this.getProfile();
			//小程序tabBar导航国际化特殊性
			// #ifdef MP-WEIXIN 
			uni.setTabBarItem({
				index: 0,
				text: this.$tt('navBar.home'),
			})
			uni.setTabBarItem({
				index: 1,
				text: this.$tt('navBar.scene'),
			})
			uni.setTabBarItem({
				index: 2,
				text: '告警',
			})
			uni.setTabBarItem({
				index: 3,
				text: this.$tt('navBar.news'),
			})
			uni.setTabBarItem({
				index: 4,
				text: this.$tt('navBar.user'),
			})
			//#endif
		},
		computed: {
			...mapState(['isLoggedIn']) // 获取登录状态
		},
		onLoad() {
			this.getToken();
			if (this.token != '' && this.token != null) {
				this.getProfile();
			} else {}

		},
		methods: {
			getToken() {
				// 本地缓存获取token
				this.token = uni.getStorageSync('token');
				// vuex存储token
				uni.$u.vuex('vuex_token', this.token);
			},
			...mapMutations(['setLoggedIn']),
			// 退出系统
			handleExit() {
				this.show = true;
			},
			// 取消退出系统
			cancelExit() {
				this.show = false;
			},
			// 确认退出系统
			confirmExit() {
				logout().then(() => {
					this.clearToken();
					this.setLoggedIn(false);
					// 跳转
					uni.reLaunch({
						url: '/pagesB/login/waitLogin'
					});
				});
			},
			//移动端微信解绑
			handleAppSecureBind() {
				uni.navigateTo({
					url: '/pagesB/user/secureBind'
				});
			},
			gotoAccount() {
				uni.$u.route('/pagesB/user/account');
			},
			//跳转信息
			gotoMessageList() {
				if (this.token != '' && this.token != null) {
					uni.navigateTo({
						url: '/pagesB/list/user/message'
					});
				} else {
					this.showModel = true;
				}
			},
			gotoLanguage() {
				//this.clearToken()
				uni.navigateTo({
					url: '/pagesB/language/index'
				})
			},
			gotoEmulator() {
				if (this.token != '' && this.token != null) {
					uni.navigateTo({
						url: '/pagesB/list/user/message'
					});
				} else {
					this.showModel = true;
				}
			},
			gotoScene() {
				if (this.token != '' && this.token != null) {
					uni.switchTab({
						url: '/pages/tabBar/scene/index'
					});
				} else {
					this.showModel = true;
				}
			},
			//确定去登录
			confirmGotoLogin() {
				// this.clearToken();
				uni.reLaunch({
					url: '/pagesB/login/waitLogin'
				});
				this.showModel = false;
			},
			handleGotoLogin() {
				this.showModel = true;
			},
			// 设备分组
			gotoGroup() {
				if (this.token != '' && this.token != null) {
					uni.navigateTo({
						url: '/pagesB/user/deviceGroup/index'
					});
				} else {
					this.showModel = true;
				}
			},
			// 清除token
			clearToken() {
				uni.setStorageSync('token', '');
			},
			getProfile() {
				// 调用用户信息接口
				this.$api.common.getProfile().then(res => {
					//存储用户信息,TODO 需要调用一次，不然其他页面调用返回空
					uni.$u.vuex('profile', res.data);
					this.avatarUrl = this.profile.avatar && projectConfig.baseUrl + this.profile.avatar;
					this.wxStatus = res.wxBind;
				}).catch(err => {
					this.$u.toast(err.msg);
				});
			},
			// 注销账户
			handleUnsubscribe() {
				this.isUnsubscribe = true;
			},
			//跳转密码修改
			gotoResetPsd() {
				/*uni.navigateTo({
					url:"/pagesB/user/resetPsd"
				})*/
				uni.$u.route('/pagesB/user/resetPsd');
			},
			openhpLink() {
				uni.navigateTo({
					url: '/pages/common/webview/index?url=http://www.hpiot.cn/'
				});
			},
			gotoAbout() {
				uni.navigateTo({
					url: '/pagesB/user/about'
				})
			},


			confirmUnsubscribe() {
				logout().then(() => {
					this.clearToken();
					// 跳转
					uni.reLaunch({
						url: '/pages/login/index'
					});
				});
			},
			//跳转个人信息
			handleToAvatar() {
				if (this.token != '' && this.token != null) {
					const source = {
						album: '从手机相册选择',
						camera: '拍照',
					};
					const success = ({
						tempFilePaths: a,
						tempFiles: b
					}) => {
						const image = a ? a[0] : b[0].path;
						uni.$u.route('/pagesB/user/avatar', {
							url: image
						});
					};
					const _uploadImage = (type) => {
						const sizeType = ['original', 'compressed'];
						uni.chooseImage({
							count: 1,
							sizeType,
							sourceType: [type],
							success
						});
					}
					const list = Object.entries(source);
					// #ifdef H5
					_uploadImage(list[0][0]);
					return;
					// #endif
					uni.showActionSheet({
						itemList: list.map(v => v[1]),
						success: async ({
							tapIndex: i
						}) => {
							// #ifdef APP-PLUS
							const permissionID = list[i][0] === 'album' ? 'READ_EXTERNAL_STORAGE' : 'CAMERA';
							let result = await this.$store.dispatch("permission/requestPermissions",
								permissionID);
							if (result !== 1) return;
							// #endif
							_uploadImage(list[i][0]);
						}
					});
				} else {
					this.showModel = true;
				}
			},
			// 开通会员
			handleVipUpgrade() {
				this.isVipModel = true;
			},
			//独立组态
			gotoScada() {
				if (this.token != '' && this.token != null) {
					uni.navigateTo({
						url: '/pagesB/user/scada/indeScada'
					});
				} else {
					this.showModel = true;
				}
			},
			openappLink() {
				uni.navigateTo({
					url: '/pages/common/webview/index?url=https://gitee.com/beecue/fastbee-app/tree/master/app'
				});
			},
			// 解绑微信
			handleUnbindWeChart() {
				uni.navigateTo({
					url: '/pagesB/user/secureBind'
				});
			},
			// 绑定微信
			handleBindWeChart() {
				this.isBindWeChart = true;
			},
			confirmBindWeChart() {
				this.isBindWeChart = false;
				let that = this;
				uni.login({
					provider: 'weixin',
					success: function(res) {
						if (res) {
							console.log('用户授权成功');
							// #ifdef APP-PLUS
							const params = {
								sourceClient: 'wechat_open_mobile',
								openId: res.authResult.openid,
								unionId: res.authResult.unionid,
							}
							// #endif
							// #ifdef MP-WEIXIN
							const params = {
								code: res.code,
								sourceClient: 'wechat_open_mini_program',
							}
							// #endif
							wechatBind(params).then(res => {
								if (res.code == 200) {
									uni.showToast({
										icon: 'none',
										title: '绑定成功！',
									});
									that.getProfile();
								} else {
									uni.$u.toast(res.msg);
								}
							}).catch(err => {
								console.log(err);
							});
						}
					}
				})
			}
		}
	};
</script>

<style scoped lang="scss">
	.content {
		background-color: #f5f5f5;
		height: 100vh;
	}

	.tops {
		position: relative;
		height: 450rpx;
		background-color: #00aaff;
		/* background: url("https://img1.baidu.com/it/u=3643237076,897388802&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=400") no-repeat; */
		background-size: 100% 100%;
		z-index: 1;
		margin-bottom: 150rpx;


	}

	.setIcon {
		position: absolute;
		top: 50rpx;
		right: 50rpx;
	}




	.main {
		// width: 100%;
		min-height: 200rpx;
		background: #f5f5f5;
		// border-radius: 30rpx;
		// transform: translateY(-30rpx);
		margin: 30rpx;
		z-index: 0;

		.list {
			.group {
				border-radius: 20rpx;
				background-color: #fff;
				padding: 15rpx 30rpx;
				margin-bottom: 20rpx;
				box-shadow: 5px 5px 5px 0px #eaeaea;

				.item {
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding: 20rpx 0;
					font-size: 30rpx;
					color: #555;
					border-bottom: 1rpx solid #f8f8f8;

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

						.iconfont {
							font-size: 38rpx;
							// margin-right: 12rpx;
						}

						.text {
							margin-left: 12rpx;
						}

					}

					.right {
						.iconfont {
							font-size: 26rpx;
						}
					}
				}

				.logout {

					justify-content: space-between;
					align-items: center;
					padding: 15rpx 0;
					font-size: 32rpx;
					color: #555;
					border-bottom: 1rpx solid #f8f8f8;

				}

				.logout:last-child {
					border: none;

				}

				.item:last-child {
					border: none;

				}
			}

			.group:last-child {
				border: none;

			}
		}
	}

	.logout {
		text-align: center;
	}

	.tops .infos {
		width: 92%;
		height: 200rpx;
		position: absolute;
		top: 35%;
		left: 50%;
		transform: translate(-50%, -25%);
		text-align: center;
		z-index: 1;

	}

	.infos image {
		width: 120rpx;
		height: 120rpx;
		border-radius: 50%;
		border: 4rpx solid #fff;
	}

	.infos .names {
		display: flex;
		text-align: center;
		justify-content: center;
		font-weight: 700;
		margin: 20rpx 0 10rpx;

		.name-wrap {
			display: flex;
		}



	}

	.infos .desc {
		max-width: 62%;
		font-size: 28rpx;
		color: #ffffff;
		margin: 10rpx auto;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		text-align: center;
	}

	.infos .t-list {
		margin-top: 60rpx;
		display: flex;
		justify-content: space-around;
	}

	.t-item .tit {
		font-size: 32rpx;
		color: #333;
		margin-bottom: 10rpx;
	}

	.t-item .vals {
		font-size: 36rpx;
		color: #333;
		font-weight: 700;
		margin-bottom: 10rpx;
	}

	.users {
		margin-top: 30rpx;
		padding: 30rpx;
		box-sizing: border-box;
		height: 200rpx;
		width: 100%;
		background-color: #fff;
		box-shadow: 1px 10rpx 20rpx #ececec;
		border-radius: 12rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;
		text-align: center;
		z-index: 3;

	}

	.u-top {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		margin-bottom: 30rpx;
	}

	.users .u-top image {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		margin-right: 20rpx;
	}

	.u-top .tit {
		font-size: 30rpx;
		font-weight: 700;
		color: #333;
	}

	.u-item {
		text-align: center;

	}

	.u-item .u-tit {
		color: #757575;
		font-size: 26rpx;
		margin-top: 10rpx;
	}

	.u-item .num {
		color: #000000;
		font-size: 33rpx;
		font-weight: 700;
	}

	.bg {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		overflow: hidden;

		image {
			width: 100%;
			height: 100%;
			filter: blur(3px);
			/*transform: scale(2); */
			opacity: 0.6;
		}
	}

	.borderless-button {
		border: none !important;
		background-color: transparent;
		color: #007bff;
		/* 设置文字颜色 */
	}

	::v-deep.uni-list-item__content-title[data-v-296a3d7e] {
		font-size: 30rpx;
		color: #333;
		overflow: hidden;
		font-weight: 500;
	}

	::v-deep .uni-list-item__container {
		padding: 30rpx;
	}

	.other-wrap {
		.popup-title {
			margin: 20px 20px;
		}

		.btnclass {
			margin: 0px 20px 20px 20px;
			border-radius: 10px;
		}
	}
</style>