<template>
    <!-- 延期-->
    <Drawer
        :title="'延期申请'"
        :placement="'right'"
        class="delistingBottom"
        :visible="visible"
        @cancel="cancel"
    >
        <div class="listed">
            <a-form class="inlineForm dialogForm" ref="formRef" :model="formState" :rules="rules">
                <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.curstepname}}</span>
                            </a-form-item>
                        </a-col>
                        <a-col :span="24">
                            <a-form-item label="关联单号">
                                <span class="white ml10">{{selectedRow.relatedorderid}}}</span>
                            </a-form-item>
                        </a-col>
                        <a-col :span="24">
                            <a-form-item label="申请延期天数" name="days" class="relative">
                                <a-input-number
                                    class="commonInput ml10"
                                    :min="1"
                                    v-model:value="formState.days"
                                    style="width: 200px"
                                />
                                <span class="input-enumdicname">天</span>
                            </a-form-item>
                        </a-col>
                        <a-col :span="24">
                            <a-form-item label="备注" name="remark">
                                <a-input
                                    class="commonInput ml10"
                                    v-model:value="formState.remark"
                                    style="width: 420px"
                                />
                            </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 { handleForm } from './setup';
import { validateAction } from '@/common/setup/form';
import { FormState } from './interface';
import { PerformanceDelayApplyReq, PerformanceManualConfirmReq } from '@/services/proto/performance/interface';
import { requestResultLoadingAndInfo } from '@/common/methods/request/resultInfo';
import { performanceDelayApply, performanceManualConfirm } from '@/services/proto/performance';
import { getUserId } from '@/services/bus/account';
import { BuyOrSell } from '@/common/constants/enumCommon';
import { handlePerformancePlanStep } from '../setup';
import Long from 'long';

export default defineComponent({
    name: ModalEnum.performance_information_buy_performance_extension,
    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 { rules, formState, formRef } = handleForm();
        const { performancePlanStep } = handlePerformancePlanStep(props.selectedRow);
        function submit() {
            validateAction<FormState>(formRef, formState).then((param) => {
                // 延期申请
                const paramReq: PerformanceDelayApplyReq = {
                    PerformancePlanStepID: Long.fromString(props.selectedRow.curstepid),
                    delaydays: param.days as number,
                    applicant: getUserId(),
                    applyremark: param.remark,
                };
                requestResultLoadingAndInfo(performanceDelayApply, paramReq, loading, ['延期申请成功', '延期申请失败:']).then(() => {
                    cancel(true);
                });
            });
        }
        return {
            visible,
            cancel,
            submit,
            loading,
            rules,
            formState,
            formRef,
        };
    },
});
</script>

<style lang="less" scoped>
.day {
    .position(absolute, auto, -24px, 0, auto);
    line-height: 26px;
    color: @m-grey1;
}
</style>;
