<template>
	<view class="content">
		<view class="" style="height: 40rpx;"></view>
		<view class="user-wrap flex">
			<view class="user-name">{{ userInfo.username }}</view>
			<view class="user-invit">{{ $t('menu.yqm') }}：{{ userInfo.invit }}</view>
		</view>
		<!-- <view class="user-list flex">
			<image src="../../static/icon/mu1.png" mode="" class="left-img"></image>
			<view class="">
				語言
			</view>
			<image src="../../static/icon/back.png" mode="" class="right-img"></image>
		</view> -->
		<!-- <view class="user-list flex">
			<image src="../../static/icon/mu2.png" mode="" class="left-img"></image>
			<view class="">
				幫助中心
			</view>
			<image src="../../static/icon/back.png" mode="" class="right-img"></image>
		</view> -->
		<!-- <view class="user-list flex">
			<image src="../../static/icon/mu3.png" mode="" class="left-img"></image>
			<view class="">
				通知
			</view>
			<image src="../../static/icon/back.png" mode="" class="right-img"></image>
		</view> -->
		<view class="user-list flex" @click="navto('/pages/user/respwd')">
			<image src="../../static/icon/mu4.png" mode="" class="left-img"></image>
			<view class="">{{ $t('menu.xgmm') }}</view>
			<image src="../../static/icon/back.png" mode="" class="right-img"></image>
		</view>
		<!-- <view class="user-list flex">
			<image src="../../static/icon/mu5.png" mode="" class="left-img"></image>
			<view class="">
				提幣地址
			</view>
			<image src="../../static/icon/back.png" mode="" class="right-img"></image>
		</view> -->
		<view class="user-list flex" @click="navto('/pages/user/authrz')">
			<image src="../../static/icon/mu6.png" mode="" class="left-img"></image>
			<view class="">{{ $t('menu.smrz') }}</view>
			<image src="../../static/icon/back.png" mode="" class="right-img"></image>
		</view>
		<view class="loginout" @click="cancel()">{{ $t('menu.tc') }}</view>
	</view>
</template>

<script>
import { mapMutations, mapState } from 'vuex';
import { getUser, loginout } from '@/api/login.js';

export default {
	data() {
		return {};
	},
	computed: {
		...mapState('user', ['userInfo'])
	},
	onLoad() {},
	onShow() {
		this.getUser();
	},
	onReachBottom() {},
	onReady() {},
	methods: {
		...mapMutations('user', ['login', 'setUserInfo', 'logout']),
		navto(url) {
			uni.navigateTo({
				url,
				fail() {
					uni.switchTab({
						url
					});
				}
			});
		},
		getUser() {
			let obj = this;
			getUser().then(res => {
				console.log(res);
				obj.setUserInfo(res.data);
			});
		},
		cancel() {
			// this.$refs.popup.open();
			let obj = this;
			uni.showModal({
				content: this.$t('popup.qrtcdl'),
				confirmText: this.$t('popup.qr'),
				cancelText: this.$t('popup.qx'),
				success: e => {
					if (e.confirm) {
						loginout().then(res => {
							obj.logout();
							uni.switchTab({
								url: '/pages/index/index'
							});
						});
					}
				}
			});
		}
	}
};
</script>

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

.user-wrap {
	width: 674rpx;
	height: 147rpx;
	margin: auto;
	background: #f9f9f9;
	border-radius: 10rpx;
	flex-direction: column;
	padding-left: 27rpx;
	justify-content: center;
	align-items: start;
	text-align: left;

	.user-name {
		font-size: 34rpx;
		font-weight: 500;
		color: #636572;
	}

	.user-invit {
		padding: 20rpx 0;
		font-size: 22rpx;
		font-weight: 500;
		color: #636572;
	}
}

.user-list {
	width: 691rpx;
	height: 104rpx;
	background: #ffffff;
	// box-shadow: 0px 0px 20rpx 0px rgba(50, 50, 52, 0.06)
	border-radius: 28rpx;
	margin: 20rpx auto;
	// padding: 0 25rpx;

	.left-img {
		width: 50rpx;
		height: 50rpx;
	}

	view {
		padding-left: 20rpx;
		flex-grow: 1;
		font-size: 29rpx;
		font-weight: bold;
		color: #5d5d5d;
	}

	.right-img {
		width: 50rpx;
		height: 50rpx;
	}
}

.loginout {
	width: 675rpx;
	height: 70rpx;
	line-height: 70rpx;
	text-align: center;
	font-size: 26rpx;
	color: #000;
	background-color: #f4d03c;
	margin: 50rpx auto;
	border-radius: 20rpx;
	font-weight: bold;
}
</style>