<!-- 回收明细弹窗 -->
<template>
    <ele-modal
        v-model="visible"
        title="回收明细"
        width="80%"
        @open="handleDialogOpen"
    >
        <!-- 使用抽取出的搜索组件 -->
        <recycle-search ref="searchRef" @search="handleSearchParams" />

        <common-table
            ref="tableRef"
            :pageConfig="pageConfig"
            :columns="columns"
            :tools="false"
        >
            <template #status="{ row }">
                <dict-data
                    code="order_status"
                    type="text"
                    :model-value="row.status"
                />
            </template>

            <template #recipientGodown="{ row }">
                <div>{{ row.recipientGodown }} - {{ row.recipientName }}</div>
            </template>
        </common-table>

        <template #footer>
            <el-button @click="visible = false">关闭</el-button>
        </template>
    </ele-modal>
</template>

<script setup>
    import { ref, reactive, defineExpose } from 'vue';
    import CommonTable from '@/components/CommonPage/CommonTable.vue';
    import RecycleSearch from './recycle-search.vue';

    defineOptions({ name: 'RecycleDetail' });

    // 弹窗可见性
    const visible = ref(false);
    // 当前查看的图书信息
    const currentBook = ref(null);
    // 查询参数
    const queryParams = reactive({
        isbn: ''
    });

    // 表格组件实例
    const tableRef = ref(null);
    // 搜索组件实例
    const searchRef = ref(null);

    // 表格列配置
    const columns = ref([
        { label: '订单号', prop: 'orderId', align: 'center' },
        { label: '用户名', prop: 'userNick', align: 'center' },
        {
            label: '预估价格',
            prop: 'expectMoney',
            align: 'center',
            formatter: (row) =>
                row.expectMoney ? '￥' + row.expectMoney : '--'
        },
        { label: '预估本数', prop: 'totalNum', align: 'center' },
        { label: '回收本数', prop: 'recycleBookNum', align: 'center' },
        {
            label: '审核金额',
            prop: 'finalMoney',
            align: 'center',
            formatter: (row) => (row.finalMoney ? '￥' + row.finalMoney : '--')
        },
        { label: '发货人', prop: 'sendName', align: 'center' },
        { label: '手机号', prop: 'sendMobile', align: 'center' },
        { label: '发货地址', prop: 'sendSsq', minWidth: 120, align: 'center' },
        {
            label: '收货仓库',
            prop: 'recipientGodown',
            slot: 'recipientGodown',
            align: 'center'
        },
        {
            label: '订单状态',
            prop: 'status',
            slot: 'status',
            minWidth: 120,
            align: 'center'
        },
        { label: '提交时间', prop: 'orderTime', width: 160, align: 'center' }
    ]);

    // 页面配置
    const pageConfig = reactive({
        pageUrl: '/order/orderInfo/getOrderInfoByIsbn',
        fileName: '回收明细',
        cacheKey: 'recycle-detail-data',
        params: {
            isbn: ''
        }
    });

    // 处理搜索组件参数
    function handleSearchParams(params) {
        Object.assign(queryParams, params);
        reload();
    }

    // 刷新表格
    function reload() {
        tableRef.value?.reload(queryParams);
    }

    // 新增弹窗打开处理函数
    function handleDialogOpen() {
        // 加载数据
        reload();
    }

    // 打开弹窗
    function handleOpen(row) {
        if (!row) return;
        currentBook.value = row;
        queryParams.isbn = row.bookIsbn;
        pageConfig.params.isbn = row.bookIsbn;
        visible.value = true;

        // 重置搜索组件
        searchRef.value?.reset();

        // 重置其他查询条件，但保留isbn
        Object.keys(queryParams).forEach((key) => {
            if (key !== 'isbn') {
                queryParams[key] = '';
            }
        });
    }

    defineExpose({
        handleOpen
    });
</script>

<style lang="scss" scoped>
    /* 移除原dialog样式 */
</style>
