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

        <template #footer>
            <div style="display: flex; justify-content: space-between">
                <div style="margin-left: 10px"></div>
                <el-button @click="handleCancel" type="danger"
                    >关闭弹窗</el-button
                >
                <div style="display: flex">
                    <el-button
                        type="primary"
                        @click="handleOtherAuditGood"
                        v-if="
                            orderDetail.status == 9 || orderDetail.status == 8
                        "
                        >其余审核良好</el-button
                    >
                    <el-button
                        type="warning"
                        @click="handleFirstCheck"
                        v-if="orderDetail.status == 2"
                        >初步审核</el-button
                    >
                    <el-button
                        type="success"
                        @click="handleConfirmReceipt"
                        v-if="orderDetail.status == 6"
                        >确认收货</el-button
                    >
                    <el-button
                        color="#bd3124"
                        @click="handleCompleteAudit"
                        v-if="
                            orderDetail.status == 9 || orderDetail.status == 8
                        "
                        >完成审核</el-button
                    >
                    <el-button
                        color="#a16222"
                        @click="handleBatchPayment"
                        v-if="orderDetail.status == 10"
                        >支付书款</el-button
                    >
                </div>
            </div>
        </template>
    </ele-modal>

    <!-- 初审弹窗 -->
    <firstCheckModal ref="firstCheckRef" @success="handleSuccess" />
</template>

<script setup>
    import { ref, reactive, nextTick, getCurrentInstance } from 'vue';
    import userDetail from '@/views/recycleOrder/detail/index.vue';
    import request from '@/utils/request';
    import { ElMessageBox } from 'element-plus/es';
    import { EleMessage } from 'ele-admin-plus/es';
    import firstCheckModal from '@/views/recycleOrder/components/first-check-modal.vue';

    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.orderId) {
                orderId.value = data.orderId;
                console.log(data, orderId.value, 'xxxx');
                getOrderDetail();
            }

            resetScrollPosition();
        });
    };

    // 重置滚动条位置
    const resetScrollPosition = () => {
        nextTick(() => {
            setTimeout(() => {
                const modalBody = document.querySelectorAll(
                    '.order-detail-modal .ele-modal-body'
                );
                if (modalBody) {
                    modalBody[modalBody.length - 1].scrollTop = 0;
                }
            }, 100);
        });
    };

    //其余审核良好
    const userDetailRef = ref();
    function handleOtherAuditGood() {
        userDetailRef.value?.handleOtherAuditGood();
    }

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

    //弹窗确认操作
    function messageBoxConfirm({ message, fetch }) {
        ElMessageBox.confirm(message, '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '关闭',
            type: 'warning'
        }).then(() => {
            fetch().then((res) => {
                if (res.data.code === 200) {
                    EleMessage.success('操作成功');
                    handleCancel();
                    emit('refresh');
                } else {
                    EleMessage.error(res.data.msg);
                }
            });
        });
    }

    //初审
    const firstCheckRef = ref(null);
    function handleFirstCheck() {
        firstCheckRef.value?.handleOpen(orderDetail.value.orderId);
    }

    //确认收货
    function handleConfirmReceipt() {
        messageBoxConfirm({
            message: '确认收货？',
            fetch: () =>
                proxy.$http.post('/order/orderInfo/adminConfirm', {
                    orderIds: [orderId.value]
                })
        });
    }

    //完成审核
    function handleCompleteAudit() {
        // /order/orderInfo/adminCheckFinish
        messageBoxConfirm({
            message: '确认完成审核？',
            fetch: () =>
                proxy.$http.post('/order/orderInfo/adminCheckFinish', {
                    orderId: orderId.value
                })
        });
    }

    //支付书款
    function handleBatchPayment() {
        messageBoxConfirm({
            message: '确认支付书款？',
            fetch: () =>
                proxy.$http.post('/order/orderInfo/payout', {
                    orderIds: [orderId.value]
                })
        });
    }

    //初审成功
    function handleSuccess() {
        handleCancel();
        emit('refresh');
    }

    defineExpose({
        handleOpen
    });
</script>
