<template>
 <div v-if="this.$store.state.user.userType == 0 || this.$store.state.user.userType == 1">
  <Input type="text" search enter-button placeholder="根據施工人員姓名查找" v-model="peopleName" @input="search"/>
  <Table width="100%" :columns="peopleCol" :data="peopleDat"></Table>
  <!--通過sync修飾符可以動態獲取頁碼-->
  <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" >
    <Icon type="ios-information-circle"></Icon>
    <span>刪除確認</span>
   </p>
   <div >
    <p>此操作不可恢復，確定要刪除嗎？</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,//總條數
    pageSize:2,//每頁顯示數據條數
    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(){//組件初始化顯示的數據
    const currPage=1
    const pageSize=this.pageSize
    //下面是向后臺發送請求
    setTimeout(async()=>{
     const r=await getWorkers(currPage,pageSize)
     if(r.data.success){
      this.dataCount=r.data.list.count//初始化總條數
      this.peopleDat=r.data.list.data//默認頁列表渲染數據
      console.log(r)
     }
    })
   },
   changePage(index){//頁碼改變觸發的函數
    //index當前頁碼
    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//當前頁列表數據
     }
    })
   },
   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//如果不設置總條數那么當精確查詢時每頁都會有數據這得看后端返回的數據有沒有這些數據
     } 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){
      //這里做的一個功能是當你刪除某頁數據后立即刷新當前頁的數據
      this.changePage(this.current)//更新當前頁碼的數據
      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>