<template>
	<view class="content">
		<view class="my-head">
			<view class="my-info">
				<view class="my-a">
					<view class="my-img">
						<!-- <img :src=`http://openweathermap.org/img/w/${item.weather[0].icon}.png`> -->

						<image :src="'https://apitest.luck-work.com/'+MyInfo.headImgPath" mode=""></image>
					</view>
					<view class="my-nameid">
						<view class="my-name">
							{{MyInfo.nickname}}
						</view>
						<view class="my-id">
							ID: {{MyInfo.userId}}
						</view>
					</view>
				</view>
				<view class="my-b">
					<view class="my-tel">
						Mobile: +{{areaCode}} {{MyInfo.mobile}}
					</view>
					<view class="my-bal flex">
						<view>Available Balance: {{currentBalance}}</view>
						<!-- 					<view class="my-ap">
						A+ Plan
					</view> -->
					</view>
				</view>
				<view class="my-c flex">
					<view class="my-btn1" @click="goRecharge()">
						recharge
					</view>
					<view class="my-btn2" @click="goWithdraw">
						Withdraw
					</view>
				</view>
			</view>

		</view>

		<view class="my-bg">
			<view class="my-body">
				<view class="my-body-item" v-for="(item,index) in myAList" :key="item.id" @click="go(index)">
					{{item.text}}
				</view>

			</view>
			<view class="my-body-out" @click="logout">
				logout
			</view>
			<cont></cont>

		</view>

		<u-mask :show="transferCode==1" :z-index="888"></u-mask>
		<view class="tc" v-show="transferCode==1">
			<view class="title">
				change name
			</view>
			<view class="tc_body">
				<view class="body_item ">
					<input type="text" value="" placeholder="New user name"
						placeholder-style="color: #BFC2CC;font-size:14px;text-transform: capitalize;padding-left:24rpx"
						v-model="newName" />
				</view>
			</view>
			<view class="anniu_con flex">
				<view class="cancel" @click="transferCode=0">
					cancel
				</view>
				<view class="cancel pupler" @click="changeName()">
					confirm
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import api from '@/utils/api'
	import utils from '@/utils'
	import cont from "@/components/cont/cont.vue"
	export default {
		data() {
			return {
				newName: '',
				MyInfo: {},
				transferCode: 0,
				currentBalance: '',
				areaCode: '',
				androidUrl: '',
				myAList: [{
						id: '3',
						text: 'Change Nick Name'
					},
					// {
					// 	id:'1',
					// 	text:'wallet'
					// },
					// {
					// 	id:'2',
					// 	text:'Bank card'
					// },
					// {
					// 	id:'3',
					// 	text:'Address'
					// },
					{
						id: '4',
						text: 'Reset password'
					},
					{
						id: '5',
						text: 'Android download'
					},
				],
			}
		},

		onLoad() {
			this.areaCode = uni.getStorageSync('siteInfo').areaCode;
			this.androidUrl = uni.getStorageSync('siteInfo').androidUrl;
			console.log(this.androidUrl, 78)
			this.currentBalance = uni.getStorageSync('currentBalance');
			this.currencySymbol = uni.getStorageSync('siteInfo').currencySymbol;








			const post = api.userInfo({
				"ticket": uni.getStorageSync('logInfo').data,
			})
			post.then(res => {
					this.MyInfo = res.data;
					console.log(this.MyInfo, 9990);
					uni.setStorage({
						key: 'MyInfo',
						data: res.data,
						success: function() {
							console.log('success')
						}
					});
					console.log(res.data)
				})
				.catch(e => {
					uni.showToast({
						title: e,
						icon: 'none',
						duration: 2500
					})
				})




		},
		methods: {

			go(i) {
				if (i == 0) {
					this.transferCode = 1
				}
				if (i == 1) {
					uni.navigateTo({
						url: '../../login/resetPassword/index'
					})
				}
				if (i == 2) {
					console.log(this.androidUrl)
					uni.navigateTo({
						url: this.androidUrl
					})
				}
			},
			changeName() {
				uni.showLoading({
					title: "loading"
				})
				if (this.newName == '') {
					uni.showToast({
						title: 'The new user name cannot be empty',
						icon: 'none',
						duration: 1500
					})
					return;
				}
				
				
				
				const post = api.updateNickname({
					"ticket": uni.getStorageSync('logInfo').data,
					"nickname": this.newName,
				})
				post.then(res => {
					if (res.success == true) {
						uni.showToast({
							title: 'Modified successfully',
							icon: 'success',
							duration: 1500
						})
						setTimeout(function() {
						location.reload();
						}, 1000)
					} else {
						uni.showToast({
							title: 'Modification failed',
							icon: 'none',
							duration: 1500
						})
					}
					console.log(res.data, 9990);
					})
					.catch(e => {
						uni.showToast({
							title: e,
							icon: 'none',
							duration: 2500
						})
					})
				
			},
			goRecharge() {
				uni.reLaunch({
					url: '../recharge/index'
				})
			},
			goWithdraw() {
				uni.navigateTo({
					url: '../withdrawl/index'
				})
			},
			logout() {
				const param = {
					"ticket": uni.getStorageSync('logInfo').data,
				}
				const post = api.loginOut(param)
				post.then(res => {

						uni.showLoading({
							title: 'loading'
						})
						if (res.data.success == true) {
							uni.showToast({
								title: 'Log out successfully',
								icon: 'success',
								duration: 1500
							})
							uni.removeStorageSync('logInfo');
							uni.removeStorageSync('ticket')
							setTimeout(function() {
								uni.reLaunch({
									url: '../../login/index'
								})
							}, 2000)


						} else {
							uni.showToast({
								title: 'Exit failed',
								icon: 'none',
								duration: 1500
							})
						}
						console.log(res.data, 9990);

					})
					.catch(e => {
						console.log(e)
					})

			}

		},
	}
</script>

<style>
	@import './index.css';
</style>
