<template>
    <ele-modal
        :width="800"
        title="操作记录"
        v-model="visible"
        :body-style="{ padding: '20px' }"
    >
        <el-table :data="tableData" border style="width: 100%">
            <el-table-column prop="importDate" label="导入日期" width="180" />
            <el-table-column prop="operator" label="操作员" width="120" />
            <el-table-column prop="calcPeriod" label="计算周期" width="120" />
            <el-table-column
                prop="turnoverRate"
                label="库存周转率"
                width="120"
            />
            <el-table-column
                prop="remainingDays"
                label="剩余可卖天数"
                width="120"
            />
            <el-table-column prop="sales" label="销量" />
        </el-table>
        <div class="mt-4 flex justify-end">
            <el-pagination
                background
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
                v-model:current-page="currentPage"
                v-model:page-size="pageSize"
                :page-sizes="[10, 20, 50, 100]"
            />
        </div>
        <template #footer>
            <el-button type="primary" @click="visible = false">确定</el-button>
            <el-button @click="visible = false">取消</el-button>
        </template>
    </ele-modal>
</template>

<script setup>
    import { ref, defineExpose } from 'vue';

    const visible = defineModel({ type: Boolean });
    const currentPage = ref(1);
    const pageSize = ref(20);
    const total = ref(100);

    const tableData = ref([
        {
            importDate: '2025-06-15 15:00:00',
            operator: 'xxx',
            calcPeriod: '30天',
            turnoverRate: '0.5',
            remainingDays: '100',
            sales: '200'
        },
        {
            importDate: '2025-06-15 15:00:00',
            operator: 'aaa',
            calcPeriod: '30天',
            turnoverRate: '0.5',
            remainingDays: '100',
            sales: '200'
        },
        {
            importDate: '2025-06-15 15:00:00',
            operator: 'ddd',
            calcPeriod: '30天',
            turnoverRate: '0.5',
            remainingDays: '100',
            sales: '200'
        },
        {
            importDate: '2025-06-15 15:00:00',
            operator: 'eee',
            calcPeriod: '30天',
            turnoverRate: '0.5',
            remainingDays: '100',
            sales: '200'
        },
        {
            importDate: '2025-06-15 15:00:00',
            operator: 'eee',
            calcPeriod: '30天',
            turnoverRate: '0.5',
            remainingDays: '100',
            sales: '200'
        }
    ]);

    const handleOpen = (row) => {
        visible.value = true;
        // Fetch data for row
    };

    defineExpose({ handleOpen });
</script>
