<template>
    <el-row>
        <el-form autocapitalize="off" :inline="true" label-position="top" size="large" :model="form" ref="formRef">
            <el-col :span="8" v-if="order && order.bank_account" >
                <el-form-item :label="t('capital.bankNo')"  >
                    <span class="info-text">{{ order.bank_account }}</span>
                </el-form-item>
            </el-col>
            <el-col :span="8" v-if="order && order.bank_name" >
                <el-form-item :label="t('capital.bankName')"  >
                    <span class="info-text">{{ order.bank_name }}</span>
                </el-form-item>
            </el-col>
            <el-col :span="8" v-if="order && order.sub_branch" >
                <el-form-item :label="t('capital.bankSubName')"  >
                    <span class="info-text">{{ order.sub_branch }}</span>
                </el-form-item>
            </el-col>
            <el-col :span="8" v-if="order && order.phone" >
                <el-form-item :label="t('capital.phone')"  >
                    <span class="info-text">{{ order.phone }}</span>
                </el-form-item>
            </el-col>
            <el-col :span="8" v-if="order && order.account_holder">
                <el-form-item :label="t('capital.bankCards')"  >
                    <span class="info-text">{{ order.account_holder }}</span>
                </el-form-item>
            </el-col>
            <el-col :span="8" v-if="order && order.currency_type" >
                <el-form-item :label="t('capital.currency_type')"  >
                    <span class="info-text">{{ order.currency_type }}</span>
                </el-form-item>
            </el-col>
            <el-col :span="8" v-if="order && order.currency_amount" >
                <el-form-item :label="t('capital.currencyAmount')"  >
                    <span class="currency-amount">{{ '' + order.currency_amount }}</span>
                </el-form-item>
            </el-col>
            <el-col :span="24" v-if="countdown" >
                <div style="width: 100%;padding: 50px 0;font-size: 24px;font-weight: 700;display: flex;justify-content: center;align-items: center;">
                    <span>{{ t('capital.d1') }}</span>
                    <span class="countdown-text">{{ countdown }}</span>
                    <span>{{ t('capital.d2') }}</span>
                </div>
            </el-col>
            <el-col :span="24">
                <div style="width: 100%;display: flex;justify-content: space-between;">
                    <el-button class="sub-btn dark-btn" type="primary" @click="lastStep" >{{ t('form.last') }}</el-button>
                    <el-button :loading="loading" class="sub-btn" type="primary" @click="handleSubmit" >{{ t('capital.sub') }}
                        <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>
                </div>
            </el-col>
        </el-form>
    </el-row>
</template>

<script setup>
import { useLocale } from 'element-plus'
import { remittanceSave, remittanceQuery } from '@/api/remittance'
import { watch } from 'vue';

const { proxy } = getCurrentInstance();
const { t } = useLocale()
const emit = defineEmits(['last-step', 'submit'])
const props = defineProps({
    data: Object
})

const order = ref(null)

const form = ref({

})

const countdown = ref(null)

const loading = ref(false)

watch(() => props.data, (n, o) => {
    if (n && n.obj && n.obj.goldInId) {
        remittanceQuery({
            id: n.obj.goldInId
        }).then(resp => {
            order.value = resp.data
        })
        loadCountdown()
    }
}, {
    immediate: true,
    deep: true
})

function loadCountdown() {
    if (!props.data) {
        return false
    }
    const cur_times = new Date().getTime()
    const { pay_time } = props.data
    const { times } = props.data.obj
    let lefttime = parseInt((parseInt(pay_time)+parseInt(times)-parseInt(cur_times))/1000);//秒数
    var h = parseInt(lefttime / (60 * 60) % 24);
    var m = parseInt(lefttime / 60 % 60);
    var s = parseInt(lefttime % 60);
    h = addZero(h);
    m = addZero(m);
    s = addZero(s);
    countdown.value = `${h}:${m}:${s}`

    if (lefttime <= 0) {
        countdown.value = "00:00:00"
        return;
    }
    setTimeout(() => {
        loadCountdown()
    }, 1000);
}

function addZero(i) {
    return i < 10 ? "0" + i: i + "";
}

function lastStep() {
    remittanceSave({
        id : props.data.obj.goldInId, 
        status: -2, 
        remark: 'manualCancel'
    })
    emit('last-step')
}

function handleSubmit() {
    loading.value = true
    remittanceSave({
        id : props.data.obj.goldInId, 
        status: 0, 
    }).then(resp => {
        emit('submit')
        loading.value = false
    }).catch(() => {
        loading.value = false
    })
}
</script>

<style lang="scss" scoped>
:deep(.el-form-item__label) {
    font-size: 16px !important;
    font-weight: 400 !important;
    color: rgba(51, 51, 51, 1);
}

.info-text {
    font-size: 20px;
    font-weight: 700;
    color: rgba(51, 51, 51, 1);
}

.countdown-text {
    font-weight: 700;
    font-size: 36px;
    color: rgba(41, 187, 228, 1);
    margin: 0 10px;
}

.sub-btn {
    width: 40%;
}

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