<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.deliverygoodsname}}</span>
                            </a-form-item>
                        </a-col>
                        <a-col :span="12">
                            <a-form-item label="仓库">
                                <span class="white ml10">{{selectedRow.warehousename}}</span>
                            </a-form-item>
                        </a-col>
                        <a-col :span="24">
                            <a-form-item label="履约商品">
                                <span class="white ml10">{{selectedRow.wrtypename}}</span>
                            </a-form-item>
                        </a-col>
                        <a-col :span="24">
                            <a-form-item label="履约总金额">
                                <span class="white ml10">{{selectedRow.amount.toFixed(2)}}</span>
                            </a-form-item>
                        </a-col>
                        <a-col :span="24">
                            <a-form-item label="当前步骤">
                                <span class="white ml10">{{selectedRow.curstepname}}</span>
                            </a-form-item>
                        </a-col>
                        <a-col :span="24">
                            <a-form-item label="本次需支付">
                                <span class="white ml10">{{ stepamount }}</span>
                            </a-form-item>
                        </a-col>
                        <a-col :span="24">
                            <a-form-item label="剩余款">
                                <span class="white ml10">{{selectedRow.unpaidamount.toFixed(2)}}</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 { WrPerformancePlan, WrPosition } from '@/services/go/wrtrade/interface';
import { ModalEnum } from '@/common/constants/modalNameEnum';
import { _closeModal } from '@/common/setup/modal/modal';
import { performanceManualConfirm } from '@/services/proto/performance';
import { PerformanceManualConfirmReq } from '@/services/proto/performance/interface';
import { requestResultLoadingAndInfo } from '@/common/methods/request/resultInfo';
import { HdWRDealOrder } from '@/services/proto/warehousetrade';
import { BuyOrSell } from '@/common/constants/enumCommon';
import { handlePerformancePlanStep } from '../setup';
import * as Long from 'long';

export default defineComponent({
    name: ModalEnum.performance_information_buy_performance_pay,
    components: { Drawer },
    emits: ['cancel', 'update'],
    props: {
        selectedRow: {
            type: Object as PropType<WrPerformancePlan>,
            default: {},
        },
        buyOrSell: {
            type: Number as PropType<BuyOrSell>,
            default: BuyOrSell.buy,
        },
    },
    setup(props, context) {
        const { visible, cancel } = _closeModal(context);
        const loading = ref<boolean>(false);
        const { performancePlanStep, stepamount } = handlePerformancePlanStep(props.selectedRow);
        function submit() {
            const param: PerformanceManualConfirmReq = {
                PerformancePlanStepID: Long.fromString(props.selectedRow.curstepid),
                PerformanceExecuteSide: 1,
            };
            requestResultLoadingAndInfo(performanceManualConfirm, param, loading, ['付款成功', '付款失败:']).then(() => {
                cancel(true);
            });
        }

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

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