<template>
  <div>
    <card-container>
      <vxe-grid v-bind="tableData">
        <template #toolbarButtons>
          <el-date-picker v-model="select.year" type="year" size="small" value-format="yyyy"></el-date-picker>
          <el-button icon="el-icon-search" type="primary" plain size="small" style="margin-left: 6px;" @click="getData">搜索</el-button>
        </template>
      </vxe-grid>
    </card-container>
  </div>
</template>

<script>
import { leaveByYear } from '@/api/attendance'
export default {
  data() {
    return {
      select: {
        year: new Date().getFullYear().toString()
      },
      tableData: {}
    }
  },
  methods: {
    async getData() {
      try {
        const res = await leaveByYear(this.select)
        if (res[0].other) {
          this.tableData = {
            minHeight: 200,
            maxHeight: 600,
            toolbarConfig: {
              print: true,
              export: true,
              custom: true,
              slots: {
                buttons: 'toolbarButtons'
              }
            },
            sortConfig: {
            },
            columns: [
              {
                title: '姓名',
                field: 'name',
                width: 120,
                align: 'center',
                filters: [{ data: '' }],
                filterRender: {
                  name: 'input'
                }
              },
              ...Object.keys(res[0].other)?.map(key => ({
                title: key,
                width: 'auto',
                field: 'other',
                align: 'center',
                formatter: ({ cellValue }) => cellValue[key] ?? 0,
              }))
            ],
            data: res
          }
        }
      } catch (err) {
        console.error(err)
      }
    }
  },
  computed: {},
  created() {
    this.getData()
  }
}
</script>

<style scoped lang="scss">
</style>
