<!-- 编辑弹窗 -->
<template>
    <ele-modal
        form
        :width="1460"
        v-model="visible"
        title="订单详情"
        @open="handleOpen"
        :body-style="{
            maxHeight: '84vh',
            position: 'relative',
            overflow: 'auto',
            background: '#f8f8f8',
            padding: '0'
        }"
        position="center"
    >
        <refundDetail
            :detail="orderDetail"
            @refresh="getOrderDetail"
            ref="refundDetailRef"
        />

        <template #footer>
            <div style="display: flex; justify-content: center">
                <el-button @click="handleCancel" type="danger"
                    >关闭弹窗</el-button
                >
            </div>
        </template>
    </ele-modal>
</template>

<script setup>
    import { ref, reactive, nextTick, getCurrentInstance } from 'vue';
    import refundDetail from '@/views/recycleOrder/needReturned/refund-detail.vue';
    import request from '@/utils/request';

    const { proxy } = getCurrentInstance();
    const emit = defineEmits(['refresh']);

    /** 弹窗是否打开 */
    const visible = defineModel({ type: Boolean });

    /** 关闭弹窗 */
    const handleCancel = () => {
        visible.value = false;
    };

    /** 弹窗打开事件 */
    let orderId = ref('');
    const handleOpen = (data) => {
        visible.value = true;
        nextTick(() => {
            if (data && data.refundOrderId) {
                orderId.value = data.refundOrderId;
                getOrderDetail();
            }
        });
    };

    //获取订单详情
    const orderDetail = ref({});
    const getOrderDetail = () => {
        request
            .get(
                `/order/orderInfo/refund/detail?refundOrderId=${orderId.value}`
            )
            .then((res) => {
                if (res.data.code === 200) {
                    orderDetail.value = res.data.data;
                }
            });
    };

    defineExpose({
        handleOpen
    });
</script>
