<template>
  <div class="app-container">
    <div v-loading.fullscreen.lock="loadingFull" />
    <el-table
      :data="tableList"
      :header-cell-style="{ background: '#f8fbfc' }"
      class="tableBorder"
      border
      stripe
    >
      <el-table-column
        prop="id"
        label="#"
        width="70"
        align="center"
      />
      <el-table-column
        prop="name"
        label="政委名称"
      />
      <el-table-column
        label="角色"
      >
        <span>政委</span>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <pagination
      :total="tableTotal"
      :limit="listQuery.page_size"
      :page="listQuery.page_index"
      @pagination="changePagination"
      @update:limit="changePagination"
    />
  </div>
</template>
<script>
// api
import { list } from '@/api/staff/list'
export default {
  data() {
    return {
      loadingFull: false,
      listQuery: {
        page_index: 1,
        page_size: 10
      },
      tableList: [],
      tableTotal: 0
    }
  },
  created() {
    this.list()
  },
  methods: {
    async list() {
      this.loadingFull = true
      await list(this.listQuery).then(res => {
        this.loadingFull = false
        if (res.code === 200) {
          this.tableList = res.data.list
          this.tableTotal = res.data.total
        } else {
          this.$message.error(res.message)
        }
      }).catch(e => {
        this.loadingFull = false
      })
    },
    // 分页页码变化
    changePagination(data) {
      const { page, limit } = data
      this.listQuery.page_size = limit
      this.listQuery.page_index = page
      this.list()
    }
  }
}
</script>
