<template>
  <div class='workSpace'>
    <searchForm ref='searchForm' :keys='["addrName"]' @on-search='onSearch'>
      <addPointBtn class="addPointBtn" @after-op="getList()"></addPointBtn>
    </searchForm>
    <VaCard tag="b" class="table">
      <div class="va-table-responsive">
        <VaDataTable :items="users" :columns="columns" :loading="loading">
          <template #cell(setting)="{ rowData }">
            <setPointTimeBtn :params='rowData' @after-op='getList()'></setPointTimeBtn>
            <editPointBtn :params='rowData' @after-op='getList()'></editPointBtn>
            <deletePointBtn :params='rowData' @after-op='getList()'></deletePointBtn>
          </template>
          <template #cell(addrIn)="{ value }">
            <span>{{ getTime(value) }}</span>
          </template>
          <template #cell(addrQuit)="{ value }">
            <span>{{ getTime(value) }}</span>
          </template>
        </VaDataTable>
      </div>
      <div class="pagination">
        <VaPagination
          @click="update"
          v-model="pageInfo.pageNum"
          :total="pageInfo.total"
          :page-size="pageInfo.pageSize"
          :visible-pages="4"
          class="justify-center sm:justify-start"
        />
      </div>
    </VaCard>
  </div>
</template>

<script>
  import searchForm from '../module/searchForm.vue'
  import addPointBtn from './module/addPointBtn.vue'
  import setPointTimeBtn from './module/setPointTimeBtn.vue'
  import deletePointBtn from './module/deletePointBtn.vue'
  import editPointBtn from './module/editPointBtn.vue'
  import dict from '../../../common/dict.js'
  import moment from 'moment'
  export default {
    name: 'index',
    components:{
      searchForm,
      addPointBtn,setPointTimeBtn,deletePointBtn,editPointBtn
    },
    mounted() {
      this.getList()
    },
    methods:{
      onSearch(){
        this.pageInfo.pageNum = 1
        this.getList()
      },
      getTime(time){
        if(time){
          return moment(new Date(parseInt(time))).format('HH:mm:ss')
        }else{
          return '-'
        }
      },
      update(){
        this.getList()
      },
      getList(){
        let params = {
          pageNum: Math.ceil(this.pageInfo.pageNum / this.pageInfo.pageSize),
          pageSize: this.pageInfo.pageSize,
          addrName: this.$refs.searchForm.form.addrName,
        }
        this.$api.getWorkPointList(params).then(res=>{
          this.users = res.result.records
        })
      },
    },
    data(){
      return {
        pageInfo:{
          ...dict.pageInfo
        },
        users:[],
        columns:[
          { key: 'addrName', label: '打卡点名称' },
          { key: 'addrLng', label: '经度' },
          { key: 'addrLat', label: '纬度' },
          { key: 'addrRange', label: '范围' },
          { key: 'addrIn', label: '上班时间' },
          { key: 'addrQuit', label: '下班时间' },
          { key: 'setting', label: '设置' },
        ],
        loading:false
      }
    },
  }
</script>

<style scoped>
.addPointBtn{
  margin-left: 12px;
}
</style>
