<template>
    <el-row>
        <el-col :span="14">
            <el-row>
                <el-form :inline="true" label-position="top" size="large" style="width: 100%;" >
                    <el-col :span="12" >
                        <el-form-item :label="t('capital.remittance3_label')"  >
                            <span class="info-text">{{ t('capital.remittance3_text') }}</span>
                        </el-form-item>
                    </el-col>
                </el-form>
            </el-row>
            <el-row>
                <el-form autocapitalize="off" :inline="true" label-position="top" size="large" :model="form" ref="formRef" style="width: 100%;" >
                    <el-col :xl="8" :lg="12" :sm="24" >
                        <el-form-item :label="t('capital.remittanceOrderNo')" prop="pay_ordid" >
                            <el-input v-model="form.pay_ordid" ></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :xl="8" :lg="12" :sm="24" >
                        <el-form-item :label="t('capital.remittanceOrderImg')" prop="remittance_img" >
                            <remittance-upload v-model="form.remittance_img" :baseUrl="baseUrl" />
                        </el-form-item>
                    </el-col>
                    <el-col :xl="8" :lg="12" :sm="24" 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>
        </el-col>
        <el-col :span="10">
            <div style="text-align: center;">
                <div class="template-content">
                    <div class="qr-bg">
                        <div class="img-wrap" v-if="order && order.bank_img">
                            <el-image style="width: 180px; height: 180px" :src="baseUrl + order.bank_img" fit="contain" />
                        </div>
                    </div>
                </div>
                <div style="display: flex;align-items: center;justify-content: space-evenly;max-width: 310px;margin: 0 auto;">
                    <!-- <svg-icon icon-class="wxpay" class="payIcon" /> -->
                    <svg-icon icon-class="alipay" class="payIcon" />
                    <!-- <svg-icon icon-class="unionpay" class="payIcon" /> -->
                    <!-- <svg-icon icon-class="huabei" class="payIcon" /> -->
                </div>
            </div>
        </el-col>
    </el-row>
</template>

<script setup>

import useClipboard from "vue-clipboard3"
import { useLocale } from 'element-plus'
import { remittanceSave, remittanceQuery } from '@/api/remittance'
import { getImgPath } from '@/api/common'
import { isEmpty } from '@/utils/htfx'
import { onMounted, watch } from 'vue';
import RemittanceUpload from '@/components/RemittanceUpload'

const { proxy } = getCurrentInstance();
const { t } = useLocale()
const { toClipboard } = useClipboard()
const emit = defineEmits(['last-step', 'submit'])
const props = defineProps({
    data: Object
})
const copySuccess = ref(false)
const baseUrl = ref(null)

const order = ref(null)

const form = ref({
    remittance_img: undefined,
    pay_ordid: undefined
})

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() {
    if (isEmpty(form.value.remittance_img)) {
        window.showTip({
            title: `${t('capital.remittance3check')}`,
            status: 'error'
        })
        return
    }
    loading.value = true
    remittanceSave({
        id : props.data.obj.goldInId, 
        status: 0, 
        remittance_img: form.value.remittance_img,
        pay_ordid: form.value.pay_ordid
    }).then(resp => {
        emit('submit')
        loading.value = false
    }).catch(() => {
        loading.value = false
    })
}

const copy = async () => {
  try {
    await toClipboard(order.value.field3);
    copySuccess.value = true
    setTimeout(() => {
        copySuccess.value = false
    }, 2000)
  } catch (e) {
    console.error(e);
  }
}

onMounted(()=> {
    getImgPath().then(resp => {
        baseUrl.value = resp.data
    })
})
</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);
}

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

    .qr-bg {
        margin: auto;
        width: 192px;
        height: 192px;
        background: linear-gradient(90deg, rgba(16, 55, 118, 1) 0%, rgba(146, 219, 237, 1) 100%);
        padding: 6px;

        .img-wrap {
            width: 100%;
            height: 100%;
            background-color: #fff;
        }
    }
}

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

.payIcon {
    width: 43px;
    height: 43px;
}
</style>