<!-- 叫号记录 -->
<template>
    <el-dialog v-model="dialogVisible" title="叫号记录" @closed="reset" width="80vw">
        <el-table :data="tableData.list" border style="height: 84%;" height="50vh">
            <el-table-column label="桌号" prop="name"></el-table-column>
            <el-table-column label="桌型" prop="note"></el-table-column>
            <el-table-column label="手机号" prop="phone"></el-table-column>
            <el-table-column label="状态" prop="state">
                <template v-slot="scope">
                    {{ statusList[scope.row.state].text }}
                </template>
            </el-table-column>
            <el-table-column label="时间" prop="callTime" width="200">
                <template v-slot="scope">{{ dayjs(scope.row.callTime).format('YYYY-MM-DD HH:mm:ss') }}</template>
            </el-table-column>
        </el-table>
        <div class="pagination" style="padding-top:15px;display: flex;justify-content: flex-end;">
            <el-pagination v-model:current-page="tableData.page" v-model:page-size="tableData.size"
                layout="total, prev, pager, next" :total="tableData.total" background @current-change="paginationChange"
                @size-change="paginationChange">
            </el-pagination>
        </div>
    </el-dialog>
</template>

<script setup>
import { dayjs } from 'element-plus'
import { reactive, ref } from 'vue';
import { callRecord } from '@/api/account.js'
import { useUser } from "@/store/user.js"
const store = useUser()

const dialogVisible = ref(false)
const tableData = reactive({
    loading: false,
    list: [],
    page: 1,
    size: 20,
    total: 0
})
const statusList = {
    '-1': {
        type: 'warning',
        text: '已取消'
    },
    0: {
        type: 'danger',
        text: '排队中'
    },
    1: {
        type: 'success',
        text: '叫号中'
    },
    2: {
        type: 'success',
        text: '已入座'
    },
    3: {
        type: 'success',
        text: '已过号'
    }
}

// 分页变化
function paginationChange(e) {
    callRecordAjax()
}

// 记录数据
async function callRecordAjax() {
    try {
        tableData.loading = true
        const res = await callRecord({
            callTableId: '',
            shopId: store.shopInfo.id,
            page: tableData.page,
            size: tableData.size
        })
        tableData.list = res.records
        tableData.total = +res.totalRow
    } catch (error) {
        console.log(error);
    }
    tableData.loading = false
}

function reset() {
    tableData.page = 1
}

function show() {
    dialogVisible.value = true
    callRecordAjax()
}

defineExpose({
    show
})
</script>