<template>
  <div class="app-container">
    <el-row :gutter="20">
      <el-col :span="7" :offset="0">
        <el-calendar v-model="nowData">
          <template slot="dateCell" slot-scope="{ date, data }">
            <div style="width: 66px; height: 60px" @click="handleSelect(data)">
              {{ data.day.split('-')[2] }}
            </div>
          </template>
        </el-calendar>
      </el-col>
      <el-col :span="1" :offset="0">
        <div class="line"></div>
      </el-col>
      <el-col :span="16" :offset="0">
        <el-form
          v-show="showSearch"
          :model="queryParams"
          ref="queryForm"
          size="small"
          :inline="true"

        >
          <el-form-item label="工程名称" prop="proName">
            <el-input
              v-model="queryParams.proName"
              placeholder="请输入工程名称" v-no-whitespace
              clearable
              @keyup.enter.native="handleQuery"
            />
          </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" class="mb8">
          <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
        </el-row>

        <el-table :data="tableData" fit highlight-current-row style="width: 100%">
          <!-- 多选 -->
          <!-- <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>
          <!-- 操作 -->
          <el-table-column label="操作" align="center" width="150">
            <template slot-scope="scope">
              <el-button type="text" size="mini" @click="handleDetail(scope.row, 1)">查看详情</el-button>
              <el-button type="text" size="mini" @click="handleDetail(scope.row, 2)">考勤月报</el-button>
            </template>
          </el-table-column>
        </el-table>

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

    <DetailDialog ref="detailDia" />
  </div>
</template>

<script>
import DetailDialog from './components/DetailDialog'
import { getAttendanceRecordList } from '@/api/checkInAdmin'
import { indexContinuous } from '@/utils/bonus'

export default {
  components: {
    DetailDialog,
  },
  data() {
    return {
      showSearch: true,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        proName: '', // 工程名称
        time: new Date().toLocaleDateString().replace(/\//g, '-'), // 考勤时间, 默认当天
      },
      total: 0, // 总条数
      // 表头
      tableColumns: [
        { label: '工程名称', prop: 'proName' },
        { label: '工程状态', prop: 'proStatus' },
        { label: '入场人数', prop: 'entryNum' },
        { label: '上班打卡人数', prop: 'onWorkNum' },
        { label: '下班打卡人数', prop: 'offWorkNum' },
      ],
      // 表格数据
      tableData: [],
      nowData: new Date(),
    }
  },
  created() {
    this.getList()
  },
  methods: {
    indexContinuous,
    // 查询
    handleQuery() {
      console.log('查询')
      this.getList()
    },
    // 重置
    handleReset() {
      console.log('重置')
      this.$refs.queryForm.resetFields()
      this.getList()
    },
    // 获取列表
    async getList() {
      try {
        const params = {
          ...this.queryParams,
        }
        console.log('params', params)
        const res = await getAttendanceRecordList(params)
        console.log('🚀 ~ 获取列表 ~ res:', res)
        this.tableData = res.rows
        this.total = res.total
      } catch (error) {
        console.log('error', error)
      }
    },
    // 查看详情
    handleDetail(row, type) {
      row.time = this.queryParams.time
      console.log('查看详情', row, type)
      this.$refs.detailDia.openDialog(row, type)
    },
    handleSelect(data) {
      console.log('Selected date:', data.day, new Date(data.day).getTime())
      this.queryParams.time = data.day
      this.getList()
    },
  },
}
</script>

<style lang="scss" scoped>
.is-selected {
  color: #1989fa;
}
.line {
  width: 1.5px;
  height: 80vh;
  background-color: #7f8289;
}
::v-deep .el-calendar-table td {
  border-bottom: none;
  border-right: none;
}
::v-deep .el-calendar-table tr td:first-child {
  border-left: none;
}
::v-deep .el-calendar-table .el-calendar-day {
  height: 60px;
}
</style>
