<template>
  <!-- 班次表单 -->
  <el-drawer :title="title" :visible.sync="open" size="55%">
    <el-form ref="form" :model="form" :rules="rules" label-width="120px">
      <el-row>
        <Field
          label="班次名称"
          prop="className"
          v-model="form.className"
          placeholder="请输入班次名称"
          :maxLength="20"
        />
        <Field
          label="班次负责人"
          prop="classResponsiblePersonId"
          type="select"
          :enumData="dict.workManId"
          v-model="form.classResponsiblePersonId"
          placeholder="请选择班次负责人"
        />
      </el-row>
      <el-form-item label="上下班考勤时间" prop="attendanceClassDetailList">
        <el-button type="text" @click="handleAddAttendanceClassDetail"
          >添加</el-button
        >
        <div
          class="bancifor"
          v-for="(item, index) in attendanceClassDetailList"
          :key="index"
        >
          <div class="title flex flex-align-center flex-pack-justify">
            <span> 第{{ index + 1 }}次上班 </span>
            <el-button
              type="danger"
              size="mini"
              @click="handleDeleteAttendanceClassDetail(index)"
              >删除</el-button
            >
          </div>
          <div>
            <span>上班考勤时间</span>
            <el-time-picker
              size="mini"
              style="width:150px"
              class="ml20"
              value-format="HH:mm"
              format="HH:mm"
              v-model="item.goWorkDate"
              placeholder="上班考勤时间"
            >
            </el-time-picker>
          </div>
          <div>
            <span>打开时段： </span>
            <span>上班前签到</span>
            <el-time-picker
              size="mini"
              style="width:150px"
              class="ml20"
              v-model="item.goWorkDateBefore"
              value-format="H:mm"
              format="H小时mm分钟"
              placeholder="未设置"
            >
            </el-time-picker>
            <span class="ml20">——</span>
            <span class="ml20">上班后签到</span>
            <el-time-picker
              size="mini"
              style="width:150px"
              class="ml20"
              v-model="item.goWorkDateAfter"
              value-format="HH:mm"
              format="H小时mm分钟"
              placeholder="未设置"
            >
            </el-time-picker>
          </div>
          <div>
            <span>下班考勤时间</span>
            <el-time-picker
              size="mini"
              style="width:150px"
              class="ml20"
              format="HH:mm"
              value-format="HH:mm"
              v-model="item.offWorkDate"
              placeholder="下班考勤时间"
            >
            </el-time-picker>
          </div>
          <div>
            <span>打开时段：</span>
            <span>下班前签退</span>
            <el-time-picker
              size="mini"
              style="width:150px"
              class="ml20"
              v-model="item.offWorkDateBefore"
              value-format="H:mm"
              format="H小时mm分钟"
              placeholder="未设置"
            >
            </el-time-picker>
            <span class="ml20">——</span>
            <span class="ml20">下班后签退</span>
            <el-time-picker
              size="mini"
              style="width:150px"
              class="ml20"
              v-model="item.offWorkDateAfter"
              value-format="H:mm"
              format="H小时mm分钟"
              placeholder="未设置"
            >
            </el-time-picker>
          </div>
        </div>
      </el-form-item>
    </el-form>
    <div class="dialog-footer ml20">
      <!-- submitForm -->
      <el-button
        type="primary"
        size="mini"
        v-if="pageInfo.type !== 'view'"
        @click="formatData"
        >确 定</el-button
      >
      <el-button @click="cancel" size="mini">取 消</el-button>
    </div>
  </el-drawer>
</template>
<script>
import form from "@/assets/mixins/formdialog";
import dialogShow from "./dialogshow";
import { transFormMinut, transFormTime } from "@/assets/utils/dateFormat.js";
export default {
  mixins: [form],
  components: {
    dialogShow,
  },
  data() {
    return {
      // 子表选中数据
      checkedAttendanceClassDetail: [],
      // 考勤班次详细信息表格数据
      attendanceClassDetailList: [],
      // 遮罩层
      loading: true,
      // 弹出层标题
      title: "考勤班次信息",
      // 是否显示弹出层
      open: false,
      toString: [],
      // 表单校验
      rules: {
        className: [{ required: true, message: "请输入班次名称" }],
        classResponsiblePersonId: [
          { required: true, message: "请选择班次负责人" },
        ],
        attendanceClassDetailList: [{ required: true, message: "请添加" }],
      },
      currentIndex: 0, //当前索引值
    };
  },
  created() {},
  methods: {
    formatData() {
      let value = true;

      if (this.attendanceClassDetailList.length < 1) {
        this.$message.error("请完整打卡时间填写");
        value = false;
        return;
      } else {
        console.log(this.attendanceClassDetailList.length, "执行了");
        this.attendanceClassDetailList.forEach((item, index) => {
          let valueres = this.judgeStatus(
            this.attendanceClassDetailList,
            index
          );
          if (!valueres) {
            value = false;
            return;
          }
        });
      }

      if (value) {
        this.attendanceClassDetailList.forEach((item) => {
          item.goWorkDateBefore = transFormMinut(item.goWorkDateBefore);
          item.goWorkDateAfter = transFormMinut(item.goWorkDateAfter);
          item.offWorkDateBefore = transFormMinut(item.offWorkDateBefore);
          item.offWorkDateAfter = transFormMinut(item.offWorkDateAfter);
        });
        this.submitForm();
      } else {
        this.$message.error("打卡时间填写有误");
      }
    },
    /** 考勤班次详细信息序号 */
    rowAttendanceClassDetailIndex({ row, rowIndex }) {
      row.index = rowIndex + 1;
    },
    /** 考勤班次详细信息添加按钮操作 */
    handleAddAttendanceClassDetail() {
      let obj = {};
      obj.goWorkDate = "";
      obj.goWorkDateBefore = "";
      obj.goWorkDateAfter = "";
      obj.offWorkDate = "";
      obj.offWorkDateBefore = "";
      obj.offWorkDateAfter = "";
      obj.remark = "";
      this.attendanceClassDetailList.push(obj);
    },
    // 判断添加上下班考勤时间
    judgeStatus(arr, index) {
      console.log(arr, index, "ces");
      let status = true;
      if (arr.length == 0) {
      } else {
        if (arr[index].goWorkDate === "") {
          this.$message.error("请选择上班考勤时间");
          status = false;
          return;
        }
        if (arr[index].goWorkDateBefore === "") {
          this.$message.error("请选择允许上班前签到打卡时间");
          status = false;
          return;
        }
        if (arr[index].goWorkDateAfter === "") {
          this.$message.error("请选择允许上班后签到打卡时间");
          status = false;
          return;
        }

        if (arr[index].offWorkDate === "") {
          this.$message.error("请选择下班考勤时间");
          status = false;
          return;
        }
        if (arr[index].offWorkDateBefore === "") {
          this.$message.error("请选择允许下班前签退打卡时间");
          status = false;
          return;
        }
        if (arr[index].offWorkDateAfter === "") {
          this.$message.error("请选择允许下班后签退打卡时间");
          status = false;
          return;
        }
        //当前比较下班和上班
        let workTime =
          transFormMinut(arr[index].goWorkDate) +
          transFormMinut(arr[index].goWorkDateAfter);

        let offworkTime =
          transFormMinut(arr[index].offWorkDate) -
          transFormMinut(arr[index].offWorkDateBefore);

        if (offworkTime <= workTime) {
          this.$message.error("下班打卡时间不能小于上班打卡时间");
          status = false;
          return;
        }
        if (arr.length > 1 && index > 0) {
          // 上一次比较
          let lastoffTime =
            transFormMinut(arr[index - 1].offWorkDate) +
            transFormMinut(arr[index - 1].offWorkDateAfter);

          let currentwokeTime =
            transFormMinut(arr[index].goWorkDate) -
            transFormMinut(arr[index].goWorkDateBefore);

          if (currentwokeTime <= lastoffTime) {
            this.$message.error(
              `第${index}上班考勤时间需大于第${index - 1}上班考勤时间`
            );
            status = false;
            return;
          }
        }
      }
      return status;
    },
    /** 考勤班次详细信息删除按钮操作 */
    handleDeleteAttendanceClassDetail(index) {
      this.$alert("确定要删除这条设置吗", "删除提醒", {
        confirmButtonText: "确定",
        callback: (action) => {
          this.attendanceClassDetailList.splice(index, 1);
          this.currentIndex--;
        },
      });
    },
    /** 单选框选中数据 */
    handleAttendanceClassDetailSelectionChange(selection) {
      if (selection.length > 1) {
        this.$refs.attendanceClassDetail.clearSelection();
        this.$refs.attendanceClassDetail.toggleRowSelection(selection.pop());
      } else {
        this.checkedAttendanceClassDetail = selection;
      }
    },
    // 渲染前置处理
    beforeRender(data) {
      if (data.entity.attendanceClassDetailList) {
        this.attendanceClassDetailList = data.entity.attendanceClassDetailList;
      }
      return data;
    },
    /** 编辑 */
    edit(row) {
      this.reset();
      this.query = { id: row.id };
      this.urls.currUrl = "attendance/class/edit";
      this.getData();
      this.pageInfo.type = "edit";
      this.title = "修改考勤班次信息";
    },
    /** 新增 */
    add(row) {
      this.reset();
      this.urls.currUrl = "attendance/class/add";
      this.getData();
      this.pageInfo.type = "add";
      this.title = "新增考勤班次信息";
    },
    /** 查看*/
    view(row) {
      this.reset();
      this.query = { id: row.id };
      this.urls.currUrl = "attendance/class/view";
      this.getData();
      this.pageInfo.type = "view";
      this.title = "考勤班次信息详细";
    },
    /**取消按钮 */
    cancel() {
      this.open = false;
    },
    /**获取数据后弹框 */
    afterRender(data) {
      if (this.attendanceClassDetailList.length > 0) {
        this.attendanceClassDetailList.forEach((item) => {
          item.goWorkDateBefore = transFormTime(item.goWorkDateBefore);
          item.goWorkDateAfter = transFormTime(item.goWorkDateAfter);
          item.offWorkDateBefore = transFormTime(item.offWorkDateBefore);
          item.offWorkDateAfter = transFormTime(item.offWorkDateAfter);
        });
        this.currentIndex = this.attendanceClassDetailList.length - 1;
        this.form.classResponsiblePersonId = this.form.classResponsiblePersonId.toString();
        console.log(this.currentIndex, "执行了");
      }
      this.open = true;
    },

    afterSubmit(data) {
      this.open = false;
      this.$emit("ok");
    },

    // 表单重置
    reset() {
      this.form = {
        className: "",
        classResponsiblePersonId: null,
        classResponsiblePersonName: "",
        remark: "",
      };
      this.resetForm("form");
    },
    resetForm(refName) {
      if (this.$refs[refName]) {
        this.$refs[refName].resetFields();
      }
    },
  },
};
</script>
<style scoped lang="less">
.bancifor {
  background-color: #f5f5f5;
  padding: 10px;
  margin-bottom: 15px;
  .title {
    border-bottom: 1px solid rgb(206, 206, 206);
  }
}
</style>
