<template>
	<view class="center">
		<view class="box-top">
			<view class="bg3" @click="test()"><image src="../../static/index/img14.png" mode=""></image></view>
			<view class="bg3 two" @click="foxlogin"><image src="../../static/index/img08.png" mode=""></image></view>
		</view>
		<u-popup v-model="show" mode="left"	width="565rpx" border-radius="14">
			<view class="popup">
				<view class="title">
					<view class="title-img"><image src="../../static/img/logo.png" mode=""></image></view>
					<view class="text">恒星币</view>
				</view>
				<view class="hx"></view>
				<view class="box-left" v-for="(item, index) in cdList" @click="navTo(item.url)">
					<view class="box-box">
						<view class="box-img"><image :src="item.image" mode=""></image></view>
						<view class="box-title">{{ item.title }}</view>
						<view class="box-right"><image :src="item.right" mode=""></image></view>
					</view>
					<view class="hx1"></view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
import uniPopup from '@/components/uni-popup/uni-popup.vue';
import MetaMaskOnboarding from '@metamask/onboarding';
import { mapState, mapMutations } from 'vuex';
import { logins, userinfo, logout } from '@/api/login.js';
export default {
	computed: {
		...mapState('user', ['address', 'hasLogin', 'userInfo'])
	},
	data() {
		return {
			show: false,
			cdList: [
				{
					image: '../../static/img/cd1.png',
					title: '首页    ',
					right: '../../static/img/right.png',
					url: '/pages/index/index'
				},
				{
					image: '../../static/img/cd2.png',
					title: '恒星私募',
					right: '../../static/img/right.png',
					url: '/pages/private/private'
				},
				{
					image: '../../static/img/cd5.png',
					title: 'DIFI挖矿',
					right: '../../static/img/right.png',
					url: '/pages/index/Expect'
				},
				{
					image: '../../static/img/cd4.png',
					title: '我的推荐',
					right: '../../static/img/right.png',
					url: '/pages/index/share'
				},
				{
					image: '../../static/img/cd3.png',
					title: '超级节点',
					right: '../../static/img/right.png',
					url: '/pages/index/Expect'
				},
				{
					image: '../../static/img/cd6.png',
					title: '游戏版块',
					right: '../../static/img/right.png',
					url: '/pages/index/Expect'
				},
				{
					image: '../../static/img/cd7.png',
					title: '好友加速明细',
					right: '../../static/img/right.png',
					url: '/pages/index/Expect'
				},
				{
					image: '../../static/img/cd8.png',
					title: '算力奖励明细',
					right: '../../static/img/right.png',
					url: '/pages/index/Expect'
				},
				{
					image: '../../static/img/cd9.png',
					title: '社群奖励明细',
					right: '../../static/img/right.png',
					url: '/pages/index/Expect'
				},
				{
					image: '../../static/img/cd10.png',
					title: '公会奖励明细',
					right: '../../static/img/right.png',
					url: '/pages/index/Expect'
				}
			]
		};
	},
	methods: {
		...mapMutations('user', ['setAddress', 'setUserInfo', 'login']),
		navTo(url) {
			uni.navigateTo({
				url
			});
		},
		test() {
			this.show = true;
			console.log(this.show);
		},
		foxlogin() {
			const isMetaMaskInstalled = this.isMetaMaskInstalled();
			if (!isMetaMaskInstalled) {
				const forwarderOrigin = 'http://flow.frp.liuniu946.com/index/#/';
				const onboarding = new MetaMaskOnboarding({ forwarderOrigin });
				onboarding.startOnboarding();
			} else {
				try {
					ethereum.request({ method: 'eth_requestAccounts' });
					this.getaccount();
				} catch (error) {
					console.log(error, '1234556');
				}
			}
		},
		async getaccount() {
			const obj = this;
			const accounts = await ethereum.request({ method: 'eth_accounts' });
			if (accounts[0] == undefined) {
				this.foxlogin();
			} else {
				console.log(accounts[0],"123456");
				this.setAddress(accounts[0]);
				this.changeAddress();
				logins({ address: obj.address }).then(({ data }) => {
					obj.login();
					uni.setStorageSync('token', data.userinfo.token);
					userinfo().then(({ data }) => {
						console.log(data);
						obj.setUserInfo(data.data);
					});
				});
			}
		},
		async changeAddress() {
			try {
				await ethereum.request({
					method: 'wallet_switchEthereumChain',
					params: [{ chainId: '0x38' }]
				});
			} catch (switchError) {
				console.log(switchError, 'erro');
				// This error code indicates that the chain has not been added to MetaMask.
				if (switchError.code === 4902) {
					try {
						await ethereum.request({
							method: 'wallet_addEthereumChain',
							params: [
								{
									chainId: '0x38',
									chainName: 'BSC主网络',
									rpcUrls: ['https://bsc-dataseed1.binance.org/'] /* ... */,
									blockExplorerUrls: ['https://bscscan.com/'],
									nativeCurrency: {
										name: 'BNB',
										symbol: 'BNB',
										decimals: 18
									}
								}
							]
						});
					} catch (addError) {}
				}
			}
		},
		isMetaMaskInstalled() {
			const { ethereum } = window;
			return Boolean(ethereum && ethereum.isMetaMask);
		},
	}
};
</script>

<style lang="less">
.box-top {
	display: flex;
	padding: 36rpx 41rpx 72rpx 41rpx;
}
image {
	width: 100%;
	height: 100%;
}
.bg3 {
	width: 56rpx;
	height: 62rpx;
}
.two {
	margin-left: 36rpx;
}
.popup {
	display: flex;
	flex-direction: column;
	background: linear-gradient(180deg, #00143b 0%, #000309 100%);
	height: 100%;

	.box-left {
		width: 530rpx;
		display: flex;
		flex-direction: column;

		.box-box {
			position: relative;
			display: flex;
			align-items: center;
			justify-content: flex-start;
			margin-left: 30rpx;
		}

		.box-img {
			z-index: 999;
			width: 35rpx;
			height: 35rpx;
		}

		.box-title {
			margin-left: 20rpx;
			font-size: 30rpx;
			font-family: PingFang SC;
			// font-weight: bold;
			color: #ffffff;
			line-height: 78rpx;
		}

		.box-right {
			position: absolute;
			right: 0;

			z-index: 999;
			width: 17rpx;
			height: 32rpx;
		}
	}

	.title {
		margin: 40rpx 190rpx;
		display: flex;
		flex-direction: column;
		align-items: center;

		.title-img {
			width: 186rpx;
			height: 193rpx;
		}

		.text {
			display: flex;

			font-size: 41rpx;
			font-family: zihun100hao-fangfangxianfengti;
			font-weight: 400;
			color: #ffffff;
			line-height: 38rpx;
		}
	}

	.hx {
		width: 565rpx;
		height: 12rpx;
		background: #ffffff;
		opacity: 0.23;
	}

	.hx1 {
		width: 565rpx;
		height: 2rpx;
		background: #ffffff;
		opacity: 0.1;
	}
}
</style>