<template>
  <div>
    <el-dialog title="详情" :visible.sync="dialogVisible" width="70%" v-if="dialogVisible">
      <el-form :model="queryParams" ref="queryForm" size="small" :inline="true">
        <el-form-item label="姓名" prop="proName">
          <el-input
            v-model="queryParams.userName"
            placeholder="请输入姓名" v-no-whitespace
            clearable
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item label="考勤年月" prop="attendanceMonth" v-if="type == 2">
          <el-date-picker
            v-model="queryParams.attendanceMonth"
            type="month"
            value-format="yyyy-MM"
            placeholder="请选择年月"
            :clearable="false"
          ></el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="handleQuery">查询</el-button>
          <el-button icon="el-icon-refresh" @click="handleReset">重置</el-button>
        </el-form-item>
      </el-form>

      <el-row :gutter="10" style="margin: 10px 2px">
        <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport">导出数据</el-button>
      </el-row>

      <el-table :data="tableData" fit highlight-current-row style="width: 100%" :border="false" v-if="type == 1">
        <!-- 多选 -->
        <!-- <el-table-column type="selection" width="55" align="center" /> -->
        <el-table-column
          type="index"
          width="55"
          label="序号"
          align="center"
          :index="indexContinuous(queryParams.pageNum, queryParams.pageSize)"
        />
        <el-table-column
          v-for="(column, index) in tableColumns"
          show-overflow-tooltip
          :key="column.prop"
          :label="column.label"
          :prop="column.prop"
          align="center"
        >
          <el-table-column
            v-for="item in column.children"
            :key="item.prop"
            :label="item.label"
            :prop="item.prop"
          ></el-table-column>
        </el-table-column>
      </el-table>

      <el-table :data="tableData" fit highlight-current-row style="width: 100%" :border="false" v-if="type == 2">
        <!-- 多选 -->
        <!-- <el-table-column type="selection" width="55" align="center" /> -->
        <el-table-column
          type="index"
          width="55"
          label="序号"
          align="center"
          :index="indexContinuous(queryParams.pageNum, queryParams.pageSize)"
        />
        <el-table-column
          v-for="(column, index) in tableColumns2"
          show-overflow-tooltip
          :key="column.prop"
          :label="column.label"
          :prop="column.prop"
          align="center"
        ></el-table-column>
      </el-table>

      <!-- 分页 -->
      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />

      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="dialogVisible = false">关 闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { attendanceRecordDetail, attendanceRecordMonthDetail } from '@/api/checkInAdmin'
import { indexContinuous } from '@/utils/bonus'

export default {
  data() {
    return {
      row: {},
      type: 1,
      dialogVisible: false,
      total: 0,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        userName: '', // 姓名
        attendanceMonth: '', // 考勤年月
      },
      // 表头
      tableColumns: [
        { label: '姓名', prop: 'userName' },
        { label: '联系方式', prop: 'phone' },
        { label: '所属承包商', prop: 'contName' },
        { label: '所属分包商', prop: 'subName' },
        {
          label: '上班打卡',
          children: [
            { label: '打卡时间', prop: 'goWorkTime' },
            { label: '打卡结果', prop: 'goResult' },
          ],
        },
        {
          label: '下班打卡',
          children: [
            { label: '打卡时间', prop: 'backWorkTime' },
            { label: '打卡结果', prop: 'backResult' },
          ],
        },
        { label: '上班打卡点', prop: 'goLocation' },
        { label: '下班打卡点', prop: 'backLocation' },
      ],
      tableColumns2: [
        { label: '姓名', prop: 'userName' },
        { label: '联系方式', prop: 'phone' },
        { label: '所属承包商', prop: 'contName' },
        { label: '所属分包商', prop: 'subName' },
        { label: '考勤年月', prop: 'attendanceMonth' },
        { label: '出勤天数', prop: 'attendanceDays' },
        { label: '迟到次数', prop: 'clockInCount' },
        { label: '早退次数', prop: 'clockOutCount' },
        { label: '上午缺卡次数', prop: 'earlyCount' },
        { label: '下午缺卡次数', prop: 'lateCount' },
      ],
      tableData: [],
    }
  },
  methods: {
    indexContinuous,
    // 打开详情弹窗
    openDialog(row, type) {
      this.row = row
      this.type = type
      this.dialogVisible = true
      this.queryParams.userName = ''
      if (type == 2) {
        this.queryParams.attendanceMonth = new Date().getFullYear() + '-' + (new Date().getMonth() + 1)
      }
      this.getList()
    },
    // 关闭详情弹窗
    closeDialog() {
      this.dialogVisible = false
    },
    // 查询
    handleQuery() {
      this.getList()
    },
    // 重置
    handleReset() {
      this.queryParams.userName = ''
      this.queryParams.time = ''
      this.getList()
    },
    // 获取列表
    async getList() {
      try {
        console.log('获取列表', this.queryParams, this.type)
        if (this.type == 1) {
          const params = {
            ...this.queryParams,
            proId: this.row.proId,
            time: this.row.time,
          }
          console.log('🚀 ~ getList ~ params:', params)
          const res = await attendanceRecordDetail(params)
          console.log('🚀 ~ 获取列表 ~ res:', res)
          this.tableData = res.rows
          this.total = res.total
        } else {
          const params = {
            ...this.queryParams,
            time: this.queryParams.attendanceMonth,
            proId: this.row.proId,
          }
          console.log('🚀 ~ getList ~ params:', params)
          const res = await attendanceRecordMonthDetail(params)
          console.log('🚀 ~ 获取列表 ~ res:', res)
          this.tableData = res.rows
          this.total = res.total
        }
      } catch (error) {
        console.log('error', error)
        this.tableData = []
        this.total = 0
      }
    },
    // 导出数据
    handleExport() {
      try {
        let params = {}
        let url = ''
        let fileName = ''
        if (this.type == 1) {
          params = {
            ...this.queryParams,
            proId: this.row.proId,
            time: this.row.time,
          }
          console.log('🚀 ~ 导出 ~ params:', params)
          url = '/project/attendance/export'
          fileName = `考勤详情_${new Date().getTime()}.xLsx`
        } else {
          params = {
            ...this.queryParams,
            time: this.queryParams.attendanceMonth,
            proId: this.row.proId,
          }
          url = '/project/attendance/monthExport'
          fileName = `考勤月报_${new Date().getTime()}.xLsx`
          console.log('🚀 ~ 导出 ~ params:', params)
        }
        this.derive(url, params, fileName)
      } catch (error) {
        console.log('导出数据失败', error)
      }
    },
  },
}
</script>

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