<template>
    <el-row v-show="step == 1" >
        <el-col :span="18">
            <el-row>
                <!-- apply -->
                <div class="goldin-form">
                    <el-form autocapitalize="off" :inline="true" label-position="top" size="large" :model="form" :rules="rules" ref="formRef"
                    :disabled="ioPowerMap!=null && !isEmpty(ioPowerMap.gold_in) && ioPowerMap.gold_in==1" >
                    <el-col :md="24" :lg="12" >
                        <el-form-item :label="t('capital.mt4_server')" prop="mt4_server" >
                            <el-select
                                v-model="form.mt4_server"
                                :placeholder="t('common.selectChoose')"
                                :clearable="false"
                                style="width: 100%"
                                @change="getMt4Login"
                            >
                                <el-option v-for="(item, index) in mtServerList" :key="index" :label="item.server_name" :value="item.id" ></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :md="24" :lg="12" >
                        <el-form-item :label="t('capital.mt4_login')" prop="mt4_login" >
                            <el-select
                                v-model="form.mt4_login"
                                :placeholder="t('common.selectChoose')"
                                :clearable="false"
                                style="width: 100%"
                                @change="mt4LoginChange"
                            >
                                <el-option v-for="(item, index) in mtLoginList" :key="index" :label="item.mt4_login" :value="item.mt4_login" ></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :md="24" :lg="12" >
                        <el-form-item :label="t('capital.currency_type')" prop="currency_type" >
                            <el-select
                                v-model="form.currency_type"
                                :placeholder="t('common.selectChoose')"
                                :clearable="false"
                                style="width: 100%"
                                @change="handleCurrencyTypeChange"
                            >
                                <template #label="{ label, value }">
                                    <div style="width: 100%;display: flex;justify-content: space-between;">
                                        <span>{{ label }} </span>
                                        <span style="color:rgba(153, 153, 153, 1)">{{ t('capital.exchangeRate')+ ':' + (exchangeRate ? exchangeRate : '-') }}</span>
                                    </div>
                                </template>
                                <template #empty>
                                    <div style="min-height: 40px;padding: 1px 15px;line-height: 40px;font-size: 14px;" >{{ t('capital.payNotCurrencyPleaseOther') }}</div>
                                </template>
                                <el-option v-for="(item, index) in currencyList" :key="index" :label="item.currency" :value="item.currency" ></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :md="24" :lg="12" v-if="channel && channel.pay_code.indexOf('LDAgency')>=0">
                        <el-form-item :label="t('capital.agencyMtLogin')" prop="pay_agency"  >
                            <el-select
                                v-model="form.pay_agency"
                                :placeholder="t('common.selectChoose')"
                                :clearable="false"
                                style="width: 100%"
                                value-key="id"
                                @change="handlePayAgencyChange"
                            >
                                <template #empty>
                                    <div style="min-height: 40px;padding: 1px 15px;line-height: 40px;font-size: 14px;" >{{ t('capital.payNotCurrencyPleaseOther') }}</div>
                                </template>
                                <el-option v-for="(item, index) in payAgencyList" :key="index" :label="item.user_code+'('+item.ib_id+')'+' '+item.mt_server_name+' '+item.mt_login" :value="item" ></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                      <el-col :md="24" :lg="12" v-if="channel && channel.pay_code.indexOf('PayOK')>=0">
                        <el-form-item :label="t('capital.optionPayment')" prop="option_payment"  >
                          <el-select
                              v-model="form.option_payment"
                              :placeholder="t('capital.optionPayment')"
                              :clearable="false"
                              style="width: 100%"
                              value-key="id"
                          >
                            <template #empty>
                              <div style="min-height: 40px;padding: 1px 15px;line-height: 40px;font-size: 14px;" >{{ t('capital.payNotCurrencyPleaseOther') }}</div>
                            </template>
                            <el-option v-for="(item, index) in payOkMethod" :key="index" :label="item.name" :value="item.code" ></el-option>
                          </el-select>
                        </el-form-item>
                      </el-col>
                    <el-col :md="24" :lg="12" >
                        <el-form-item :label="t('capital.usdAmount')" prop="usd_amount" >
                            <el-input type="number" v-model="form.usd_amount" min="0" @input="handleAmount" @mousewheel.native.prevent style="width: 100%" />
                            <div class="el-form-item__error" style="color: #14CC9E;" >{{ inAmountPlaceholder }}</div>
                        </el-form-item>
                    </el-col>
                    <el-col :md="24" :lg="12" v-if="channel && channel.pay_code.indexOf('LDAgency')>=0" >
                        <el-form-item :label="t('capital.subsidy')" >
                            <div v-if="subsidy_amount" >{{ subsidy_amount }}</div>
                        </el-form-item>
                    </el-col>

                      <el-col :md="24" :lg="12" v-if="channel && channel.pay_subsidy>=0 && channel.pay_subsidy">
                        <el-form-item :label="t('capital.paySubsidy')" >
                          <div v-if="pay_subsidy_amount" >{{ pay_subsidy_amount }}</div>
                        </el-form-item>
                      </el-col>

                    <el-col :md="24" :lg="12" v-if="!isEmpty(actId)" >
                        <el-form-item :label="t('capital.residuePresentedCredit')" >
                            <div v-if="presented_amount_residue" >{{ presented_amount_residue }}</div>
                        </el-form-item>
                    </el-col>
                    <el-col :md="24" :lg="12" v-if="!isEmpty(actId)" >
                        <el-form-item :label="t('capital.presentedCredit')" >
                            <div v-if="presented_credit" style="color: rgb(41, 187, 228);" >{{ presented_credit }}</div>
                        </el-form-item>
                    </el-col>
                    <el-col :md="24" :lg="12" >
                        <div style="display: flex;align-items: baseline;margin-top: 30px;">
                            <span style="font-size: 16px;margin-right: 10px;">{{ t('capital.currencyAmount') }}</span>
                            <div class="currency-amount">{{ '' + currencyAmount }}</div>
                        </div>
                    </el-col>
                        <el-form-item  style="width: 100%;">
                            <el-button :loading="payLoading" :disabled="!form.usd_amount || form.usd_amount < 0 || (ioPowerMap!=null && !isEmpty(ioPowerMap.gold_in) && ioPowerMap.gold_in==1)" 
                            class="sub-btn" type="primary" @click="doGoldIn" >{{ t('form.next') }}
                                <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-row>
        </el-col>
        <el-col :span="6">
            <div class="template-content">
                <div v-if="templateContent" v-html="templateContent"></div>
            </div>
        </el-col>
    </el-row>
    <!-- remittance -->
    <div v-show="step == 3" style="padding: 0 150px;" >
        <remittance :data="remittanceInfo" @last-step="handleLastStep" @submit="handleSubmit" />
    </div>
    <!-- remittance2 -->
    <div v-show="step == 2">
        <remittance2 :data="remittanceInfo" @last-step="handleLastStep" @submit="handleSubmit" />
    </div>
    <!-- remittance3 -->
    <div v-show="step == 6">
        <remittance3 :data="remittanceInfo" @last-step="handleLastStep" @submit="handleSubmit" />
    </div>
  <!-- one2Pay -->
    <div v-show="step == 7">
        <one2Pay :data="remittanceInfo" @last-step="handleLastStep" @submit="handleSubmit" />
    </div>
    <!-- LDAgency -->
    <div v-show="step == 4" style="padding: 0 150px;">
        <remittance-ld-agency :data="remittanceInfo" @last-step="handleLastStep" @submit="handleSubmit" />
    </div>
    <!-- success -->
    <div v-show="step == 5" style="padding: 0 300px;height: 100%;display: flex;flex-direction: column;justify-content: center;align-items: center">
        <div style="margin-bottom: 16px;line-height: 55px;display: flex;align-items: center;">
            <svg-icon icon-class="success" style="width: 55px;height: 55px;margin-right: 24px;" />
            <div style="font-size: 36px;font-weight: 700;" >{{ t('capital.goldin-success') }}</div>
        </div>
        <div style="font-size: 18px;font-weight: 400;color: rgba(102, 102, 102, 1);margin-bottom: 80px;" >{{ t('capital.success-desc') }}</div>
        <div style="width: 100%;display: flex;justify-content: space-between;">
            <el-button class="sub-btn dark-btn" type="primary" @click="closeChannel" >{{ t('capital.close') }}</el-button>
            <el-button class="sub-btn" type="primary" @click="reset" >{{ t('capital.goldin-continue') }}</el-button>
        </div>
    </div>
</template>

<script setup>
import { useLocale } from 'element-plus'
import { getIbMtLoginBankAsGoldInPage, goldInSave, getSubsidyById, calculatePresentedCredit } from '@/api/goldin'
import { remittanceSign } from '@/api/remittance'
import { mtServer as getMtServer, getCustomerMtLoginList, queryByMt4Login, getCurrencyByPay, getExchangeRate } from '@/api/common'
import { isEmpty, returnFloat, returnFloat3, round } from '@/utils/htfx'
import { serverLang } from '@/utils/i18n'
import { computed, onMounted, ref, watch } from 'vue'
import Remittance from './remittance'
import Remittance2 from './remittance2'
import Remittance3 from './remittance3'
import RemittanceLdAgency from './remittanceLDAgency'
import One2Pay from "@/views/capital/payChannel/one2Pay.vue";

const emit = defineEmits(['close-channel'])
const { proxy } = getCurrentInstance();
const { t } = useLocale()
const step = ref(1)
const payLoading = ref(false)
const mtServerList = ref([])
const mtLoginList = ref([])
const payAgencyList = ref([])
const currencyList = ref([])
const exchangeRate = ref(null)
let exchange_rate_sign = null
const payOkMethod = ref([])
const payOkMethodVND = ref([
  {"code":"ATM/Visa Master Card","name":"ATM/Visa Master Card"},
  {"name":"OFFLINEPAY","code":"OFFLINEPAY"},
  {"name":"Garena","code":"Garena"},
  {"name":"Gate","code":"Gate"},
  {"name":"Mobifone","code":"Mobifone"},
  {"name":"Vcoin","code":"Vcoin"},
  {"name":"Vietnamobile","code":"Vietnamobile"},
  {"name":"Viettel","code":"Viettel"},
  {"name":"Vinaphone","code":"Vinaphone"},
  {"name":"Zing","code":"Zing"},
  {"name":"BankVA","code":"BankVA"},
  {"name":"ACBVietQR","code":"ACBVietQR"},
  {"name":"AGRIBankQR","code":"AGRIBankQR"},
  {"name":"BIDVQR","code":"BIDVQR"},
  {"name":"MBVietQR","code":"MBVietQR"},
  {"name":"PVcombankQR","code":"PVcombankQR"},
  {"name":"TechcomVietQR","code":"TechcomVietQR"},
  {"name":"TPBankQR","code":"TPBankQR"},
  {"name":"VIBBankQR","code":"VIBBankQR"},
  {"name":"VietcomQR","code":"VietcomQR"},
  {"name":"VietinBankQR","code":"VietinBankQR"},
  {"name":"VPBankQR","code":"VPBankQR"},
  {"name":"Momo","code":"Momo"},
  {"name":"ViettelPay","code":"ViettelPay"},
  {"name":"ZaloPay","code":"ZaloPay"},
])

const payOkMethodIDR = ref([
  {"code":"Alfamart","name":"Alfamart"},
  {"code":"Indomaret","name":"Indomaret"},
  {"code":"CreditCard","name":"CreditCard"},
  {"code":"ConvenienceStore","name":"ConvenienceStore"},
  {"code":"QRIS","name":"QRIS"},
  {"code":"BCAVA","name":"BCAVA"},
  {"code":"BNIVA","name":"BNIVA"},
  {"code":"BRIVA","name":"BRIVA"},
  {"code":"CIMBVA","name":"CIMBVA"},
  {"code":"MandiriVA","name":"MandiriVA"},
  {"code":"PermataVA","name":"PermataVA"},
  {"code":"DANAWALLET","name":"DANAWALLET"},
  {"code":"LINKAJA-APP","name":"LINKAJA-APP"},
  {"code":"LINKAJA-WEB","name":"LINKAJA-WEB"},
  {"code":"OVOWALLET","name":"OVOWALLET"},
  {"code":"SHOPEEPAY-APP","name":"SHOPEEPAY-APP"},
  {"code":"SHOPEEPAY-WEB","name":"SHOPEEPAY-WEB"},
])

const subsidy = ref(null)
const subsidy_amount = computed(() => {
    if (form.value.usd_amount && subsidy.value) {
        return '$'+(Number(parseFloat(subsidy.value).toFixed(2)) / 100 * Number(form.value.usd_amount)).toFixed(2)
    }
    return null
})
const pay_subsidy_amount = computed(() => {
    if (form.value.usd_amount && props.channel.pay_subsidy) {
        return '$'+(Number(parseFloat(props.channel.pay_subsidy).toFixed(2)) / 100 * Number(form.value.usd_amount)).toFixed(2)
    }
    return null
})

const props = defineProps({
    actId: String,
    mtServer: String,
    mtLogin: String,
    actMtServer: String,
    actMtLogin: String,
    actMtServerName: String,
    templateContent: String,
    ioPowerMap: {
        type: Object,
        default: {}
    },
    channel: Object
})

const checkUsdAmount = (rule, value, callback) => {
    if (value <= 0) {
        callback(new Error(''))
    } else {
        let ioThreshold = ioGoldConf[form.value.mt4_server+':'+form.value.mt4_login];
        if(isEmpty(ioThreshold)) ioThreshold = {};
        //跟系统配置对比
        let min_in = parseFloat(returnFloat(ioThreshold.in_min));
        if(isEmpty(min_in)) min_in=0.00;
        if(value<min_in){
            callback(new Error(''))
        } else {
            callback()
        }
    }
}

const form = ref({
    act_id: props.actId,
    pay_agency: null,
    currency_type: null,
    usd_amount: null,
    mt4_server: null,
    mt4_login: null,
    option_payment:null
  })

const rules = ref({
    mt4_server: [{ required: true, message: "", trigger: "blur" }],
    mt4_login: [{ required: true, message: "", trigger: "blur" }],
    usd_amount: [
        { required: true, message: "", trigger: "blur" },
        { type: "number", validator: checkUsdAmount, trigger: "blur" }
    ],
    currency_type: [{ required: true, message: "", trigger: "blur" }],
    pay_agency: [{ required: true, message: "", trigger: "blur" }],
    option_payment: [{ required: true, message: "", trigger: "blur" }],
  })

let ioGoldConf = {}

const inAmountPlaceholder = ref(null)

watch(() => props.channel, (n, o) => {
    if (n) {
        form.value.pay_channel = n.pay_code
        init()
    } else {
        form.value.pay_channel = null
        presented_credit.value = null
        presented_amount_residue.value = null
    }
    step.value = 1
    loadPayCurrency()
}, {
    immediate: true,
    deep: true
})

const remittanceInfo = ref(null)

function init() {
    if (!isEmpty(props.actId) && !isEmpty(props.actMtServer) && !isEmpty(props.actMtLogin)) {
        mtServerList.value = [{
            server_name: props.actMtServerName,
            id: props.actMtServer
        }]
        form.value.mt4_server = props.actMtServer
        mtLoginList.value = [{
            mt4_login: props.actMtLogin
        }]
        form.value.mt4_login = props.actMtLogin
        mt4LoginChange()
    } else {
        if (props.mtLogin) {
            form.value.mt4_login = props.mtLogin - 0
        }
        getCheckedMt4Server()
    }
}

function getIoGoldConfig() {
    if (isEmpty(form.value.mt4_login)) {
        return
    }
    if (!isEmpty(form.value.mt4_server) && !isEmpty(form.value.mt4_login) && !isEmpty(ioGoldConf[form.value.mt4_server+':'+form.value.mt4_login])) {
        let ioThreshold = ioGoldConf[form.value.mt4_server+':'+form.value.mt4_login]
        if(isEmpty(ioThreshold)) {
            inAmountPlaceholder.value = ''
            return
        }
        let min_in = parseFloat(returnFloat(ioThreshold.in_min));
        let max_in = parseFloat(returnFloat(ioThreshold.in_max));
        if(max_in==0) max_in=99999999.00;
        if (min_in) {
            inAmountPlaceholder.value = t('common.error.minimumAmount', {min: min_in})
        } else {
            inAmountPlaceholder.value = ''
        }
        return
    }
    queryByMt4Login({
        mt4_server: form.value.mt4_server,
        mt4_login: form.value.mt4_login
    }).then(resp => {
        ioGoldConf[form.value.mt4_server + ':' + form.value.mt4_login] = resp.data
        let ioThreshold = resp.data
        if(isEmpty(ioThreshold)) {
            inAmountPlaceholder.value = ''
            return
        }
        let min_in = parseFloat(returnFloat(ioThreshold.in_min));
        let max_in = parseFloat(returnFloat(ioThreshold.in_max));
        if(max_in==0) max_in=99999999.00;
        if (min_in) {
            inAmountPlaceholder.value = t('common.error.minimumAmount', {min: min_in})
        } else {
            inAmountPlaceholder.value = ''
        }
    })
}

function mt4LoginChange() {
    getIoGoldConfig()
    currencyTypeChange()
}

function handleCurrencyTypeChange() {
    currencyTypeChange()
}

function currencyTypeChange() {
    let payChannel = props.channel
    if (payChannel && payChannel.pay_code.indexOf('LDAgency')>=0) {
        let pay_id = payChannel.id
        getIbMtLoginBankAsGoldInPage({
            qcc_language: serverLang(),
            id: pay_id,
            currency_type: form.value.currency_type
        }).then(resp => {
            payAgencyList.value = resp.data
            if (resp.data && resp.data.length) {
                form.value.pay_agency = resp.data[0]
            } else {
                form.value.pay_agency = null
            }
            getSubsidy(form.value.pay_agency?form.value.pay_agency.id:null)
        })
    }

  if (payChannel && payChannel.pay_code.indexOf('PayOK')>=0) {
    if(form.value.currency_type == 'VND'){
      payOkMethod.value = payOkMethodVND.value
    }else if (form.value.currency_type == 'IDR'){
      payOkMethod.value = payOkMethodIDR.value
    }else {
      payOkMethod.value = []
    }
  }

    if (isEmpty(form.value.currency_type)) {
        exchangeRate.value = null
    } else {
        if (!isEmpty(form.value.mt4_server) && !isEmpty(form.value.mt4_login)) {
            getExchangeRateByMT4()
        }
    }
}

function getExchangeRateByMT4() {
    getExchangeRate({
        mt4_server: form.value.mt4_server,
        mt4_login: form.value.mt4_login,
        exchange_currency: form.value.currency_type,
        type: 'mt4',
        io: 'i'
    }).then(resp => {
        let rs = resp.data
        let exchange_rate = rs.exchange_rate;
        if(parseFloat(exchange_rate)<=0) {
            window.showTip({
                titleCode: 'capital.noSetExchangeRate',
                status: 'error'
            })
            exchangeRate.value = null
        } else {
            exchangeRate.value = exchange_rate
            exchange_rate_sign = rs.exchange_rate_sign
        }
    })
}

const presented_credit = ref(null)
const presented_amount_residue = ref(null)

function handleAmount(v) {
    if (v < 0) {
        form.value.usd_amount = 0
    }
    if (form.value.usd_amount != null && form.value.usd_amount != '' && props.actId) {
        calculatePresentedCredit({
            act_id: props.actId,
            usd_amount: form.value.usd_amount
        }).then(resp => {
            const presentedCredit = returnFloat(resp.data)
            presented_credit.value = presentedCredit
            const jstr = resp.msg
            if(!isEmpty(jstr)) {
                const json = JSON.parse(jstr);
                if(!isEmpty(json) && !isEmpty(json.presented_amount_residue)) {
                    presented_amount_residue.value = returnFloat(json.presented_amount_residue)
                }
            }
        })
    } else {
        presented_credit.value = null
        presented_amount_residue.value = null
    }
}

const currencyAmount = computed(() => {
    if (!exchangeRate.value || isNaN(exchangeRate.value) || exchangeRate.value <= 0) {
        return 0
    }
    if (isEmpty(form.value.usd_amount)) {
        return 0
    }
    let usd_amount = parseFloat(form.value.usd_amount)
    let currency_amount = returnFloat3(exchangeRate.value * usd_amount)
    let service_charge = props.channel.service_charge ? props.channel.service_charge : 0
    //手续费 单位美元
    let usd_service_charge = returnFloat(parseFloat(usd_amount)*parseFloat(service_charge)/100)
    currency_amount = round((parseFloat(usd_amount)+parseFloat(usd_service_charge))*exchangeRate.value , 2)
    return currency_amount
})

function getCheckedMt4Server() {
    getMtServer({
        qcc_language: serverLang(),
        server_type: 'live'
    }).then(resp => {
        mtServerList.value = resp.data
        if (resp.data && resp.data.length) {
            if (props.mtServer) {
                for (let index = 0; index < resp.data.length; index++) {
                    const element = resp.data[index];
                    if (element.id == props.mtServer) {
                        form.value.mt4_server = element.id
                        break
                    }
                }
            }
            if (!form.value.mt4_server) {
                form.value.mt4_server = resp.data[0].id
            }
        }
        if (form.value.mt4_server) {
            getMt4Login()
        }
    })
}

function getMt4Login() {
    getCustomerMtLoginList({
        qcc_language: serverLang(),
        mt4_server: form.value.mt4_server,
        activity_id: props.actId
    }).then(resp => {
        mtLoginList.value = resp.data
        if (resp.data && resp.data.length) {
            let login = null;
            for (let index = 0; index < resp.data.length; index++) {
                const element = resp.data[index];
                if (element.mt4_login == form.value.mt4_login) {
                    login = element.mt4_login;
                    break
                }
            }
            if (!login) {
                form.value.mt4_login = resp.data[0].mt4_login
            }
        } else {
            form.value.mt4_login = null    
        }
        mt4LoginChange()
    })
}

function loadPayCurrency() {
    form.value.currency_type = null
    currencyList.value = []
    getCurrencyByPay({
        pay_id: props.channel.id
    }).then(resp => {
        currencyList.value = resp.data
        if (resp.data && resp.data.length) {
            form.value.currency_type = resp.data[0].currency
        } else {
            form.value.currency_type = null
        }
        handleCurrencyTypeChange()
    })
}

function handlePayAgencyChange() {
    getSubsidy(form.value.pay_agency?form.value.pay_agency.id:null)
}

function getSubsidy(id) {
    subsidy.value = null
    getSubsidyById({id}).then(resp => {
        let subsidy_value = resp.data;
        if (subsidy_value && !isNaN(parseFloat(subsidy_value)) && parseFloat(subsidy_value) > 0) {
            subsidy.value = parseFloat(subsidy_value).toFixed(2)

        }
    })
}

function doGoldIn() {
    proxy.$refs["formRef"].validate(valid => {
        if (valid) {
            payLoading.value = true
            const { act_id, pay_channel, mt4_server, mt4_login, usd_amount, currency_type, pay_agency, option_payment } = form.value
            goldInSave({
                act_id, pay_channel, mt4_server, mt4_login, usd_amount, currency_type, 
                pay_agency: pay_agency ? pay_agency.id : null,
                bank_desc: pay_agency ? pay_agency.pay_config_bank_id : null,
                exchange_rate: exchangeRate.value,
                currency_amount: currencyAmount.value,
                usd_service_charge: 0,
                language: serverLang(),
                exchange_rate_sign: exchange_rate_sign,
                option_payment: option_payment
            }).then(resp => {
                toOpenPay(resp)
            }).catch(() => {
                payLoading.value = false
            })
        }
    })
}

function toOpenPay(json) {
    let pay_channel = json.msg;
    let patams = json.data;
    if (pay_channel=='htfxcashier' || pay_channel=='htfxcashier2' || pay_channel=='htfxcashier3') {
        let domain = window.location.hostname
        let index = domain.lastIndexOf(".");
        let index2 = domain.indexOf(".");
        let suffix = "uk"
        let infix = "htfx"
        if(index>0){
            suffix =  domain.substring(index+1);
        }
        if(index>0 && index2>0) {
          infix = domain.substring(index2+1,index);
        }
        let formatUrl = patams.replace('{suffix}',suffix);
        formatUrl = formatUrl.replace('{infix}',infix);
        if(formatUrl.indexOf("{suffix}")!=-1){
            formatUrl = patams.replace('{suffix}',"uk");
        }
        if(formatUrl.indexOf("{infix}")!=-1){
            formatUrl = patams.replace('{infix}',"htfx");
        }
        // 打开外部收银台
        // window.open(formatUrl)
        window.location.href = formatUrl
        payLoading.value = false
    } else if (pay_channel=='remittance') {
        remittanceSign({
            qcc_language: serverLang(),
            goldInId: patams.goldInId,
            sign: patams.sign,
            times: patams.times,
            code: patams.code
        }).then(resp => {
            remittanceInfo.value = resp.data
            // 显示remittance收银台
            step.value = 3
            payLoading.value = false
        }).catch(() => {
            payLoading.value = false
        })
    } else if (pay_channel=='remittance2' ||　pay_channel=='remittance4') {
        remittanceSign({
            qcc_language: serverLang(),
            goldInId: patams.goldInId,
            sign: patams.sign,
            times: patams.times,
            code: patams.code
        }).then(resp => {
            remittanceInfo.value = resp.data
            // 显示remittance2收银台
            step.value = 2
            payLoading.value = false
        }).catch(() => {
            payLoading.value = false
        })
    } else if (pay_channel=='remittance3') {
        remittanceSign({
            qcc_language: serverLang(),
            goldInId: patams.goldInId,
            sign: patams.sign,
            times: patams.times,
            code: patams.code
        }).then(resp => {
            remittanceInfo.value = resp.data
            // 显示remittance3收银台
            step.value = 6
            payLoading.value = false
        }).catch(() => {
            payLoading.value = false
        })
    } else if (pay_channel=='One2Pay') {
      if (patams.status==0 || patams.status=='0'){
        patams.currency_amount = currencyAmount.value
        remittanceInfo.value = patams
        step.value = 7
      }else {
        window.showTip({
          title: patams.msg,
          status: 'error'
        })
      }
    } else if (pay_channel.indexOf('LDAgency')>=0) {
        remittanceSign({
            qcc_language: serverLang(),
            goldInId: patams.goldInId,
            sign: patams.sign,
            times: patams.times,
            code: patams.code
        }).then(resp => {
            remittanceInfo.value = resp.data
            // 显示LDAgency收银台
            step.value = 4
            payLoading.value = false
        }).catch(() => {
            payLoading.value = false
        })
    }else if (pay_channel == 'ForcePay' || pay_channel == 'AbaPay'){
            window.open(patams)
    }else if (pay_channel == 'PayOK' || pay_channel == 'DidaPay' || pay_channel == 'PaySpec' || pay_channel == 'RediPay' || pay_channel == 'CCPay' || pay_channel == 'TokenPay'){
      if(patams.status==0 || patams.status=='0'){
        let payUrl = patams.payUrl
        window.open(payUrl)
      }else{
        window.showTip({
          title: patams.msg,
          status: 'error'
        })
      }
    }else if (pay_channel == 'EBitPay'){
      let payUrl = patams.payUrl
      delete patams.payUrl
      let paramStr = '';
      for (let key in patams){
        paramStr += "&"+key+"="+patams[key];
      }
      paramStr = paramStr.substr(1);
      window.open( payUrl + "?" + paramStr);
    }else if (pay_channel=='help2PayMYR' || pay_channel=='help2PayTHB' || pay_channel=='help2PayPHP' || pay_channel=='help2PayIDR' || pay_channel=='Help2Pay'){
      let payUrl = patams.payUrl;
      delete patams.payUrl;
      postOpenWindow2(payUrl , patams);
    }

}

function postOpenWindow2(url , postData) {
  var tempform = document.createElement("form");
  tempform.action = url;
  tempform.target = "_blank";
  tempform.method = "post";
  tempform.style.display = "none";
  for (var x in postData) {
    var opt = document.createElement("textarea");
    opt.name = x;
    opt.value = postData[x];
    tempform.appendChild(opt);
  }
  document.body.appendChild(tempform);
  tempform.submit();
}

function handleLastStep() {
    step.value = 1
    remittanceInfo.value = null
}

function handleSubmit() {
    step.value = 5
    remittanceInfo.value = null
}

function closeChannel() {
    step.value = 1
    remittanceInfo.value = null
    emit('close-channel')
}

function reset() {
    step.value = 1
    remittanceInfo.value = null
}
</script>

<style lang="scss" scoped>
.goldin-form {
    width: 100%;
    position: relative;
}

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

.currency-amount {
    font-size: 36px;
    font-weight: 700;
    letter-spacing: 0px;
    line-height: 55.02px;
    color: rgba(41, 187, 228, 1);
}

.sub-btn {
    width: 100%;
    height: 40px;
    margin-top: 50px;
}


.template-content {
    padding: 50px 50px;
}

.template-content > div {
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 0px;
    line-height: 27px;
    color: rgba(170, 170, 170, 1);
    text-align: left;
}
</style>