<!--  -->
<template>
 <HcCard>
    <HcTable :column="tableColumn" :datas="tableData"/>
    <template #action>
        <HcPages :pages="searchForm" @change="pageChange"></HcPages>
    </template>
 </HcCard>
</template>

<script setup>
import {ref, watch} from  'vue'


const tableColumn = [
    {key: 'name', name: '姓名'},
    {key: 'text', name: '部门'},
    {key: 'color', name: '出勤天数'},
    {key: 'color', name: '休息天数'},
    {key: 'color', name: '工作时长'},
    {key: 'color', name: '迟到次数'},
    {key: 'color', name: '迟到时长'},
    {key: 'color', name: '严重迟到次数'},
    {key: 'color', name: '严重迟到时长'},
    {key: 'color', name: '旷工迟到天数'},
    {key: 'color', name: '早退次数'},
    {key: 'color', name: '早退时长'},
    {key: 'color', name: '上班缺卡次数'},
    {key: 'color', name: '下班缺卡次数'},
    {key: 'color', name: '旷工天数'},
    {key: 'color', name: '丧假（天）'},
    {key: 'color', name: '事假（小时）'},
    {key: 'color', name: '年假（天）'},
    {key: 'color', name: '加班总时长'},
]
const tableData = ref([
    {name: '名称1', text: '文本1', color: ''},
    {name: '名称2', text: '文本2', color: ''},
    {name: '名称3', text: '文本3', color: ''}
])
//搜索表单
const searchForm = ref({current: 1, size: 20, total: 60})

//分页被点击
const pageChange = ({current, size}) => {
    searchForm.value.current = current
    searchForm.value.size = size
}

</script>
<style lang='scss' scoped>
</style>