<template>
  <div>
    <card-container>
      <vxe-toolbar print custom export>
        <template #buttons>
          <el-date-picker v-model="select.year" type="year" size="small" value-format="yyyy" placeholder="年份"
            format="yyyy" />
          <el-date-picker style="width:250px;margin-left:6px" v-model="select.month" type="month" size="small" value-format="MM" placeholder="月份"
            format="MM" />
          <!-- <el-select  v-if="is_bgs" style="width:250px;margin-left:6px" size="small" @change="changeDepartment"
            v-model="select.department_id" placeholder="请选择">
            <el-option v-for="item in departments" :key="item.id" :label="item.name" :value="item.id">
            </el-option>
          </el-select> -->
          <el-select style="width:250px;margin-left:6px" size="small" v-model="select.department_id" placeholder="请选择">
            <el-option v-for="item in departments" :key="item.id" :label="item.name" :value="item.id">
            </el-option>
          </el-select>
          <el-input size="small" style="width:250px;margin-left:6px" v-model="select.keyword"
            placeholder="请输入关键词"></el-input>

          <el-button icon="el-icon-search" type="primary" plain size="small" style="margin-left: 15px;"
            @click="getData">搜索</el-button>

        </template>
      </vxe-toolbar>
      <vxe-table ref="table" stripe :border='true' style="margin-top: 10px;" :min-height="400" :max-height="600"
        :export-config="{type: 'xlsx'}" :print-config="{}" :column-config="{ resizable: true }" :sort-config="{}"
        :data="tableData">
        <!-- :span-method="spanMethods"  -->
        <!-- :filters="[{ 'data': '' }]",
          :filterRender="{ name: 'input' }" -->
        <vxe-column width="120" header-align="center" fixed="left" align="center" field="user.name" title="姓名"
          :filters="[{'user.name':''}]" :filterRender="{
                   name: 'input',
                 }"></vxe-column>
        <vxe-column width="120" header-align="center" align="center" field="year_holiday" title="年休假总天数"></vxe-column>
        
        <vxe-column width="120" header-align="center" align="center" field="chuchai_days" title="出差天数"></vxe-column>
        
        <vxe-column width="120" header-align="center" align="center" field="overtime_days" title="加班时长"></vxe-column>

        <vxe-column width="120" header-align="center" align="center" field="annual_leave_days"
          title="年休假时长"></vxe-column>
        <vxe-column width="80" header-align="center" align="center" field="personal_leave" title="事假时长"></vxe-column>
        <vxe-column width="80" header-align="center" align="center" field="sick_leave" title="病假时长"></vxe-column>
        <vxe-column width="80" header-align="center" align="center" field="marriage_leave" title="婚假时长"></vxe-column>
        <vxe-column width="80" header-align="center" align="center" field="pregnant_leave" title="产假时长"></vxe-column>
        <vxe-column width="120" header-align="center" align="center" field="nursing_leave" title="护理假时长"></vxe-column>
        <vxe-column width="120" header-align="center" align="center" field="birth_leave" title="育儿假时长"></vxe-column>
        <vxe-column width="80" header-align="center" align="center" field="death_leave" title="丧假时长"></vxe-column>
        <vxe-column width="120" header-align="center" align="center" field="injured" title="工伤假时长"></vxe-column>
        <vxe-column width="180" header-align="center" align="center" field="nursing_leave_birth"
          title="独生子女带薪护理假时长"></vxe-column>
        <vxe-column width="80" header-align="center" align="center" field="rest_leave" title="调休时长"></vxe-column>
        <vxe-column width="80" header-align="center" align="center" field="other_leave" title="其他时长"></vxe-column>

      </vxe-table>
    </card-container>
  </div>
</template>

<script>
  import {
    leaveByYear
  } from '@/api/attendance'
  import {
    departmentListNoAuth
  } from "@/api/common.js"
  export default {
    data() {
      return {
        select: {
          year: this.$moment().format('YYYY'),
          month: (new Date().getMonth() + 1) < 10 ? '0' + (new Date().getMonth() + 1) : new Date().getMonth(),
          department_id: '',
          keyword: ''
        },
        tableData: [],
        departments: []
      }
    },
    methods: {
      async getData() {
        try {
          const res = await leaveByYear(this.select)
          this.tableData = res
        } catch (err) {
          console.error(err)
        }
      },
      async getDepartmentList() {
        try {
          const res = await departmentListNoAuth();
          console.log(res);
          let arr = res
          this.departments = arr
          this.departments.unshift({
            id: '',
            name: '全部'
          })
        } catch (err) {
          console.error(err);
        }
      },
    },
    computed: {},
    created() {
      this.getData()
      this.getDepartmentList()
    }
  }
</script>

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