<template>
	<view :class="['accountCard', isHistory ? 'isHistory' : '']">
		<view v-if="!isHistory && values.server_type == 'live'" class="live-server__name">{{ values?.mt4_server_name }}</view>
		<view v-if="!isHistory && values.server_type == 'test'" class="demo-server__name">{{ values?.mt4_server_name }}</view>
		<view v-if="isHistory" class="his-server__name">{{ values?.mt4_server_name }}</view>
		<view>
			<view class="accountCardHeader">
				<view class="headerLeft">
					<view class="accountType" v-if="values.mt4_type_name">{{ values.mt4_type_name }}</view>
					<view class="accountNumber">{{ values.mt4_login }}</view>
				</view>
				<view v-if="!isHistory">
					<uni-icons v-show="!moreContentVisible" class="moreIcon" type="more-filled" size="32" @click="changeMoreContentVisible"></uni-icons>
					<uni-icons
						v-show="moreContentVisible"
						style="width: 16px; height: 16px"
						class="moreIcon"
						type="closeempty"
						:size="16"
						@click="changeMoreContentVisible"
					></uni-icons>
				</view>
				<view v-else class="historyAccountTag">{{ getHistoryAccountType() }}</view>
			</view>
			<view v-show="!moreContentVisible" class="accountDetails">
				<view class="detailItem">
					<view class="label">{{ $t('home.mtBalance') }}</view>
					<view class="value">
						{{ getNumberLocaleIntegerPart(values?.mt4_balance) }}
						<text class="valueAfter">.{{ getNumberDecimalPart(values?.mt4_balance) }} {{ values?.ifCent === 'NO' ? 'USD' : 'USC' }}</text>
					</view>
				</view>
				<view class="detailItem">
					<view class="label">{{ $t('home.mtEquity') }}</view>
					<view class="value">
						{{ getNumberLocaleIntegerPart(values?.equity) }}
						<text class="valueAfter">.{{ getNumberDecimalPart(values?.equity) }} {{ values?.ifCent === 'NO' ? 'USD' : 'USC' }}</text>
					</view>
				</view>
				<view class="detailItem">
					<view class="label">{{ $t('home.credit') }}</view>
					<view class="value">
						{{ getNumberLocaleIntegerPart(values?.mt4_credit) }}
						<text class="valueAfter">.{{ getNumberDecimalPart(values?.mt4_credit) }} {{ values?.ifCent === 'NO' ? 'USD' : 'USC' }}</text>
					</view>
				</view>
				<view class="detailItem">
					<view class="label">{{ $t('home.mtLeverage') }}</view>
					<view class="value">{{ isValidNumber(values?.mt4_leverage) ? `1:${values?.mt4_leverage}` : '-' }}</view>
				</view>
			</view>
			<view v-show="moreContentVisible" class="moreContent">
				<view class="moreContentItems">
					<view class="moreContentItem" @click="toAdjustLeveragePage">
						<image class="icon" src="/static/leverage.png" mode="aspectFit"></image>
						<text>{{ $t('home.leverage') }}</text>
					</view>
					<view class="moreContentItem" @click="toTradeRecordPage">
						<image class="icon" src="/static/tradeRecord.png" mode="aspectFit"></image>
						<text>{{ $t('home.tradeRecord') }}</text>
					</view>
					<view class="moreContentItem" @click="toChangeTradePwdPage">
						<image class="icon" src="/static/unlock.png" mode="aspectFit"></image>
						<text>{{ $t('home.changeTradePwd') }}</text>
					</view>
					<view class="moreContentItem" @click="toChangeROPwdPage">
						<image class="icon" src="/static/unlock_eye.png" mode="aspectFit"></image>
						<text>{{ $t('home.changeROPwd') }}</text>
					</view>
				</view>
				<view class="statusTag" @click="handleFileAccount">{{ $t('home.filedAccount') }}</view>
			</view>
			<view v-if="!isHistory && values.server_type === 'live'">
				<view class="divider"></view>
				<view class="bottomBtns" v-if="values.server_type === 'live'">
					<view class="btn deposit" @click="toDepositPage">{{ $t('home.goldin') }}</view>
					<view class="btn" @click="toWithdrawPage">{{ $t('home.goldout') }}</view>
					<view class="btn" @click="toTransferPage">{{ $t('home.transfer') }}</view>
				</view>
			</view>
			<view v-else-if="isHistory" class="historyAccountTip">
				<text>{{ $t('home.filedAccountTip') }}</text>
				<!-- <view class="reactivateBtn">{{ $t('home.reactivate') }}</view> -->
			</view>
		</view>
	</view>
</template>

<script>
import { isValidNumber } from '@/utils/const.ts';
import { savePlaceFile } from '@/services/home/home.ts';
import { getNumberLocaleIntegerPart, getNumberDecimalPart } from '@/utils/const.ts';
export default {
	name: 'AccountCard',
	props: {
		values: {
			type: Object,
			required: true,
			default: undefined
		},
		isHistory: {
			type: Boolean,
			required: false,
			default: false
		},
		handleFileAccount: {
			type: Function,
			required: false
		}
	},
	data() {
		return {
			moreContentVisible: false
		};
	},
	methods: {
		getNumberLocaleIntegerPart: getNumberLocaleIntegerPart,
		getNumberDecimalPart: getNumberDecimalPart,
		changeMoreContentVisible() {
			this.moreContentVisible = !this.moreContentVisible;
		},
		isValidNumber: isValidNumber,
		getHistoryAccountType() {
			if (this.values.server_type === 'test') {
				return this.$t('home.demo');
			} else {
				return this.$t(`home.realMT${this.values.mt_versions}`);
			}
		},
		navigatetoTarget(target) {
			uni.navigateTo({
				url: target
			});
		},
		toDepositPage() {
			uni.setStorageSync('curs', JSON.stringify(this.values.mt4_server));
			uni.setStorageSync('curl', JSON.stringify(this.values.mt4_login));
			uni.navigateTo({
				url: '/pages/capital/deposit/index'
			});
		},
		toWithdrawPage() {
			uni.navigateTo({
				url: `/pages/capital/withdraw/index?mtLogin=${this.values.mt4_login}`
			});
		},
		toTransferPage() {
			uni.navigateTo({
				url: `/pages/capital/transfer/index?mtLogin=${this.values.mt4_login}`
			});
		},
		toAdjustLeveragePage() {
			uni.navigateTo({
				url: `/pages/home/adjustLeverage/index?mt4_login=${this.values.mt4_login}&mt4_server=${this.values.mt4_server}&mt4_leverage=${this.values.mt4_leverage}`
			});
		},
		toTradeRecordPage() {
			uni.navigateTo({
				url: `/pages/home/tradeRecord/index?mt4_login=${this.values.mt4_login}&mt4_server=${this.values.mt4_server}`
			});
		},
		toChangeTradePwdPage() {
			uni.navigateTo({
				url: `/pages/home/changeTradePwd/index?mt4_login=${this.values.mt4_login}&mt4_server=${this.values.mt4_server}`
			});
		},
		toChangeROPwdPage() {
			uni.navigateTo({
				url: `/pages/home/changeROPwd/index?mt4_login=${this.values.mt4_login}&mt4_server=${this.values.mt4_server}`
			});
		}
	}
};
</script>

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