<template>
  <page-layer>
    <template #header>
      <el-date-picker
          v-model="datePeriod"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :shortcuts="clockinShortcuts"
          style="width: 260px"
      ></el-date-picker>
      <span></span>
      <el-button type="primary" icon="Search" @click="fetchData">查询数据</el-button>
      <el-button type="primary" icon="Upload" @click="exportExcel" :disabled="disableExport">导出Excel</el-button>
    </template>
    <template #main>
      <el-table :data="data.list" stripe :height="tableHeight">
        <el-table-column prop="checkinDate" label="日期" width="110" sortable></el-table-column>
        <el-table-column prop="name" label="姓名" width="70"></el-table-column>
        <el-table-column prop="userid" label="工号" width="50"></el-table-column>
        <el-table-column prop="dept" label="科室"></el-table-column>
        <el-table-column prop="times" label="打卡次数"></el-table-column>
        <el-table-column prop="worktime" label="工作时长"></el-table-column>
        <el-table-column prop="checkinHourOn" label="上班打卡时间"></el-table-column>
        <el-table-column prop="checkinAddrOn" label="上班打卡地点"></el-table-column>
        <el-table-column label="上班打卡状态">
          <template v-slot="scope">
            <span :style="textColor(scope.row.checkinStateOn)">
              {{ scope.row.checkinStateOn }}
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="notesOn" label="上班打卡备注"></el-table-column>
        <el-table-column prop="checkinHourOff" label="下班打卡时间"></el-table-column>
        <el-table-column prop="checkinAddrOff" label="下班打卡地点"></el-table-column>
        <el-table-column label="下班打卡状态">
          <template v-slot="scope">
            <span :style="textColor(scope.row.checkinStateOff)">
              {{ scope.row.checkinStateOff }}
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="notesOff" label="下班打卡备注"></el-table-column>
      </el-table>
      <el-pagination
          @current-change="handlePageChange"
          :current-page="currentPage"
          :page-size="30"
          layout="total, prev, pager, next, jumper"
          background
          :total="data.totalSize"
          style="margin: 5px 10px"
      >
      </el-pagination>
    </template>
  </page-layer>
</template>

<script>
import { computed, reactive, ref } from 'vue'
import { clockinShortcuts } from '@/data/shortcuts'
import { getClockinDataFromDb } from '@/api/clockin'
import { ElMessage } from 'element-plus'
import store from '@/store'
import { downloadExcel } from '@/utils/excel'
import { formatDate } from '@/utils/date'
import PageLayer from "@/layout/PageLayer";

export default {
  components: {PageLayer},
  setup() {
    const datePeriod = ref(null)
    const windowSize = store.state.app.windowSize
    const tableHeight = windowSize.h - 50
    const data = reactive({
      list: [],
      totalSize: 0,
    })
    const currentPage = ref(1)
    const handlePageChange = (val) => {
      currentPage.value = val
      fetchData()
    }

    const disableExport = computed(() => {
      return data.list.length === 0
    })

    const fetchData = () => {
      if (!datePeriod.value) {
        ElMessage({
          message: '请先选择时间范围！',
          type: 'warning',
          duration: 2000,
          showClose: true,
        })
        return
      }
      const param = {
        start: datePeriod.value[0],
        end: datePeriod.value[1],
        currentPage: currentPage.value,
        pageSize: 30,
      }
      getClockinDataFromDb(param).then((res) => {
        data.list = res.list
        data.totalSize = res.totalSize
      })
    }
    const exportExcel = () => {
      if (!datePeriod.value) {
        ElMessage({
          message: '请先选择时间范围！',
          type: 'warning',
          duration: 2000,
          showClose: true,
        })
        return
      }
      const data = {
        param: {
          start: datePeriod.value[0],
          end: datePeriod.value[1],
          currentPage: 1,
          pageSize: -1,
        },
        url: '/clockin/exportExcel',
        fileName: '全院打卡数据（' + formatDate(datePeriod.value[0]) + ' - ' + formatDate(datePeriod.value[1]) + '）.xlsx',
      }
      setTimeout(() => {
        downloadExcel(data)
      }, 100)
    }

    return {
      datePeriod,
      tableHeight,
      clockinShortcuts,
      fetchData,
      data,
      currentPage,
      handlePageChange,
      textColor,
      exportExcel,
      disableExport,
    }
  },
}

function textColor(val) {
  if (val !== '正常') return { color: 'red' }
}
</script>
