<template>
  <div class="d-flex justify-space-between pa-3">
    <div class="d-flex align-center">
      <!-- <a-icon type="left" class="mr-1" @click="back" /> -->
      考勤管理
    </div>
    <div class="d-flex align-center">
      <a-button type="primary" size="small" class="mr-3" @click="openSearch"> 搜索 </a-button>
      <a-button type="primary" size="small" @click="clockExport"> 导出 </a-button>
    </div>
    <div class="timer p-4" v-if="show">
      <!-- 时间选择 -->
      <TimePicker />
      <!-- 成员选择 -->
      <MemberPicker />
      <div class="mt-5 flex justify-center">
        <a-button size="small" class="mr-10" @click="show = false"> 取消 </a-button>
        <a-button type="primary" size="small" @click="searchParam"> 确认 </a-button>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex';
import { clockExport } from '@/config/api';
import TimePicker from '@/components/TimePicker/TimePicker.vue';
import MemberPicker from '@/components/MemberPicker/MemberPicker.vue';

export default {
  components: { TimePicker, MemberPicker },
  data() {
    return { show: false };
  },
  computed: mapState('home', ['projectId', 'startTime', 'endTime', 'memberIdList']),
  methods: {
    /**
     * 导出考勤excel
     * @param {string} projectId
     * @param {array} memberIdList
     * @param {string} startTime
     * @param {string} endTime
     */
    async clockExport() {
      try {
        const { projectId, memberIdList, startTime, endTime } = this;
        const params = { param: { projectId, memberIdList, startTime, endTime } };
        const res = await clockExport(params);
        const { code, msg, data } = res.data;
        if (code === 200) {
          this.$message.success('导出成功');
          window.location.href = data.url;
        } else {
          this.$message.error(msg || '导出失败');
          throw msg;
        }
      } catch (error) {
        throw error || '导出失败';
      }
    },

    searchParam() {
      this.$emit('searchParam');
      this.show = false;
    },

    openSearch() {
      this.show = !this.show;
    },

    // back() {
    //   window.location.href = document.referrer;
    //   window.history.back(-1);
    // },
  },
};
</script>

<style lang="less" scoped>
.search {
  border: none;
}
.timer {
  position: absolute;
  width: 100%;
  top: 49px;
  left: 0;
  background-color: #fff;
  color: black;
  box-shadow: 0px 0px 5px #ccc;
  z-index: 1;
}

.export {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 2;
}
</style>
