<template>
 <div v-if="this.$store.state.user.userType == 0 || this.$store.state.user.userType == 1">
 <Input type="text" search enter-button placeholder="根據(jù)施工人員姓名查找" v-model="peopleName" @input="search"/>
 <Table width="100%" :columns="peopleCol" :data="peopleDat"></Table>
 <!--通過(guò)sync修飾符可以動(dòng)態(tài)獲取頁(yè)碼-->
 <Page :total="dataCount" :current.sync="current" :page-size="pageSize" show-total class="paging" @on-change="changePage"></Page>
 
 <!--該modal是刪除提醒框-->
 <Modal v-model="confirmDelete" width="360">
  <p slot="header" style="color:#f60;text-align:center">
  <Icon type="ios-information-circle"></Icon>
  <span>刪除確認(rèn)</span>
  </p>
  <div style="text-align:center">
  <p>此操作不可恢復(fù)，確定要?jiǎng)h除嗎？</p>
  </div>
  <div slot="footer">
  <Button size="large" @click="cancelDelete">取消</Button>
  <Button type="error" size="large" @click="deleteConfirm">刪除</Button>
  </div>
 </Modal>
 </div>
</template>
<script>
 export default {
 components: {
  addWorker,
  updateWorker
 },
 data () {
  return {
  selectedID:'',//刪除選中的ID
  confirmDelete:false,//刪除提示框
  current:1,
  isShow:false,
  selectedList:{},//選中施工人員的id值
  peopleName:'',
  dataCount:0,//總條數(shù)
  pageSize:2,//每頁(yè)顯示數(shù)據(jù)條數(shù)
  peopleDat: [],
  peopleCol: [
   {
   title: '操作',
   key: 'action',
   width: 120,
   render: (h, params) => {
    return h('Button', {
     props: {
     type: 'error',
     size: 'small'
     },
     on:{
     click: ()=>{
      this.confirmDelete=true
      this.delete(params.row.peopleID)
     }
     }
    }, '刪除')
   }
   }
  ],
  }
 },
 mounted() {
  this.getWorkerList()
 },
 methods:{
  getWorkerList(){//組件初始化顯示的數(shù)據(jù)
  const currPage=1
  const pageSize=this.pageSize
  //下面是向后臺(tái)發(fā)送請(qǐng)求
  setTimeout(async()=>{
   const r=await getWorkers(currPage,pageSize)
   if(r.data.success){
   this.dataCount=r.data.list.count//初始化總條數(shù)
   this.peopleDat=r.data.list.data//默認(rèn)頁(yè)列表渲染數(shù)據(jù)
   console.log(r)
   }
  })
  },
  changePage(index){//頁(yè)碼改變觸發(fā)的函數(shù)
  //index當(dāng)前頁(yè)碼
  const currPage=index
  const pageSize=this.pageSize
  setTimeout(async ()=>{
   const r=await changePage(currPage,pageSize)
   if(r.data.success){
   this.peopleDat=r.data.list.data//當(dāng)前頁(yè)列表數(shù)據(jù)
   }
  })
  },
  search(){
  const peopleName=this.peopleName
  const pageSize=this.pageSize
  setTimeout(async()=>{
   const r=await search(peopleName,pageSize)
   if(r.data.success){
   this.peopleDat=r.data.list.data
   this.dataCount=r.data.list.count//如果不設(shè)置總條數(shù)那么當(dāng)精確查詢時(shí)每頁(yè)都會(huì)有數(shù)據(jù)這得看后端返回的數(shù)據(jù)有沒(méi)有這些數(shù)據(jù)
   } else {
   this.$Message.warning('查詢失敗!')
   }
  })
  },
  delete(peopleID){
  this.selectedID=peopleID
  },
  deleteConfirm(){
  const id=this.selectedID
  setTimeout(async ()=>{
   const r=await deleteWorker(id)
   if(r.data.success){
   //這里做的一個(gè)功能是當(dāng)你刪除某頁(yè)數(shù)據(jù)后立即刷新當(dāng)前頁(yè)的數(shù)據(jù)
   this.changePage(this.current)//更新當(dāng)前頁(yè)碼的數(shù)據(jù)
   this.$Message.success('刪除成功!')
   } else{
   this.$Message.warning('刪除失敗!')
   }
  })
  this.confirmDelete=false
  },
  cancelDelete(){
  this.confirmDelete=false
  this.$Message.info('你取消了刪除操作')
  }
 }
 }
</script>
<style scoped>
 .paging{
 float:left;
 margin-top:10px;
 }
</style>