<template>
  <el-drawer
    title="员工变更记录"
    :visible.sync="show"
    direction="rtl"
    size="75%"
  >
    <div class="pa-3">
      <m-search shadow="never" class="mb-3" :items="searchItems" v-model="searchValues" @search="onSearch"></m-search>
      <m-table
        v-loading="loading"
        shadow="never"
        :card-title="`员工变更记录 [ 截止 ${exportTime} ] `"
        :headers="headers"
        :items="items"
        :total="total"
        :page-size="pageInfo.size"
        :page-current="pageInfo.current"
        @page-change="onPageChange"
      >
        <template #card-tools>
            <m-button size="mini" type="orange" icon="el-icon-download" :loading="exportLoading" @click="onExport">导出</m-button>
          </template>
      </m-table>
    </div>
  </el-drawer>
</template>

<script>
import { getRosterVersion, exportRosterVersion } from '@/api/system'
import { downloadFile } from '@/utils'
import { mapGetters } from 'vuex'
import {
  dateFormat
} from '@/utils/date'
export default {
  name: 'rosterVersion',
  data () {
    return {
      loading: false,
      headers: [],
      items: [],
      show: false,
      pageInfo: {
        size: 10,
        current: 1
      },
      searchValues: {
        versionDate: dateFormat('YYYY-mm-dd HH:MM:SS', new Date()),
        employeeName: null
      },
      exportTime: dateFormat('YYYY-mm-dd HH:MM:SS', new Date()),
      exportLoading: false
    }
  },
  computed: {
    ...mapGetters(['organizationTree']),
    searchItems () {
      return [
        {
          label: '时间',
          type: 'datePicker',
          prop: 'versionDate',
          options: {
            placeholder: '请选择时间',
            type: 'datetime',
            valueFormat: 'yyyy-MM-dd HH:mm:ss'
          }
        },
        {
          label: '员工名称',
          options: {
            placeholder: '请输入员工名称'
          },
          prop: 'employeeName',
          type: 'input'
        },
        {
          label: '部门名称',
          options: {
            filterable: true,
            clearable: true,
            placeholder: '请选择部门',
            options: this.organizationTree,
            showAllLevels: false,
            props: {
              emitPath: false,
              value: 'organizationNo',
              label: 'organizationName',
              children: 'child'
            }
          },
          prop: 'organizationNo',
          type: 'cascader'
        }
      ]
    }
  },
  methods: {
    async open (headers) {
      this.headers = headers
      this.show = true
      await this.init()
    },
    async init () {
      this.loading = true
      try {
        const { data } = await getRosterVersion({
          page: {
            ...this.pageInfo
          },
          ...this.searchValues
        })
        this.items = data.records.map(e => {
          const date = new Date(e.tradeUnionsTime)
          // 获取年、月、日
          const year = date.getFullYear()
          const month = String(date.getMonth() + 1).padStart(2, '0') // 月份从0开始，所以要加1
          const day = String(date.getDate()).padStart(2, '0')
          return {
            ...e,
            tradeUnionsTimeText: `${year}年${month}月${day}日`
          }
        })
        this.total = data.total
      } catch (error) {
        this.$message.error(error)
      } finally {
        this.loading = false
      }
    },
    async onExport () {
      this.exportLoading = true
      try {
        const { data, name } = await exportRosterVersion({
          versionDate: this.exportTime
        })
        downloadFile(data, name)
      } catch (error) {
        this.$message.error(error)
      } finally {
        this.exportLoading = false
      }
    },
    onSearch () {
      this.pageInfo.current = 1
      this.exportTime = this.searchValues.versionDate
      this.init()
    },
    onPageChange (index) {
      this.pageInfo.current = index
      this.init()
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
