<template>
    <div>
        <div class="tab_container">
            <el-table :data="tableData.list" height="560px" v-loading="tableData.loading">
                <el-table-column label="订单号" prop="orderNo"></el-table-column>
                <el-table-column label="金额" prop="amount">
                    <template v-slot="scope">
                        ￥{{ scope.row.amount }}
                    </template>
                </el-table-column>
                <el-table-column label="支付类型" prop="payType">
                    <template v-slot="scope">
                        <el-tag disable-transitions :type="payTypeFilter(scope.row.payType).type">
                            {{ payTypeFilter(scope.row.payType).label }}
                        </el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="创建时间" prop="createTime">
                    <template v-slot="scope">
                        {{ dayjs(scope.row.createTime).format('YYYY-MM-DD HH:mm:ss') }}
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="pagination">
            <el-pagination @current-change="paginationChange" :current-page="tableData.page" :page-size="tableData.size"
                layout="total, prev, pager, next, jumper" :total="tableData.total" background>
            </el-pagination>
        </div>
    </div>
</template>

<script setup>
import dayjs from 'dayjs'
import { queryQuickPay } from '@/api/order'
import { ref, reactive, onMounted } from 'vue'

const tableData = reactive({
    resetLoading: false,
    proName: '',
    status: '',
    loading: false,
    list: [],
    page: 1,
    size: 10,
    total: 0
})

// 分页变化
function paginationChange(e) {
    tableData.page = e
    queryQuickPayAjax()
}

// 支付类型
function payTypeFilter(t) {
    const m = {
        cash: {
            type: 'primary',
            label: '现金'
        },
        scanCode: {
            type: 'warning',
            label: '扫码'
        }
    }
    return m[t]
}

// 查询快捷收银订单
async function queryQuickPayAjax() {
    try {
        tableData.loading = true
        const res = await queryQuickPay({
            page: tableData.page,
            pageSize: tableData.size
        })
        tableData.loading = false
        tableData.list = res.list
        tableData.total = res.total
    } catch (error) {
        console.log(error);
    }
}

onMounted(() => {
    queryQuickPayAjax()
})
</script>

<style scoped lang="scss">
.tab_container {
    padding: 0 var(--el-font-size-base) var(--el-font-size-base);
}

.pagination {
    display: flex;
    padding: 0 14px;
}
</style>