<template>
    <ele-modal
        :width="400"
        v-model="visible"
        title="确定后退款将立即退到买家账户"
        :body-style="{ padding: '30px 40px' }"
    >
        <div class="text-base text-gray-700 mb-6">
            同意申请并退款 ￥{{ refundAmount }} 给买家吗？
        </div>

        <template #footer>
            <div class="flex justify-end gap-3">
                <el-button @click="visible = false" class="rounded-full px-6"
                    >取消</el-button
                >
                <el-button
                    type="primary"
                    :loading="loading"
                    @click="handleSubmit"
                    class="rounded-full px-6"
                    >同意退款</el-button
                >
            </div>
        </template>
    </ele-modal>
</template>

<script setup>
    import { ref } from 'vue';
    import { EleMessage } from 'ele-admin-plus/es';
    import request from '@/utils/request';

    const visible = ref(false);
    const loading = ref(false);
    const currentRefundOrderId = ref('');
    const refundAmount = ref('0.00');

    const emit = defineEmits(['success']);

    const open = (refundOrderId, amount) => {
        currentRefundOrderId.value = refundOrderId;
        refundAmount.value = amount || '0.00';
        visible.value = true;
    };

    const handleSubmit = () => {
        loading.value = true;
        request
            .post('/shop/shopOrder/refund/refundMoney', {
                refundOrderId: currentRefundOrderId.value
            })
            .then((res) => {
                if (res.data.code === 200) {
                    EleMessage.success('退款成功');
                    visible.value = false;
                    emit('success');
                } else {
                    EleMessage.error(res.data.msg || '退款失败');
                }
            })
            .catch((e) => {
                console.error(e);
                EleMessage.error('网络错误');
            })
            .finally(() => {
                loading.value = false;
            });
    };

    defineExpose({
        open
    });
</script>
