<template>
	<NavBar />
	<view class="container">
		<view class="title">
			<PageTitle :title="$t('leverageAdjustment.pageTitle')" />
		</view>
		<uni-forms ref="leverageForm" :modelValue="leverageFormData" :rules="leverageFormRules">
			<view class="availableMoneyOut">
				{{ $t('form.mtAccount.label') }}
				<text class="value">{{ mt4_login ?? '-' }}</text>
			</view>
			<view class="availableMoneyOut">
				{{ $t('leverageAdjustment.currentLeverage') }}
				<text class="value">1:{{ mt4_leverage_old ?? '-' }}</text>
			</view>
			<uni-forms-item name="mt4_leverage_new">
				<text class="uni-subtitle">{{ $t('form.newLeverage.label') }}</text>
				<uni-data-select
					:placeholder="$t('form.pleaseSelect')"
					:emptyTips="$t('common.empty')"
					:localdata="leverageOptions"
					v-model="leverageFormData.mt4_leverage_new"
				></uni-data-select>
			</uni-forms-item>
			<uni-forms-item name="safe_pass">
				<text class="uni-subtitle">{{ $t('form.CRMPassword.label') }}</text>
				<uni-easyinput type="password" trim="all" primaryColor="#29BBE4" v-model="leverageFormData.safe_pass"></uni-easyinput>
			</uni-forms-item>
		</uni-forms>
		<button class="primaryButton" type="button" :disabled="nextBtnLoading" @click="saveLeverage">
			<image v-show="nextBtnLoading" src="/static/loadingCircle.svg" mode="aspectFit" style="width: 16px; height: 16px"></image>
			{{ $t('form.next') }}
		</button>
	</view>
</template>

<script>
import { getApplyLeverageList, updateLeverage } from '@/services/home/home.ts';
import { getExchangeRate, getGoldRange } from '@/services/capital/deposit.ts';
import { saveTransfer } from '@/services/capital/transfer.ts';
import { getBankList } from '@/services/user.ts';
import { getDictByCode } from '@/services/common.ts';
import { UserLanguage } from '@/utils/const';
export default {
	name: '',
	data() {
		return {
			mt4_login: undefined,
			mt4_server: undefined,
			mt4_leverage_old: undefined,
			nextBtnLoading: false,
			leverageOptions: [],
			leverageFormData: {},
			leverageFormRules: {
				mt4_leverage_new: {
					rules: [
						{
							required: true,
							errorMessage: this.$t('form.newLeverage.required')
						}
					]
				},
				safe_pass: {
					rules: [
						{
							required: true,
							errorMessage: this.$t('form.CRMPassword.required')
						}
					]
				}
			}
		};
	},
	methods: {
		async getLeverageList() {
			const res = await getApplyLeverageList({
				mt_login: this.mt4_login,
				mt_server: this.mt4_server
			});
			if (res && res.code === 0) {
				this.leverageOptions = res.data.map((item) => ({
					text: item.leverage_id,
					value: item.leverage_id,
					disable: item.leverage_id == this.mt4_leverage_old
				}));
			}
		},
		async saveLeverage() {
			this.$refs.leverageForm.validate().then(async (fields) => {
				this.nextBtnLoading = true;
				const res = await updateLeverage({
					...fields,
					mt4_leverage_old: this.mt4_leverage_old,
					mt4_login: this.mt4_login,
					mt4_server: this.mt4_server,
					qcc_language: UserLanguage
				});
				this.nextBtnLoading = false;
				if (res && res.code === 0) {
					uni.redirectTo({
						url: '/pages/home/adjustLeverage/success/index'
					});
				} else {
					uni.redirectTo({
						url: `/pages/home/adjustLeverage/error/index?msg=${res.msg ?? this.$t('common.error.sysError')}`
					});
				}
			});
		}
	},
	onLoad(params) {
		this.mt4_login = params.mt4_login;
		this.mt4_server = params.mt4_server;
		this.mt4_leverage_old = params.mt4_leverage;
		this.getLeverageList();
	}
};
</script>

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