<template>
  <t-card :bordered="false">
    <div class="form-step-container">
      <t-table
        rowKey="index"
        :data="list"
        :columns="columns"
        :stripe="false"
        :bordered="false"
        :hover="true"
        size="large"
        table-layout="auto"
        cellEmptyContent="-"
        :pagination="pagination"
      >
      </t-table>
      <div style="margin-top: 30px">
        <t-pagination
          :total="pagination.total"
          :page-size="pagination.size"
          @current-change="onCurrentChange"
          :showPageSize="false"
        ></t-pagination>
      </div>
    </div>
  </t-card>
</template>
<script lang="ts">
import store from '@/store';

export default {
  data() {
    return {
      list: [],
      columns: [
        { colKey: 'name', title: '姓名', align: 'center', width: 300 },
        { colKey: 'phone', title: '联系方式', align: 'center' },
        { colKey: 'text', title: '内容', align: 'center' },
        { colKey: 'createtime', title: '留言时间', align: 'center' },
      ],
      pagination: {
        page: 1,
        size: 10,
        total: 0,
      },
    };
  },
  mounted() {
    this.getList();
  },
  methods: {
    onCurrentChange(d) {
      this.pagination.page = d;
      this.getList();
    },

    getList() {
      this.$request
        .post('/pc_leave_message/index', { page: this.pagination.page, size: this.pagination.size })
        .then((res) => {
          console.log(res);
          if (res.code == 1) {
            this.list = res.data.ret;
            this.pagination.total = res.data.count;
          }
        })
        .catch((e) => {
          console.log(e);
        });
    },
  },
};
</script>
