<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-row :gutter="20">
            <el-col :span="24" :offset="0">
              <el-form-item label="今日上班时间" prop="upperWorkTime">
                <el-time-picker
                  v-model="queryParams.upperWorkTime"
                  type="date"
                  value-format="HH:mm"
                  format="HH:mm"
                  placeholder="请选择上班时间"
                  clearable
                />
              </el-form-item>
              <el-form-item label="今日下班时间" prop="belowWorkTime">
                <el-time-picker
                  v-model="queryParams.belowWorkTime"
                  value-format="HH:mm"
                  format="HH:mm"
                  placeholder="请选择上班打开时间"
                  clearable
                />
              </el-form-item>
              <el-form-item label="今日上班人员">
                <el-button type="primary" @click="openDialog">选 择</el-button>
                <el-button
                  :disabled="
                    userIds.length == 0 ||
                    !queryParams.upperWorkTime ||
                    !queryParams.belowWorkTime ||
                    tableData.length > 0
                  "
                  type="primary"
                  @click="handleUpload"
                >
                  确定上传
                </el-button>
              </el-form-item>
            </el-col>
          </el-row>

          <el-form-item label="关键字" prop="keyWord">
            <el-input
              v-model="queryParams.keyWord"
              placeholder="请输入关键字"
              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">
          <!-- 批量删除 -->
          <el-col :span="1.5">
            <el-button
              type="danger"
              icon="el-icon-delete"
              @click="handleDelete"
              :disabled="ids.length == 0"
              size="small"
            >
              批量删除
            </el-button>
          </el-col>
          <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
        </el-row>

        <el-table :data="tableData" fit highlight-current-row style="width: 100%" @selection-change="handleSlChange">
          <!-- 多选 -->
          <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"
                icon="el-icon-delete"
                @click="handleDelete(scope.row)"
                style="color: #f56c6c"
              >
                删除
              </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" @handleIds="handleIds" />
  </div>
</template>

<script>
import DetailDialog from './components/DetailDialog'
import {
  getAttendanceRecordUploadList,
  attendanceRecordUploadPersonAdd,
  attendanceRecordUploadPersonDel,
} from '@/api/checkInAdmin'
import { indexContinuous } from '@/utils/bonus'

export default {
  components: {
    DetailDialog,
  },
  data() {
    return {
      proId: this.$store.state.user.thisIds.proId,
      contUuid: this.$store.state.user.thisIds.consUuid,
      showSearch: true,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        keyWord: '',
        upperWorkTime: '', // 上班打卡时间
        belowWorkTime: '', // 下班打卡时间
      },
      total: 0, // 总条数
      // 表头
      tableColumns: [
        { label: '姓名', prop: 'userName' },
        { label: '联系方式', prop: 'phone' },
        { label: '身份证号码', prop: 'idCard' },
        { label: '岗位', prop: 'post' },
        { label: '特殊工种种类', prop: 'workType' },
        { label: '上班打卡时间', prop: 'goWorkTime' },
        { label: '下班打卡时间', prop: 'backWorkTime' },
      ],
      // 表格数据
      tableData: [],
      // 人员ids
      userIds: [],
      nowData: new Date(),
      // 选中日期
      selectedDate: new Date().toLocaleDateString().replace(/\//g, '-'),
      ids: [],
    }
  },
  created() {
    console.log(this.selectedDate)
    this.getList()
  },
  methods: {
    indexContinuous,
    // 查询
    handleQuery() {
      console.log('查询')
      this.getList()
    },
    // 重置
    handleReset() {
      console.log('重置')
      this.$refs.queryForm.resetFields()
      this.userIds = []
      this.getList()
    },
    // 获取列表
    async getList() {
      try {
        const params = {
          pageNum: this.queryParams.pageNum,
          pageSize: this.queryParams.pageSize,
          keyWord: this.queryParams.keyWord,
          proId: this.proId,
          contUuid: this.contUuid,
          time: this.selectedDate,
        }
        console.log('🚀 ~ getList ~ params:', params)
        const res = await getAttendanceRecordUploadList(params)
        console.log('🚀 ~ getList ~ res:', res)
        this.tableData = res.rows
        this.total = res.total
      } catch (error) {
        console.log('获取列表失败', error)
      }
    },
    handleSlChange(val) {
      console.log('选中', val)
      this.ids = val.map(item => item.id)
      console.log('🚀 ~ handleSlChange ~ this.ids:', this.ids)
    },
    // 删除
    handleDelete(row) {
      console.log('删除', row, this.ids)
      if (row.id) {
        this.ids = [row.id]
      }
      // 弹框 确认删除
      this.$confirm('是否删除该人员？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(async () => {
          const params = {
            ids: this.ids,
          }
          console.log('🚀 ~ params', params)
          const res = await attendanceRecordUploadPersonDel(params)
          console.log('🚀 ~ res', res)
          this.getList()
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消',
          })
        })
    },
    handleSelect(data) {
      console.log('Selected date:', data.day)
      this.selectedDate = data.day
      this.getList()
    },
    // 打开弹窗
    openDialog() {
      this.$refs.detailDia.openDialog()
    },
    // 获取ids
    handleIds(data) {
      this.userIds = data
    },
    convertToMinutes(time) {
      const [hours, minutes] = time.split(':').map(Number)
      return hours * 60 + minutes
    },
    // 上传
    async handleUpload() {
      console.log('上传', this.userIds)
      if (
        this.convertToMinutes(this.queryParams.upperWorkTime) >= this.convertToMinutes(this.queryParams.belowWorkTime)
      ) {
        this.$message.error('下班时间不能早于上班时间或与上班时间相同')
        return
      }
      const params = {
        proId: this.proId,
        time: this.selectedDate,
        upperWorkTime: this.queryParams.upperWorkTime,
        belowWorkTime: this.queryParams.belowWorkTime,
        attendanceOfPersonnelDtoList: this.userIds,
      }
      console.log('🚀 ~ params', params)
      const res = await attendanceRecordUploadPersonAdd(params)
      console.log('🚀 ~ res', res)
      this.$refs.queryForm.resetFields()
      this.userIds = []
      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>
