<template>
    <ele-modal
        v-model="visible"
        title="销售明细"
        width="1000px"
        :append-to-body="true"
    >
        <div class="p-4">
            <div class="mb-4 flex space-x-2">
                <el-input
                    v-model="detailSearch.receiver"
                    placeholder="收货人名称"
                    style="width: 150px"
                />
                <el-input
                    v-model="detailSearch.phone"
                    placeholder="收货人电话"
                    style="width: 150px"
                />
                <el-input
                    v-model="detailSearch.address"
                    placeholder="收货人地址"
                    style="width: 150px"
                />
                <el-date-picker
                    v-model="detailSearch.dateRange"
                    type="daterange"
                    range-separator="到"
                    start-placeholder="开始时间"
                    end-placeholder="结束时间"
                    style="width: 240px"
                />
                <el-button type="primary" @click="fetchData">查询</el-button>
                <el-button @click="resetDetail">重置</el-button>
            </div>
            <el-table
                :data="detailData"
                border
                style="width: 100%"
                size="small"
            >
                <el-table-column prop="orderNo" label="订单编号" />
                <el-table-column prop="username" label="用户名称" />
                <el-table-column prop="price" label="单价" />
                <el-table-column prop="quantity" label="数量" />
                <el-table-column prop="receiver" label="收货人" />
                <el-table-column prop="phone" label="手机号" />
                <el-table-column prop="address" label="收货地址" />
                <el-table-column prop="status" label="订单状态" />
                <el-table-column prop="time" label="提交时间" />
            </el-table>
        </div>
    </ele-modal>
</template>

<script setup>
    import { ref, reactive, computed, watch } from 'vue';

    const props = defineProps({
        modelValue: {
            type: Boolean,
            default: false
        },
        row: {
            type: Object,
            default: () => ({})
        }
    });

    const emit = defineEmits(['update:modelValue']);

    const visible = computed({
        get: () => props.modelValue,
        set: (val) => emit('update:modelValue', val)
    });

    const detailSearch = reactive({
        receiver: '',
        phone: '',
        address: '',
        dateRange: []
    });

    const detailData = ref([]);

    const fetchData = () => {
        // Mock fetch logic using props.row
        if (!props.row) return;

        // Simulate API call
        detailData.value = [
            {
                orderNo: '12345678',
                username: props.row.nickname || 'Unknown',
                price: '10.00',
                quantity: 1,
                receiver: '张三',
                phone: '13800138000',
                address: '北京市朝阳区',
                status: '已完成',
                time: '2024-10-10 12:00:00'
            }
        ];
    };

    const resetDetail = () => {
        detailSearch.receiver = '';
        detailSearch.phone = '';
        detailSearch.address = '';
        detailSearch.dateRange = [];
        fetchData();
    };

    watch(
        () => props.modelValue,
        (val) => {
            if (val) {
                fetchData();
            }
        }
    );
</script>
