<template>
	<view class="minebg">
		<nav-bar title="" bgColor="rgba(255, 0, 0, 0.9);"></nav-bar>
		<view class="v1">
			<uni-badge :text="noticeCount" absolute="rightTop" size="small"  class="item" type="error">
			  <uni-icons size="20" type="chat" @click="onTokenJump('/pages/mine/notice')"></uni-icons>
			</uni-badge>
			<uni-icons size="20" type="gear" @click="onTokenJump('/pages/Setting/index')"></uni-icons>
		</view>
		<view class="v2">
			<view style="width: 220upx; float: left;" @click="onTokenJump('/pages/mine/info')">
				<image style="width: 100px; height: 100px" :src="user.avatar" mode="cover"></image>
			</view>
			<view class="login" @click="onPageJump('/pages/mine/login')" v-if="!islogin">
				{{$t('mine.text1')}}
			</view>
			<view class="login1" v-else>
				<view><span @click="onTokenJump('/pages/mine/info')" class="s">{{user.username}}</span></view>
				<span style="font-size: 14px; font-weight: 400; float: left;">ID：{{user.id}}</span>
				<image class="i" src="/static/images/copy.png" @click="copy(user.id)" mode="cover"></image>
			</view>
			<view style="clear: both;"></view>
		</view>
		<view class="v3">
			<view class="dj">
				<view style="width: 18%; float: left;">
					<image style="width: 33px; height: 25px; margin: 20px 15px;" src="/static/images/image.png" mode="cover"></image>
				</view>
				<view class="sj" v-if="user.role_id == 1">
					<view class="sj1">{{$t('mine.text2')}} </view>
					<view class="sj2">{{$t('mine.text3')}}  </view>
				</view>
				<view class="sj" v-else>
					<view class="sj1" style="margin-top: 10px;">{{$t('mine.text4')}}</view>
				</view>
				<view class="sj3">
					<button type="primary" class="b" @click="onTokenJump('/pages/mine/upgrade')" style="margin-left: 15%;" v-if="user.role_id == 1">{{$t('buttonUpgrade')}}</button>
					<button type="primary" class="b" style="margin-left: 15%;" v-else>{{$t('buttonDetails')}}</button>
				</view>
			</view>
		</view>
		<view class="v4">
			<uni-row :gutter="20">
			  <uni-col :span="12">
				  <view class="wallet" @click="onTokenJump('/pages/wallet/index')">
					  <view class="title">{{$t('mine.text5')}}</view>
					  <view class="num">{{user.money.toFixed(4)}}</view>
				  </view>
			  </uni-col>
			  <uni-col :span="12">
				  <view class="wallet" @click="onTokenJump('/pages/power/index')">
					  <view class="title">{{$t('mine.text6')}}</view>
					  <view class="num1">{{user.score.toFixed(4)}}</view>
				  </view>
			  </uni-col>
			</uni-row>
			<uni-row :gutter="20">
			  <uni-col :span="24" style="margin-top: 10px;">
				  <view class="wallet" style="padding: 15px 10px 12px 10px;" @click="onTokenJump('/pages/address/index')">
					  <image class="i" src="/static/images/5.png" mode="cover"></image>
					  <span class="s">Address book</span>
					  <uni-icons size="20" type="right" style="float: right;"></uni-icons>
					  <view style="clear: both;"></view>
				  </view>
			  </uni-col>
			  <uni-col :span="24" style="margin-top: 10px;">
			  	  <view class="wallet" style="padding: 15px 10px 12px 10px;">
			  	  	 <image class="i" src="/static/images/m4.png" fit="cover"></image>
			  	  	 <span class="s" @click="onTokenJump1('/pages/im/index')">Online service</span>
			  	  	 <uni-icons size="20" type="right" style="float: right;"></uni-icons>
			  	  	 <view style="clear: both;"></view>
			  	  </view>
			  </uni-col>
			  <uni-col :span="24" style="margin-top: 10px;">
				  <view class="wallet" style="padding: 15px 10px 12px 10px;" @click="onPageJump('/pages/about/help')">
				  	 <image class="i" src="/static/images/m6.png" fit="cover"></image>
				  	 <span class="s">Help Center</span>
				  	 <uni-icons size="20" type="right" style="float: right;"></uni-icons>
				  	 <view style="clear: both;"></view>
				  </view>
			  </uni-col>
			  <uni-col :span="24" style="margin-top: 10px;">
				  <view class="wallet" style="padding: 15px 10px 12px 10px;" @click="onPageJump('/pages/about/index')">
				  	 <image class="i" src="/static/images/m3.png" fit="cover"></image>
				  	 <span class="s">About us</span>
				  	 <uni-icons size="20" type="right" style="float: right;"></uni-icons>
				  	 <view style="clear: both;"></view>
				  </view>
			  </uni-col>
			</uni-row>
		</view>
	</view>
</template>

<script>
	import zNavigation from '@/components/module/navigation.vue';
	import {
		mapState,
		mapMutations
	} from 'vuex';
	export default {
		components: {
			zNavigation
		},
		data() {
			return {
				islogin: false,
				noticeCount: 0,
				identity: '',
				user:{
					noticeTotal: 0,
					money: 0.0000,
					score: 0.0000,
					avatar: '/static/images/tx.png',
					username: '',
					id: '',
					role_id: 1,
				}
			}
		},
		computed: {
			...mapState(['userInfo'])
		},
		//第一次加载
		onLoad(e) {
			// if(this.userInfo.token === typeof(undefined) || this.userInfo.token === undefined){
			// 	this.islogin = false;
			// }else{
			// 	this.islogin = true;
			// 	this.user.money = parseFloat(this.userInfo.money);
			// 	this.user.score = parseFloat(this.userInfo.score);
			// 	this.user.username = this.userInfo.username;
			// 	this.user.id = this.userInfo.id;
			// 	if(this.userInfo.avatar !== '' && this.userInfo.avatar != null){
			// 		this.user.avatar = this.userInfo.avatar;
			// 	}
			// }
			// this.$http.get('/api/role/detail?lang='+this.$i18n.locale).then(res => {
			// 	if(res.code == 0){
			// 		this.user.role_id =  res.data.id;
			// 	}
			// });
			
		},
		onShow(){
			uni.showLoading({
				title:'Array loading...'
			})
			if(this.userInfo.token === typeof(undefined) || this.userInfo.token === undefined){
				this.islogin = false;
				uni.hideLoading();
			}else{
				this.islogin = true;
				this.islogin = true;
				this.user.money = parseFloat(this.userInfo.money);
				this.user.score = parseFloat(this.userInfo.score);
				this.user.username = this.userInfo.username;
				this.user.id = this.userInfo.id;
				if(this.userInfo.avatar !== '' && this.userInfo.avatar != null){
					this.user.avatar = this.userInfo.avatar;
				}
				this.getnotice();
				this.$http.get('/api/role/detail?lang='+this.$i18n.locale).then(res => {
					if(res.code == 0){
						this.user.role_id =  res.data.id;
						uni.hideLoading();
					}
				}).catch(err => {
					uni.hideLoading()
				});
			};
			
		},
		methods: {
			getnotice(){
				let data = {
					category_id: 10,
					page: 1,
					limit: 20,
					lang: this.$i18n.locale
				}
				this.$http.post('/api/article/list', data).then(res => {
					if(res.code == 0){
						let newList = res.data.data.filter(item => item.is_read == 0);
						this.noticeCount = newList.length;
					}
				});
			},
			onPageJump(url) {
				uni.navigateTo({
					url: url
				});
			},
			onTokenJump(url) {
				this.judgeLogin(() => {
					uni.navigateTo({
						url: url
					});
				});
			},
			onTokenJump1(url) {
				this.judgeLogin(() => {
					uni.switchTab({
						url: url
					});
				});
			},
			copy(val = ''){
				const textArea = document.createElement('textarea');
				textArea.value = val;
				document.body.appendChild(textArea);
				textArea.select();
				try {
					document.execCommand('copy');
					uni.showToast({
						title: this.$t('copySuccess')
					});
				} catch (err) {
					console.error('Could not copy text: ', err);
				}
				document.body.removeChild(textArea);
			},
		}
	}
</script>

<style scoped>
	.uni-page-body{background-color: #F8F8F8 !important;}
	.page{min-height: 93vh;position: relative; background-color: #F8F8F8;}
	::v-deep .header_icon{display: none;}
	.minebg{
		width: 100vw;
		min-height: 93vh;
		background: url('/static/images/minebg.png') #F8F8F8;;
		background-size: 100%;
		background-repeat: repeat-x;
		font-family: Poppins, Poppins;
	}
	.minebg .v1{
		float: right; padding-right: 20upx;
	}
	.minebg .v2{
		clear: both; width: 90vw; margin: auto;
	}
	.minebg .v2 .login{
		width: 300upx; float: left; font-size: 16pt; font-weight: 700; height:200upx; line-height: 200upx;
	}
	.minebg .v2 .login1{
		width: 65%; float: left; font-size: 16pt; font-weight: 700; height:200upx; line-height: 60upx; padding-top: 20px;
	}
	.minebg .v2 .login1 .s{
		overflow: hidden; white-space: nowrap; text-overflow: ellipsis; width: 220px; display: block;
	}
	.minebg .v2 .login1 .i{
		width: 24rpx; height: 24rpx; float:left; margin-top: 16rpx; margin-left: 10rpx;
	}
	.minebg .v3{
		width: 94vw; height: 120upx; background-color:#333; margin: 20upx auto; border-radius: 30upx;
	}
	.minebg .v3 .dj{
		background: url('/static/images/hybg.png'); background-size: 100%; height: 120upx; border-radius: 30upx;
	}
	.minebg .v3 .dj .sj{
		width: 50%; float: left; padding-top: 25upx;
	}
	.minebg .v3 .dj .sj3{
		width: 30%; float: left; padding-top: 35upx;
	}
	.minebg .b{
		width: 160rpx; height: 60rpx; 
		background: linear-gradient( 270deg, #F8E0D3 0%, #FFAF85 100%); 
		border-radius: 6px 6px 6px 6px;
		font-family: Poppins, Poppins;
		font-weight: bold;
		font-size: 13px;
		color: #610855;
		line-height: 30px;
		text-align: center;
		font-style: normal;
		text-transform: none;
		padding: 0px;
		float: right;
	}
	.minebg .v3 .dj .sj1{
		width: 206px; height: 21px; font-family: Poppins, Poppins; font-weight: 700; font-size: 14px; line-height: 20px; text-align: left; color: #F8E1D6;
	}
	.minebg .v3 .dj .sj2{
		width: 206px; height: 21px; font-family: Poppins, Poppins; font-weight: 400; font-size: 12px; line-height: 20px; text-align: left; color: #A7A8B4;
	}
	.minebg .v4{
		width: 94vw;margin: 20upx auto; border-radius: 30upx;
	}
	.minebg .v4 .wallet{
		background-color: #fff; border-radius: 10px; padding: 10px 15px;
	}
	.minebg .v4 .wallet .title{
		font-weight: 500; font-size: 14px; color: #999999; line-height: 18px;
	}
	.minebg .v4 .wallet .num{
		width: 100%; line-height: 40px; margin-top: 5px; font-size: 18px; background: url('/static/images/109.png'); height: 40px; background-repeat: no-repeat;background-position:right bottom
	}
	.minebg .v4 .wallet .num1{
		width: 100%; line-height: 40px; margin-top: 5px; font-size: 18px; background: url('/static/images/4.png'); height: 40px; background-repeat: no-repeat;background-position:right bottom
	}
	.minebg .v4 .wallet .s{
		font-weight: 500;font-size: 16px;color: #3D3D3D;line-height: 20px; float: left; margin-left: 10px;
	}
	.minebg .v4 .wallet .i{
		width: 20px; height: 18px; float: left;
	}
	.item{
		margin: 0upx 20upx;
	}
</style>
