<template>
	<NavBar />
	<view class="container">
		<view class="swiper">
			<HomeSwiper :position="1" />
		</view>
		<view class="title">
			<PageTitle :title="$t('menu.fts')" />
		</view>
		<view class="ftsSegmentedWrapper">
			<Segmented
				styleType="text"
				fontSize="16px"
				gap="13px"
				:current="current"
				:values="items"
				@clickItem="onClickItem"
				inActiveColor="#999999"
				activeColor="#000"
			></Segmented>
		</view>
		<view class="webViewWrapper" v-if="current == 0">
			<!--  #ifdef  H5 -->
			<iframe :src="ftsUrl" frameborder="0" style="width: 100%; height: 100%"></iframe>
			<!--  #endif -->
		</view>
		<view class="webViewWrapper" v-if="current == 1">
			<!--  #ifdef  H5 -->
			<iframe :src="loginUrl" frameborder="0" style="width: 100%; height: 100%"></iframe>
			<!--  #endif -->
		</view>
	</view>
</template>

<script>
import Segmented from '@/pages/components/segmented/index.vue';
export default {
	data() {
		return {
			current: 0,
			items: [this.$t('fts.fts'), this.$t('fts.login')],
			ftsUrl: 'https://ratings.htfx.co/widgets/ratings?widgetKey=social-ratings',
			loginUrl: 'https://copytrade.htfx.co/portal/login?redirectUrl=%2F',
			webviewStyles: {
				width: '100%',
				height: '100%'
			}
		};
	},
	methods: {
		onClickItem(e) {
			if (this.current != e.currentIndex) {
				this.current = e.currentIndex;
			}
		}
	},
	created() {
		// #ifdef H5
		const tempArr = window.location.origin.split('.');
		const domain = tempArr?.[tempArr?.length - 1] ?? 'co';
		this.ftsUrl = `https://ratings.htfx.${domain}/widgets/ratings?widgetKey=social-ratings`;
		this.loginUrl = `https://copytrade.htfx.${domain}/portal/login?redirectUrl=%2F`;
		// #endif
	},
	components: {
		Segmented
	}
};
</script>

<style lang="scss" scoped>
@import './index.scss';
</style>
