<script setup>
import {reactive, ref} from "vue";
import RefuseModalForm1 from "./refuse-modal-form1.vue";
import RefuseModalForm2 from "./refuse-modal-form2.vue";
import Api from "../../../../../api/index.js";
import {Message} from "@arco-design/web-vue";

const {task, taskId, disabled} = defineProps({
    task: {
        type: Object,
        default: {}
    },
    taskId: {
        type: Number,
        default: null,
    },
    disabled: {
        type: Boolean,
        default: false
    }
});
const emits = defineEmits(['success']);
const formRef = ref();
const form = reactive({});
const visible = ref(false);
const step = ref(1);

const next = async () => {
    const temp = await formRef.value.success();
    Object.assign(form, temp);
    if (step.value === 2) {
        console.log(task)
        const {msg} = await Api.merchant.refundChildrenTask({
            ...form,
            id: taskId,
            task_backfill_id: task.back.id
        });
        Message.success(msg);
        visible.value = false;
        emits('success');
    } else {
        step.value++;
    }
}
</script>

<template>
    <a-link :hoverable="false" status="danger" @click="visible = true" :disabled="disabled">拒绝</a-link>

    <a-modal
        width="600px"
        class="refuse-modal"
        v-model:visible="visible"
        title-align="start"
        title="拒绝">
        <a-alert>平台提示：所有沟通内容均由人工审核，请勿脱离平台交易，请勿发送违规内容，违者...</a-alert>
        <div class="px-[30px] py-[16px]">
            <a-config-provider size="mini">
                <refuse-modal-form1 :taskId="taskId" ref="formRef" v-if="step === 1"></refuse-modal-form1>
                <refuse-modal-form2 ref="formRef" v-if="step === 2" :taskId="task.task_id"></refuse-modal-form2>
            </a-config-provider>
        </div>

        <template #footer>
            <div class="flex flex-row-reverse">
                <a-button @click="next" type="primary">下一步</a-button>
            </div>
        </template>
    </a-modal>
</template>

<style lang="scss" scoped>

</style>

<style lang="scss">
.refuse-modal {
    .arco-modal-body {
        padding: 0;
        min-height: 500px;
    }
}
</style>
