<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' : '' }">
              {{ stateFilter(scope.row.state) }}
            </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 callTableApi from "@/api/account/callTable";

export default {
  data() {
    return {
      query: {
        productId: "",
        name: "",
        categoryId: "",
        typeEnum: "",
      },
      tableData: {
        data: [],
        page: 1,
        size: 30,
        loading: false,
        total: 0,
      },
    };
  },
  async mounted() {
    await this.getTableData();
  },
  methods: {
    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 "已过号 ";
      }
    },
    // 分页回调
    // paginationChange(e) {
    //     this.tableData.page = e - 1
    //     this.getTableData()
    // },
    // 获取商品列表
    async getTableData() {
      try {
        const res = await callTableApi.getCallRecord({
          page: 1,
          size: 9999,
        });
        this.tableData.data = res.records;
      } catch (error) {
        console.log(error);
      }
    },
    // handleSizeChange(val) {
    //     this.tableData.size = val
    //     this.getTableData()
    // },
  },
};
</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>