<template>
    <div class="app-container home">
        <div class="page-content" >
            <div class="title-bar" @click="back" >
                <svg-icon icon-class="back" style="width: 30px;height: 30px;margin-right: 20px;" />
                <span style="font-size: 32px;font-weight: 700;color: rgba(51, 51, 51, 1);" >{{ t('home.createAccount') }}</span>
            </div>
            <el-row :gutter="60" >
                <el-col :span="14">
                    <div class="account-form" >
                        <el-form ref="postRef" :model="form" :rules="rules" autocapitalize="off" size="large" label-position="top" style="user-select: none;" hide-required-asterisk >
                             <el-form-item :label="t('home.initAmount')" prop="mt4_init_amount" v-if="server_type == 'test'">
                                <el-select
                                    v-model="form.mt4_init_amount"
                                    :placeholder="t('common.selectChoose')"
                                    :clearable="false"
                                    style="width: 100%;"
                                    >
                                    <el-option v-for="(item, index) in amountList" :key="index" :label="item" :value="item" ></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item :label="t('home.mtLeverage')" prop="mt4_leverage" >
                                <el-select
                                    v-model="form.mt4_leverage"
                                    :placeholder="t('common.selectChoose')"
                                    :clearable="false"
                                    style="width: 100%;"
                                    >
                                    <el-option v-for="(item, index) in leverageList" :key="index" :label="item" :value="item" ></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item :label="t('home.mt4Password')" prop="mt4_password" >
                                <el-input v-model="form.mt4_password" type="password" show-password size="large" auto-complete="off" @input="handlePwd" ></el-input>
                            </el-form-item>
                            <el-form-item>
                                <password-validator v-if="form.mt4_password" ref="pv1" v-model="form.mt4_password" />
                            </el-form-item>
                            <el-form-item >
                                <el-button :loading="loading" @click="save" style="width: 100%;" type="primary">{{ t('home.applyOpen') }}
                                    <template #loading>
                                        <l-ring-2 size="20" stroke="2" stroke-length="0.25" bg-opacity="0.1" speed="0.8" color="white" style="margin-right: 17px;" ></l-ring-2>
                                    </template>
                                </el-button>
                            </el-form-item>
                        </el-form>
                    </div>
                </el-col>
                <el-col :span="10">
                    <div class="account-type" v-if="detail" >
                        <view class="type-name">{{ detail.name }}</view>
                        <!-- <div class="info">
                            <view class="v">{{ detail.mt4_group }}</view>
                        </div> -->
                        <div class="info">
                            <view class="k">{{ t('home.minAmount') }}</view>
                            <view class="v">{{ detail.in_min ? detail.in_min : 0 }}</view>
                        </div>
                    </div>
                </el-col>
            </el-row>
        </div>
    </div>
    </template>
    
<script setup name="ApplyMt">
import { useLocale } from 'element-plus'
import { useRoute } from 'vue-router';
import { queryMtTypeList, saveApplyMT } from '@/api/account'
import { queryBannerList, queryMtTypeListByDemo } from '@/api/common'
import PasswordValidator from "@/components/PasswordValidator"

let { proxy } = getCurrentInstance();
const { t } = useLocale()
const route = useRoute();
const detail = ref(null)

const loading = ref(false)
const id = route.params.id;
const type = route.query.type
const amountList = ref(['0'])
const leverageList = ref(['0'])
const server_type = ref('')
const pv1 = ref(null)

const d = reactive({
  form: {
    mt4_server: undefined,
    mt4_type_id: id,
    mt4_leverage: undefined,
    mt4_password: undefined,
    mt4_init_amount: 0,
    apply_opinion: ""
  },
  rules: {
    mt4_leverage: [{ required: true, message: "", trigger: "blur" }],
    // mt4_password: [{ required: true, message: "", trigger: "blur" }],
    mt4_init_amount: [{ required: true, message: "", trigger: "blur" }],
  }
});

const { form, rules } = toRefs(d);

if(type == 'demo') {
    queryMtTypeListByDemo({
        id: id
    }).then(resp => {
        detail.value = resp.data[0]
        server_type.value = resp.data[0].server_type
        if (resp.data[0].server_type != 'live' && resp.data[0].init_amount) {
            amountList.value = resp.data[0].init_amount.split(',')
        }
        if (resp.data[0].mt4_leverage) {
            leverageList.value = resp.data[0].mt4_leverage.split(',')
        }
        form.value.mt4_init_amount = amountList.value[0]
        form.value.mt4_leverage = leverageList.value[0]
        form.value.mt4_server = resp.data[0].mt4_server
        form.value.mt4_type_id = resp.data[0].id
    })
} else {
    queryMtTypeList({
        id: id
    }).then(resp => {
        detail.value = resp.data[0]
        server_type.value = resp.data[0].server_type
        if (resp.data[0].server_type != 'live' && resp.data[0].init_amount) {
            amountList.value = resp.data[0].init_amount.split(',')
        }
        if (resp.data[0].mt4_leverage) {
            leverageList.value = resp.data[0].mt4_leverage.split(',')
        }
        form.value.mt4_init_amount = amountList.value[0]
        form.value.mt4_leverage = leverageList.value[0]
        form.value.mt4_server = resp.data[0].mt4_server
        form.value.mt4_type_id = resp.data[0].id
    })
}


function back() {
    if (proxy.$route.query.noGoBack) {
    proxy.$router.push({ path: "/" });
    } else {
    proxy.$router.go(-2);
    }
}

function save() {
    if (pv1.value.check()) {
        loading.value = true
        saveApplyMT(form.value).then(resp => {
            loading.value = false
            if(resp.data.isAudit) {
                window.showTip({
                    title: t('home.auditMt'),
                    status: 'padding'
                })
            } else {
                window.showTip({
                    title: t('home.autoMt'),
                    status: 'success'
                })
            }
            back()
        })
    }
}

function handlePwd() {
    form.value.mt4_password = form.value.mt4_password.replace(/[^a-zA-Z0-9!@#]/g, '')
}
</script>

<style lang="scss" scoped>
.page-content {
    width: 100%;
    display: flex;
    flex-direction: column;
}

.title-bar {
    display: flex;
    align-items: center;
    width: fit-content;
    margin-bottom: 20px;
    cursor: pointer;
}

.account-form {
    padding-right: 60px;
    position: relative;
}

.account-form::after {
    position: absolute;
    right: 0;
    top: 0;
    content: '';
    width: 1px;
    height: 96px;
    background-color: rgba(204, 204, 204, 1);
}

.account-type {
    display: flex;
    flex-direction: column;

    .type-name {
        font-size: 18px;
        font-weight: 700;
        letter-spacing: 0px;
        line-height: 14px;
        color: rgba(7, 20, 40, 1);
        margin-bottom: 30px;
    }
    .info {
        width: 100%;
        display: flex;
        align-items: center;
        margin-bottom: 20px;

        .k {
            font-size: 16px;
            font-weight: 400;
            letter-spacing: 0px;
            line-height: 23.17px;
            color: rgba(102, 102, 102, 1);
            margin-right: 10px;
        }

        .v {
            font-size: 16px;
            font-weight: 400;
            letter-spacing: 0px;
            line-height: 23.17px;
            color: rgba(102, 102, 102, 1);
        }
    }
}
</style>