<template>
	<NavBar />
	<view class="container">
		<view class="swiper">
			<HomeSwiper :position="1" />
		</view>
		<view class="title">
			<PageTitle :title="$t('menu.download')" />
		</view>
		<view class="content">
			<Segmented
				styleType="text"
				:activeFontWeight="700"
				gap="13px"
				thumbHeight="3px"
				underLineHeight="0px"
				:current="current"
				:values="items"
				@clickItem="onClickItem"
				inActiveColor="#999999"
				activeColor="#000"
			></Segmented>
			<view v-show="current === 0" class="downListWrapper">
				<image src="/static/download/MT4.png" mode="aspectFit" style="width: 151px; height: 151px"></image>
				<view class="downList">
					<view v-for="item in MT4DownList" :key="item.id" class="downItem">
						<image :src="item.logo_name" mode="aspectFit" class="downItemImg"></image>
						<view class="">
							<uni-link :href="item.file_url" :text="item.title" :showUnderLine="false" color="#333333"></uni-link>
						</view>
					</view>
				</view>
			</view>
			<view v-show="current === 1" class="downListWrapper">
				<image src="/static/download/MT5.png" mode="aspectFit" style="width: 172px; height: 146px"></image>
				<view class="downList">
					<view v-for="item in MT5DownList" :key="item.id" class="downItem">
						<image :src="item.logo_name" mode="aspectFit" class="downItemImg"></image>
						<view class="">
							<uni-link :href="item.file_url" :text="item.title" :showUnderLine="false" color="#333333"></uni-link>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import Segmented from '@/pages/components/segmented/index.vue';
import { getDownList } from '@/services/download/download';
export default {
	data() {
		return {
			current: 0,
			items: ['MT4', 'MT5'],
			MT4DownList: [],
			MT5DownList: []
		};
	},
	methods: {
		async getDownListData() {
			const res = await getDownList();
			if (res && res.code === 0) {
				this.MT4DownList = res.data.mt4List;
				this.MT5DownList = res.data.mt5List;
			}
		},
		onClickItem(e) {
			if (this.current != e.currentIndex) {
				this.current = e.currentIndex;
			}
		}
	},
	created() {
		this.getDownListData();
	},
	components: { Segmented }
};
</script>

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