<template>
    <div class="app-container">

        <div class="head-container">
            叫号记录
        </div>
        <div class="head-container" id="table_drag">
            <el-table ref="table" :data="tableData.data" v-loading="tableData.loading" row-key="id">
                <el-table-column label="桌号" prop="callNum"> </el-table-column>
                <el-table-column label="桌型" prop="typeEnum">
                    <template v-slot="scope">
                        {{ scope.row.name }}({{ scope.row.note }})
                    </template>
                </el-table-column>
                <el-table-column label="手机号" prop="phone"> </el-table-column>
                <el-table-column label="状态">
                    <template v-slot="scope">
                        <span style="font-weight: 400;font-size: 14px;"
                            :style="{ color: scope.row.state == 2 ? '#3F9EFF' : '' }">{{ scope.row.state | stateFilter }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="时间" prop="callTime"> </el-table-column>

            </el-table>
        </div>
        <!-- <div class="head-container">
            <el-pagination :total="tableData.total" @size-change="handleSizeChange" :current-page="tableData.page + 1"
                :page-size="tableData.size" @current-change="paginationChange"
                layout="total, sizes, prev, pager, next, jumper"></el-pagination>
        </div> -->
    </div>
</template>

<script>
import { callRecord, } from '@/api/shop'
export default {
    data() {
        return {
            query: {
                productId: '',
                name: '',
                categoryId: '',
                typeEnum: ''
            },
            tableData: {
                data: [],
                page: 0,
                size: 30,
                loading: false,
                total: 0
            }
        }
    },
    async mounted() {
        await this.getTableData()
    },
    methods: {
        // 分页回调
        // paginationChange(e) {
        //     this.tableData.page = e - 1
        //     this.getTableData()
        // },
        // 获取商品列表
        async getTableData() {
            try {

                const res = await callRecord({
                    shopId: localStorage.getItem('shopId'),

                    page: 1,
                    size: 9999
                })
                this.tableData.data = res.records
            } catch (error) {
                console.log(error)
            }
        },
        // handleSizeChange(val) {
        //     this.tableData.size = val
        //     this.getTableData()
        // },
    },
    filters: {
        stateFilter(i) {
            if (i == -1) {
                return '已取消'
            } else if (i == 0) {
                return '排队中'
            } else if (i == 1) {
                return '叫号中'
            } else if (i == 2) {
                return '已入座'
            } else if (i == 3) {
                return '已过号 '
            }
        }
    }
}
</script>

<style scoped lang="scss">
.handle {
    font-size: 18px;
    color: #999;

    &:hover {
        cursor: grab;
    }
}

.shop_info {
    display: flex;

    .info {
        flex: 1;
        padding-left: 8px;
        display: flex;
        flex-direction: column;

        .tag_wrap {
            display: flex;
        }
    }
}
</style>