<template>
    <!-- 付款-->
    <Drawer
        :title="'付款'"
        :placement="'right'"
        :visible="visible"
        class="delistingBottom"
        @cancel="cancel"
    >
        <div class="listed">
            <a-form class="inlineForm dialogForm" ref="formRef">
                <div class="formBar">
                    <a-row :gutter="24">
                        <a-col :span="12">
                            <a-form-item label="借款金额">
                                <span class="white ml10">{{ selectedRow.lenderamount + " 元"}}</span>
                            </a-form-item>
                        </a-col>
                        <a-col :span="12">
                            <a-form-item label="剩余金额">
                                <span class="white ml10">{{ selectedRow.remainamount + " 元"}}</span>
                            </a-form-item>
                        </a-col>
                        <a-col :span="12">
                            <a-form-item label="已计费用">
                                <span class="white ml10">{{ selectedRow.totalinterest + " 元"}}</span>
                            </a-form-item>
                        </a-col>
                        <a-col :span="12">
                            <a-form-item label="费用欠款">
                                <span class="red ml10">{{ selectedRow.interestdebt + " 元"}}</span>
                            </a-form-item>
                        </a-col>
                    </a-row>
                </div>
                <a-row :gutter="24">
                    <a-col :span="24" class="fixedBtns">
                        <a-form-item class="btnCenter">
                            <a-button
                                class="listedBtn"
                                :loading="loading"
                                :disabled="loading"
                                @click="submit"
                            >提交</a-button>
                        </a-form-item>
                    </a-col>
                </a-row>
            </a-form>
        </div>
    </Drawer>
</template>

<script lang="ts">
import { defineComponent, PropType, ref } from 'vue';
import Drawer from '@/common/components/drawer/index.vue';
import { WrScfContract } from '@/services/go/wrtrade/interface';
import { ModalEnum } from '@/common/constants/modalNameEnum';
import { _closeModal } from '@/common/setup/modal/modal';
import { PaymentArrears } from '@/services/proto/warehousetrade';
import { requestResultLoadingAndInfo } from '@/common/methods/request/resultInfo';
import { PaymentArrearsReq } from '@/services/proto/warehousetrade/interface';
import { getTimeValue } from '@/utils/time';
import * as Long from 'long';

export default defineComponent({
    name: ModalEnum.financing_manager_contract_pay_arrears,
    components: { Drawer },
    emits: ['cancel', 'update'],
    props: {
        selectedRow: {
            type: Object as PropType<WrScfContract>,
            default: {},
        },
    },
    setup(props, context) {
        const { visible, cancel } = _closeModal(context);
        const loading = ref<boolean>(false);
        function submit() {
            const param: PaymentArrearsReq = {
                ExtBusinessID: getTimeValue(), // uint64 外部业务流水号
                SCFContractID: Long.fromString(props.selectedRow.scfcontractid), // uint64 SCF合同ID
                SCFContractType: props.selectedRow.scfcontracttype, // int32 合同类型
            };
            requestResultLoadingAndInfo(PaymentArrears, param, loading, ['付款成功', '付款失败:']).then(() => {
                cancel(true);
            });
        }

        return {
            visible,
            cancel,
            submit,
            loading,
        };
    },
});
</script>

<style lang="less" scoped>
</style>;
