<template>
  <div>
    <card-container>
      <vxe-toolbar>
        <template #buttons>
          <el-date-picker v-model="select.month" type="month" size="small" value-format="yyyy-MM"></el-date-picker>
          <el-button icon="el-icon-search" type="primary" plain size="small" style="margin-left: 6px;" @click="getStatistics">搜索</el-button>
        </template>
      </vxe-toolbar>
      <vxe-table
        ref="table"
        stripe
        style="margin-top: 10px;"
        round
        :max-height="600"
        keep-source
        show-header-overflow
        show-footer-overflow
        show-overflow
        :row-config="{ isHover: true }"
        :header-cell-style="{ 'white-space': 'wrap' }"
        :scroll-x="{ enabled: true, gt: 0 }"
        :column-config="{ resizable: true }"
        :data="tableData.admins">
        <vxe-column type="seq" width="50" align="center" fixed="left"></vxe-column>
        <vxe-column field="name" title="姓名" fixed="left" align="center" width="120"></vxe-column>
        <vxe-column field="department.name" title="所在部门" align="center" width="150"></vxe-column>
        <vxe-colgroup v-for="item in dateTableColumns" align="center" :title="item.title">
          <vxe-column title="上午" width="160" align="center">
            <template #default="{ row }">
              <span>{{ row.attendance[item.date] instanceof Array ? '' : row.attendance[item.date][0].sign_in_at }}</span>
            </template>
          </vxe-column>
          <vxe-column title="下午" width="160" align="center">
            <template #default="{ row }">
              <span>{{ row.attendance[item.date] instanceof Array ? '' : row.attendance[item.date][0].sign_out_at }}</span>
            </template>
          </vxe-column>
        </vxe-colgroup>
      </vxe-table>
    </card-container>
  </div>
</template>

<script>
import { statistics } from '@/api/attendance'
export default {
  data() {
    return {
      select: {
        month: this.$moment().format('YYYY-MM')
      },
      tableData: {
        admins: [],
        dates: []
      }
    }
  },
  methods: {
    async getStatistics() {
      try {
        const res = await statistics(this.select)
        this.tableData = res
      } catch (err) {
        console.error(err)
      }
    }
  },
  computed: {
    dateTableColumns() {
      return this.tableData.dates.map(i => ({
        title: `${this.$moment(i.day).format('YYYY年MM月DD日')} ${i.is_workday ? '工作日' : '公休'}`,
        field: i.day,
        date: i.date
      }))
    }
  },
  created() {
    this.getStatistics()
  }
}
</script>

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