<template>
	<view class="page">
		<nav-bar title="Help Center" bgColor="#fff"></nav-bar>
		<view style="padding: 20px 15px; font-size: 16px; color: #3d3d3d;">
			Official group
		</view>
		<view class="cell_list" @click="open('qq_group')">
			<view class="cell_left txt">
				<image src="/static/images/h1.png" mode="cover" style="width: 30px; height: 30px; border-radius: 10px; margin-right: 5px;"></image>
				QQ group
			</view>
			<view class="cell_right arrow"></view>
		</view>
		<view class="cell_list" @click="open('telegram_group')">
			<view class="cell_left txt">
				<image src="/static/images/h2.png" mode="cover" style="width: 30px; height: 30px; border-radius: 10px; margin-right: 5px;"></image>
				Telegram</view>
			<view class="cell_right arrow"></view>
		</view>
		<view class="cell_list" @click="open('sigua_group')">
			<view class="cell_left txt">
				<image src="/static/images/h3.png" mode="cover" style="width: 30px; height: 30px; border-radius: 10px; margin-right: 5px;"></image>
				Loofah group</view>
			<view class="cell_right arrow"></view>
		</view>
		<view style="padding: 20px 15px; font-size: 16px; color: #3d3d3d;">
			Wallet download
		</view>
		<view class="cell_list">
			<view class="cell_left txt">
				<image src="/static/images/h4.png" mode="cover" style="width: 30px; height: 30px; border-radius: 10px; margin-right: 5px;"></image>
				Binance Download</view>
			<view class="cell_right" @click="copy(init.wallet_download['Binance'])">Copy URL</view>
		</view>
		<view class="cell_list">
			<view class="cell_left txt">
				<image src="/static/images/h5.png" mode="cover" style="width: 30px; height: 30px; border-radius: 10px; margin-right: 5px;"></image>
				Okex Download
			</view>
			<view class="cell_right" @click="copy(init.wallet_download['Okex'])">Copy URL</view>
		</view>
		<view class="cell_list">
			<view class="cell_left txt">
				<image src="/static/images/h6.png" mode="cover" style="width: 30px; height: 30px; border-radius: 10px; margin-right: 5px;"></image>
				TokenPocket Download
			</view>
			<view class="cell_right" @click="copy(init.wallet_download['TokenPocket'])">Copy URL</view>
		</view>
		<view class="cell_list">
			<view class="cell_left txt">
				<image src="/static/images/h3.png" mode="cover" style="width: 30px; height: 30px; border-radius: 10px; margin-right: 5px;"></image>
				Open Sesame  Download
			</view>
			<view class="cell_right" @click="copy(init.wallet_download['Open Sesame'])">Copy URL</view>
		</view>
		
		<uni-popup ref="popup" type="dialog" :is-mask-click="true" background-color="#fff" borderRadius="40rpx">
			<view class="dialog">
				<view class="title">{{dialogTitle}}</view>
				<view style="padding-bottom: 20px; width: 100%;" v-for="(value, key) in list" :key="key">
					<view class="v1" style="margin-left: 10px;">{{key}}:</view>
					<view class="v1" style="margin-left: 40rpx;">{{value}} </view>
					<image style="width: 36rpx; height: 30rpx; float: right; margin-left: 20rpx; margin-top: 10rpx;" src="/static/images/copy.png" @click="copy(value)" mode="cover"></image>
					<view style="clear: both;"></view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	export default {
		data() {
			return {
				init: {},
				dialogTitle: 'Select a network',
				list: {},
				type: '',
			};
		},
		computed: {
		},
		//第一次加载
		onLoad(e) {
			this.$http.get('/api/common/init?lang='+this.$i18n.locale).then(res => {
				this.init = res.data;
			});
		},
		//页面显示
		onShow() {},
		//方法
		methods: {
			open(type){
				this.type = type;
				switch(type){
					case 'qq_group':
						this.list = this.init[type];
						this.dialogTitle = 'QQ Group';
						break;
					case 'telegram_group':
						this.list = this.init[type];
						this.dialogTitle = 'Telegram Group';
						break;
					case 'sigua_group':
						this.list = this.init[type];
						this.dialogTitle = 'Loofah Group';
						break;
				}
				this.$refs.popup.open('dialog');
			},
			onPageJump(url) {
				uni.navigateTo({
					url: url
				});
			},
			onTokenJump(url) {
				this.judgeLogin(() => {
					uni.navigateTo({
						url: url
					});
				});
			},
			handleClose(done) {
				this.dialogVisible = false;
			},
			openQQChat(number){
				// #ifdef APP-PLUS
				if (plus.os.name === "Android") {
				    var main = plus.android.runtimeMainActivity();
				    var Intent = plus.android.importClass('android.content.Intent');
				    var Uri = plus.android.importClass('android.net.Uri');
				    var intent = new Intent(Intent.ACTION_VIEW, Uri.parse("mqqwpa://im/chat?chat_type=wpa&uin=" + qqNumber));
				    main.startActivity(intent);
				  } else if (plus.os.name === "iOS") {
				    plus.runtime.launchApplication({
				      action: "mqq://im/chat?chat_type=wpa&uin=" + qqNumber + "&version=1&src_type=web"
				    }, function(e) {
				      if (e.error) {
				        plus.nativeUI.confirm("检查到您未安装qq，请先到App Store搜索下载？", function(i) {
				          if (i.index === 0) {
				            window.location.href = "https://itunes.apple.com/cn/app/mqq/";
				          }
				        });
				      }
				    });
				  }
				// #endif
				// #ifdef H5
				location.href = 'mqqwpa://im/chat?chat_type=wpa&uin='+number+'&version=1&src_type=web';
				// #endif
			},
			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);
			},
			// open1(v){
			// 	switch(this.type){
			// 		case 'qq_group':
			// 			openQQChat(v);
			// 			break;
			// 		case 'telegram_group':
			// 			location.href = 'https://t.me/v'
			// 			//（用户名）
			// 			break;
			// 		case 'sigua_group':
			// 			location.href = 'https://t.me/v'
			// 			break;
			// 	}
			// }
		},
		//页面隐藏
		onHide() {},
		//页面卸载
		onUnload() {},
		//页面下来刷新
		onPullDownRefresh() {},
		//页面上拉触底
		onReachBottom() {},
		//用户点击分享
		onShareAppMessage(e) {
			return this.wxShare();
		}
	};
</script>
<style lang="scss" scoped>
	@import '@/style/mixin.scss';
	body{background-color: #F8F8F8;}
	.page{min-height: 100vh;position: relative; background-color: #F8F8F8;}
	.cell_list {
		padding: 30rpx 30rpx;
		margin: 0rpx 30rpx;
		border-bottom: 1px solid #ddd;
	}
	.txt{
		font-weight: 500;
		font-size: 16px;
		color: #3d3d3d
	}
	.cell_right image {
		width: 140rpx;
		height: 140rpx;
		border-radius: 50%;
	}
	.dialog{
		width: 80vw; padding: 20rpx 30rpx; border-radius: 40rpx; line-height: 50rpx;
	}
	.dialog .title{
		font-size: 36rpx; font-weight: bold; text-align: center; margin-bottom: 30rpx;
	}
	.dialog .v1{
		font-weight: 600;font-size: 16px;color: #1D61E7; float:left;
	}
</style>