<template>
	<NavBar />
	<view class="container">
		<view class="title">
			<PageTitle title="PAMM" />
		</view>
		<view class="pammSegmentedWrapper">
			<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="pammUrl" 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('pamm.pamm'), this.$t('pamm.login')],
			// pammUrl: 'https://stats.htfx.co/widgets/ratings?widgetKey=pamm-ratings',
			pammUrl: 'https://qq.com',
			// loginUrl: 'https://pamm.htfx.co/app/auth',
			loginUrl: 'https://qq.com',
			webviewStyles: {
				width: '100%',
				height: '50%'
			}
		};
	},
	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.pammUrl = `https://stats.htfx.${domain}/widgets/ratings?widgetKey=pamm-ratings`;
		this.loginUrl = `https://pamm.htfx.${domain}/app/auth`;
		// #endif
	},
	components: {
		Segmented
	}
};
</script>

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