<template>
  <el-dialog
    :visible.sync="dialogVisible"
    append-to-body
    :title="type == 'normal' ? '普通工人今日考勤情况' : '管理人员今日考勤情况'"
    top="0"
    width="1200px"
  >
    <el-form
      inline
      :model="searchForm"
      style="padding: 10px; background: #0e3c75; margin-bottom: 10px"
    >
      <el-form-item label="岗位类型">
        <el-select v-model="searchForm.position_type" clearable>
          <el-option
            v-for="(position_type, index) in type == 'normal'
              ? normalPositionTypeData
              : managerPositionTypeData"
            :label="position_type.name"
            :value="position_type.value"
            :key="index"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item v-if="type == 'normal'" label="工种">
        <el-select v-model="searchForm.work_type" clearable>
          <el-option
            v-for="(work_type, index) in workTypeData"
            :label="work_type.name"
            :value="work_type.value"
            :key="index"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="状态">
        <el-select v-model="searchForm.attendance_status" clearable>
          <el-option
            v-for="(attStatus, index) in attendanceStatusData"
            :label="attStatus.name"
            :value="attStatus.value"
            :key="index"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="姓名">
        <el-input v-model="searchForm.keywords" placeholder="请输入姓名" />
      </el-form-item>
      <el-form-item>
        <el-button
          @click="searchRecords"
          style="background: rgba(19, 168, 195, 1); color: #fff; border: none"
          >查询</el-button
        >
      </el-form-item>
    </el-form>

    <el-table :data="tableData" height="550px" stripe>
      <el-table-column label="姓名" prop="person_name" align="center">
      </el-table-column>
      <el-table-column
        label="类型"
        prop="position_type_name"
        align="center"
      ></el-table-column>
      <el-table-column
        v-if="type == 'normal'"
        label="工种"
        prop="job_number"
        align="center"
      ></el-table-column>
      <el-table-column label="性别" align="center" prop="sex_name">
      </el-table-column>
      <el-table-column label="进场时间" align="center" prop="in_time_format">
      </el-table-column>
      <el-table-column label="离场时间" align="center" prop="out_time_format">
      </el-table-column>
      <el-table-column
        label="状态"
        align="center"
        width="90"
        prop="attendance_type_text"
      >
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[10, 20, 30, 40, 50]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>
  </el-dialog>
</template>
<script>
import { getCheckInList, getPersonConfig } from "@/api/index";
export default {
  name: "CheckInDialog",
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    type: {
      type: String,
      default: "normal",
    },
  },
  data() {
    return {
      currentPage: 1,
      total: 0,
      searchForm: {
        position_type: "",
        work_type: "",
        attendance_status: "",
        keywords: "",
      },
      pageSize: 10,
      tableData: [],
      attendanceStatusData: [],
      normalPositionTypeData: [],
      managerPositionTypeData: [],
      workTypeData: [],
    };
  },
  methods: {
    handleCurrentChange(current) {
      getCheckInList({
        ...this.searchForm,
        today_attendance: 1,
        type: this.type == "normal" ? "2" : "1",
        limit: this.pageSize,
        page: current,
      }).then((res) => {
        this.total = res.data.total;
        this.tableData = res.data.data;
        this.currentPage = current;
      });
    },
    handleSizeChange(size) {
      getCheckInList({
        ...this.searchForm,
        today_attendance: 1,
        type: this.type == "normal" ? "2" : "1",
        limit: size,
        page: 1,
      }).then((res) => {
        this.total = res.data.total;
        this.tableData = res.data.data;
        this.currentPage = 1;
      });
    },
    searchRecords() {
      getCheckInList({
        ...this.searchForm,
        today_attendance: 1,
        type: this.type == "normal" ? "2" : "1",
        limit: this.pageSize,
        page: 1,
      }).then((res) => {
        this.total = res.data.total;
        this.tableData = res.data.data;
        this.currentPage = 1;
      });
    },
    getTime(ts) {
      let date = new Date(ts);
      let year = date.getFullYear();
      let month = date.getMonth() + 1;
      let day = date.getDate();
      month = month > 9 ? month : "0" + month;
      day = day < 10 ? "0" + day : day;
      let today = year + "-" + month + "-" + day;
      return `${today}`;
    },
  },
  computed: {
    dialogVisible: {
      get() {
        return this.visible;
      },
      set(val) {
        this.$emit("changeVisible", val);
      },
    },
  },
  mounted() {
    getPersonConfig().then((res) => {
      this.attendanceStatusData = res.data.attendanceStatusData;
      this.workTypeData = res.data.workTypeData;
      this.managerPositionTypeData = res.data.managerPositionTypeData;
      this.normalPositionTypeData = res.data.normalPositionTypeData;
    });
  },
  watch: {
    dialogVisible(val) {
      if (val) {
        this.searchForm = {
          type: this.type == "normal" ? "2" : "1",
          today_attendance: 1,
          position_type: "",
          work_type: "",
          attendance_status: "",
          keywords: "",
        };
        this.searchRecords();
      } else {
        this.total = 0;
        this.currentPage = 1;
        this.tableData = [];
        this.searchForm = {
          position_type: "",
          work_type: "",
          attendance_status: "",
          keywords: "",
        };
      }
    },
  },
};
</script>
<style lang="less" scoped>
.previewImg {
  width: 50px;
  height: 50px;
}
</style>