<!-- 销售明细弹窗 -->
<template>
    <ele-modal
        v-model="visible"
        title="销售明细"
        :width="1440"
        @open="handleDialogOpen"
    >
        <!-- 使用抽取出的搜索组件 -->
        <sale-search ref="searchRef" @search="handleSearchParams" />

        <common-table
            ref="tableRef"
            :pageConfig="pageConfig"
            :columns="columns"
            :tools="false"
        >
            <template #receiverInfo="{ row }">
                <div>{{ row.receiverName }}</div>
                <div>{{ row.receiverPhone }}</div>
            </template>

            <template #receiverAddress="{ row }">
                <div>{{
                    row.receiverProvince + row.receiverCity + row.receiverArea
                }}</div>
                <div>{{ row.receiverAddress }}</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 SaleSearch from './sale-search.vue';

    defineOptions({ name: 'SaleDetail' });

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

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

    // 表格列配置
    const columns = ref([
        { label: '订单号', prop: 'orderNo', align: 'center' },
        { label: '用户名', prop: 'userName', align: 'center' },
        {
            label: '单价',
            prop: 'salePrice',
            align: 'center',
            formatter: (row) => '￥' + (row?.salePrice || 0)
        },
        { label: '数量', prop: 'saleCount', align: 'center' },
        {
            label: '收货人',
            prop: 'receiverInfo',
            slot: 'receiverInfo',
            align: 'center'
        },
        { label: '手机号', prop: 'receiverPhone', align: 'center' },
        {
            label: '收货地址',
            prop: 'receiverAddress',
            slot: 'receiverAddress',
            align: 'center',
            minWidth: 120
        },
        { label: '订单状态', prop: 'orderStatus', align: 'center' },
        { label: '提交时间', prop: 'createTime', align: 'center', width: 160 }
    ]);

    // 页面配置
    const pageConfig = reactive({
        pageUrl: '/book/sale/detail/pagelist',
        fileName: '销售明细',
        cacheKey: 'sale-detail-data',
        params: {
            bookId: ''
        }
    });

    // 处理搜索组件参数
    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.bookId = row.id;
        pageConfig.params.bookId = row.id;
        visible.value = true;

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

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

    defineExpose({
        handleOpen
    });
</script>

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