<template>
  <div class="container" v-if="open">
    <el-card style="min-height:80vh;">
      <div class="head">
        <el-button type="primary" size="mini" @click="backTo"
          >返回上一级</el-button
        >
      </div>
      <tab-pane :activeName="activeName" :thirdList="thirdList"></tab-pane>
      <div style="padding: 0 10px;">
        <div class="mt20">
          <div>考勤组名称</div>
          <el-input
            placeholder="请输入考勤组名称"
            maxlength="20"
            v-model="setParams.groupName"
            style="width:320px"
            class="mt10"
          ></el-input>
        </div>

        <div class="flex flex-align-center mt20">
          <div>考勤人员</div>
          <el-button type="text" class="ml20" @click="drawershow('drawer1')"
            >设置</el-button
          >
        </div>

        <div
          class="flex flex-align-center mt10"
          style="color:#999;font-size:14px"
          v-if="attendArr.length < 1"
        >
          <div>参与考勤人员</div>
          <div class="ml20">未设置</div>
        </div>
        <div
          class="flex flex-align-center mt10"
          style="color:#1890ff;font-size:14px"
          v-else
        >
          <div>参与考勤人员</div>
          <div class="ml20">已设置</div>
        </div>

        <!-- <div class="flex flex-align-center mt10" style="color:#999;font-size:14px">
                <div>无需考勤人员</div>
                <div class="ml20">未设置</div>
            </div> -->

        <div style="height:20px"></div>

        <div class="flex flex-align-center mt20">
          <div>考勤组负责人</div>
          <el-button type="text" class="ml20" @click="drawershow('drawer2')"
            >设置</el-button
          >
        </div>

        <div
          class="flex flex-align-center mt10"
          style="color:#999;font-size:14px"
          v-if="!groupResponsibleEntity.responsibleId"
        >
          <div>主负责人</div>
          <div class="ml20">未设置</div>
        </div>
        <div
          class="flex flex-align-center mt10"
          style="color:#1890ff;font-size:14px"
          v-else
        >
          <div>主负责人</div>
          <div class="ml20">已设置</div>
        </div>
        <!-- <div class="flex flex-align-center mt10" style="color:#999;font-size:14px">
                <div>子负责人</div>
                <div class="ml20">未设置</div>
            </div> -->
        <!-- <div class="flex flex-align-center mt10" style="color:#999;font-size:14px">
                <div>子负责人权限</div>
                <div class="ml20">未设置</div>
            </div> -->

        <div style="height:20px"></div>

        <div class="flex flex-align-center mt20">
          <div>考勤时间</div>
          <el-button type="text" class="ml20" @click="drawershow('drawer3')"
            >设置
          </el-button>
        </div>

        <div
          class="flex flex-align-center mt10"
          v-if="!setParams.type"
          style="color:#999;font-size:14px"
        >
          <div>考勤时间</div>
          <div class="ml20">未设置</div>
        </div>
        <div
          class="flex flex-align-center mt10"
          style="color:#1890ff;font-size:14px"
          v-else
        >
          <div>考勤时间</div>
          <div class="ml20">已设置</div>
        </div>

        <div style="height:20px"></div>

        <div class="flex flex-align-center mt20">
          <div>打卡方式</div>
          <el-button type="text" class="ml20" @click="drawershow('drawer4')"
            >设置</el-button
          >
        </div>

        <div
          class="flex flex-align-center mt10"
          style="color:#999;font-size:14px"
          v-if="setParams.attendanceType == ''"
        >
          <div>打卡方式</div>
          <div class="ml20">未设置</div>
        </div>
        <div
          class="flex flex-align-center mt10"
          style="color:#1890ff;font-size:14px"
          v-else
        >
          <div>打卡方式</div>
          <div class="ml20">已设置</div>
        </div>
        <div class="mt20">
          <el-button type="primary" @click="saveSetform">保存设置</el-button>
          <el-button @click="allReset">全部重置</el-button>
        </div>
      </div>
    </el-card>
    <!-- 设置考勤人员 -->
    <el-drawer
      :title="
        drawer1
          ? '考勤人员'
          : drawer2
          ? '考勤组负责人'
          : drawer3
          ? '考勤时间'
          : drawer4
          ? '打卡方式'
          : ''
      "
      size="50%"
      :beforeClose="closedrawer"
      :visible.sync="drawer"
      direction="rtl"
    >
      <div style="padding:10px 10px 10px 20px">
        <!-- 考勤人员 -->
        <div v-if="drawer1">
          <div>参与考勤人员({{ this.attendArr.length }})</div>
          <el-input
            @focus="selectGroup(true)"
            type="textarea"
            maxlength="200"
            :autosize="{ minRows: 2, maxRows: 100 }"
            v-model="persons"
            style="width:100%;margin-top: 10px;"
            placeholder="请选择"
          >
          </el-input>
        </div>

        <!-- 考勤组 -->
        <div class="mt10" v-if="drawer2">
          <div>考勤组负责人：</div>
          <el-select
            v-model="groupResponsibleEntity.responsibleId"
            style="width: 100%;margin-top: 10px;"
          >
            <el-option
              v-for="($label, $value) in responsiableList"
              :key="$value"
              :label="$label"
              :value="$value"
            ></el-option>
          </el-select>
        </div>
        <!-- <div class="mt10" v-if="drawer2">
                    <div>主负责人：</div>
                    <el-select></el-select>
                </div>
                <div class="mt10" v-if="drawer2">
                    <div>子负责人：</div>
                    <el-select></el-select>
                </div>
                <div class="mt10" v-if="drawer2">
                    <div>子负责人权限：</div>
                    <el-select>
                        <el-option></el-option>
                    </el-select>
                </div> -->

        <!-- 考勤时间 -->
        <div class="mt20" v-if="drawer3">
          <!--  -->
          <div>班制设定</div>
          <el-radio-group v-model="setParams.type" @change="changeRadio">
            <div
              v-for="(item, index) in paibanType"
              :key="index"
              style="margin: 30px 0;"
              class="radio_box"
            >
              <el-radio :label="item.value"
                ><span style="font-size: 16px;font-weight: 600;">
                  {{ item.label }}</span
                ></el-radio
              >
              <div
                class="tips"
                style="font-size: 14px;margin-top: 10px;margin-left: 28px;"
              >
                {{ item.des }}
              </div>
            </div>
          </el-radio-group>
        </div>

        <div class="mt20" v-if="drawer3">
          <!-- 固定班次设置 -->
          <div v-if="setParams.type == 1">
            <div>工作日设置：</div>
            <!-- <div class="mt10">
                            <el-tag type="primary">快捷设置班次</el-tag>
                            <span class="ml20">班次名称：</span>
                            <el-button type="text" @click="changeBanci('1')">更改班次</el-button>
                        </div> -->
            <!-- 固定班次表 -->
            <banci-table
              :setParams="groupFixedworkEntity"
              @changebanci="changeBanci"
            ></banci-table>
          </div>

          <!-- 自用工时设置 -->
          <div v-if="setParams.type == 3">
            <div class="mt20">工作日</div>
            <div class="mt10">
              <el-checkbox
                v-model="attendanceGroupFreeworkEntity.monday"
                :true-label="1"
                :false-label="0"
                >周一</el-checkbox
              >
              <el-checkbox
                v-model="attendanceGroupFreeworkEntity.tuesday"
                :true-label="1"
                :false-label="0"
                >周二</el-checkbox
              >
              <el-checkbox
                v-model="attendanceGroupFreeworkEntity.wednesday"
                :true-label="1"
                :false-label="0"
                >周三</el-checkbox
              >
              <el-checkbox
                v-model="attendanceGroupFreeworkEntity.thursday"
                :true-label="1"
                :false-label="0"
                >周四</el-checkbox
              >
              <el-checkbox
                v-model="attendanceGroupFreeworkEntity.friday"
                :true-label="1"
                :false-label="0"
                >周五</el-checkbox
              >
              <el-checkbox
                v-model="attendanceGroupFreeworkEntity.saturday"
                :true-label="1"
                :false-label="0"
                >周六</el-checkbox
              >
              <el-checkbox
                v-model="attendanceGroupFreeworkEntity.sunday"
                :true-label="1"
                :false-label="0"
                >周日</el-checkbox
              >
            </div>
            <div class="mt20">工作时长</div>
            <div class="mt10">
              <el-input
                style="width:100px"
                v-model="attendanceGroupFreeworkEntity.workTime"
                minlength="5"
              ></el-input>
              <span class="ml20">小时</span>
            </div>
          </div>

          <div v-if="setParams.type != 2">
            <div>自动排休</div>
            <div class="mt10">
              <el-checkbox v-model="holidays" :true-label="1" :false-label="0"
                >法定节假日自动排休</el-checkbox
              >
            </div>

            <div style="margin-top: 30px;">
              <div>特殊日期</div>
            </div>

            <div class="mt10">
              <el-button @click="setMustTimes('must')">
                +新增必须打卡的日期
              </el-button>

              <div
                class="el-tag ml20"
                type="primary"
                size="mini"
                plain
                v-if="mustDakaObj"
              >
                {{
                  mustDakaObj.specialTime ? mustDakaObj.specialTime : "未设置"
                }}
                <i class="el-icon-close" @click="deleteSpecal('must')"></i>
              </div>
            </div>
            <div class="mt10">
              <el-button @click="setMustTimes('noneed')">
                +新增无需打卡的日期
              </el-button>
              <div
                class="el-tag ml20"
                type="primary"
                size="mini"
                plain
                v-if="noneedDakaObj && noneedDakaObj.specialTime"
              >
                {{ noneedDakaObj.specialTime }}
                <i class="el-icon-close" @click="deleteSpecal('must')"></i>
              </div>
              <div
                class="el-tag ml20"
                v-else-if="noneedDakaObj && noneedDakaObj.specialStartTime"
              >
                {{ noneedDakaObj.specialStartTime }} 至
                {{ noneedDakaObj.specialEndTime }}
                <i class="el-icon-close" @click="deleteSpecal('noneed')"></i>
              </div>
            </div>
          </div>
        </div>
        <div class="mt20" v-if="drawer4">
          <div>考勤方式</div>
          <el-radio-group v-model="setParams.attendanceType">
            <div
              v-for="(item, index) in attendanceType"
              :key="index"
              style="margin: 30px 0;"
            >
              <el-radio :label="item.value"
                ><span style="font-size: 16px;font-weight: 600;">
                  {{ item.label }}</span
                ></el-radio
              >
            </div>
          </el-radio-group>
        </div>
        <div class="button_box" style="width: 100%;margin: 20px 0">
          <el-button type="primary" @click="() => (drawer = false)"
            >保存</el-button
          >
          <el-button style="margin-left: 20px;" @click="() => (drawer = false)"
            >取消</el-button
          >
        </div>
      </div>
    </el-drawer>

    <!-- 选择成员 -->
    <el-dialog
      :visible.sync="isshowgroup"
      title="选择人员"
      width="80%"
      :show-close="false"
    >
      <div>
        <el-row type="flex">
          <!-- 左1 -->
          <el-col :span="16">
            <el-row type="flex">
              <el-col :span="12">
                <div class="titles">选择部门</div>
                <el-scrollbar style="height: 50vh">
                  <el-tree
                    size="mini"
                    ref="siteTree"
                    :data="areaData"
                    id="el-tree"
                    node-key="id"
                    :load="loadNode"
                    highlight-current
                    :expand-on-click-node="false"
                    @node-click="handleNodeClickBumen"
                  >
                  </el-tree>
                </el-scrollbar>
              </el-col>

              <el-col :span="12">
                <div class="titles">人员列表</div>
                <el-scrollbar style="height: 50vh">
                  <div v-if="currentSelect.length > 0">
                    <el-checkbox
                      label="0"
                      v-model="CurrentAllchecked"
                      @change="currentChangeAll"
                      >全部</el-checkbox
                    >
                  </div>

                  <el-checkbox-group
                    v-model="allSelectId"
                    v-if="currentSelect.length > 0"
                  >
                    <el-checkbox
                      :label="item.staffId"
                      @change="changegroupId"
                      v-for="(item, index) in currentSelect"
                      :key="index"
                    >
                      {{ item.staffName }}</el-checkbox
                    >
                  </el-checkbox-group>

                  <div v-else class="tips mt10">
                    该部门没有可选择员工，请选择其他部门
                  </div>
                </el-scrollbar>
              </el-col>
            </el-row>
          </el-col>
          <!-- 右1 -->
          <el-col :span="8">
            <div style="border-left:1px dotted #eee;padding-left:20px">
              <div class="titles">已选择</div>
              <el-scrollbar style="height: 50vh">
                <div
                  class="el-tag ml10 mt10"
                  :key="index"
                  v-for="(item, index) in allSelect"
                >
                  <span class="tags">{{ item.staffName }}</span>
                  <i class="el-icon-close" @click="deleteOne(index)"></i>
                </div>
              </el-scrollbar>
            </div>
          </el-col>
        </el-row>
      </div>
      <div class="mt20">
        <el-button type="primary" size="mini" @click="saveBtnchoice"
          >确定</el-button
        >
        <el-button size="mini" @click="cancelChoice">取消</el-button>
      </div>
    </el-dialog>

    <!-- 选择班次 -->
    <el-dialog :visible.sync="isshowBanci" title="选择班次" :show-close="false">
      选择班次
      <banci-select
        :classArr="classArr"
        :currentArr="currentselectBanciRow"
        v-if="isshowBanci"
        @saveRowBanci="saveRowBanci"
        @cancelBanci="cancelBanci"
      ></banci-select>
    </el-dialog>

    <!-- 新增必须打卡时间 -->
    <el-dialog
      :visible.sync="mustDaka"
      title="新增必须打卡日期"
      :show-close="false"
    >
      <div>
        <span>选择日期</span>
        <el-date-picker
          type="date"
          placeholder="年/月/日"
          class="ml10"
          value-format="yyyy-MM-dd"
          v-model="currentParams.specialTime"
        ></el-date-picker>
      </div>
      <div>
        <!-- 选择日期 -->
        <banci-select
          :classArr="classArr"
          :currentArr="currentselectBanciRow"
          :isshow="mustDaka"
          @saveRowBanci="saveCurrentSpecial"
          @cancelBanci="cancelSpecial"
        ></banci-select>
      </div>
    </el-dialog>

    <!-- 新增无需打卡时间 -->
    <el-dialog
      :visible.sync="noneedDaka"
      title="新增无需打卡日期"
      :show-close="false"
    >
      <div>
        <span>选择添加方式</span>
        <el-radio-group
          class="ml20"
          v-model="currentParams.addWay"
          @change="currentParams.specialTime = ''"
        >
          <el-radio :label="0">单个日期</el-radio>
          <el-radio :label="1">时间段</el-radio>
        </el-radio-group>
      </div>
      <div>
        <div v-if="currentParams.addWay === 0" class="mt20">
          <span>选择日期</span>
          <!-- 单个日期 -->
          <el-date-picker
            type="date"
            class="ml20"
            value-format="yyyy-MM-dd"
            v-model="currentParams.specialTime"
          ></el-date-picker>
        </div>
        <div v-else-if="currentParams.addWay === 1" class="mt20">
          <!-- 日期段 -->
          <el-date-picker
            v-model="noneedRange"
            @change="changeneedRange"
            type="daterange"
            value-format="yyyy-MM-dd"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          >
          </el-date-picker>
        </div>
      </div>
      <div class="mt20">
        <el-button type="primary" size="mini" @click="saveNoneed"
          >确定</el-button
        >
        <el-button size="mini" @click="cancelSpecial">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import tabPane from "@/components/tabPane.vue";
import banciTable from "./banciTable/index";
import banciSelect from "./banciSelect/index.vue";
import form from "@/assets/mixins/formdialog";
export default {
  mixins: [form],
  components: {
    tabPane,
    banciTable,
    banciSelect,
  },
  created() {
    this.changePath("attendance/group");
  },
  methods: {
    // 返回
    backTo() {
      this.open = false;
      this.$emit("ok", true);
    },
    // 渲染前置处理
    beforeRender(data) {
      if (data.entity.attendanceGroupStaffList) {
        this.attendanceGroupStaffList = data.entity.attendanceGroupStaffList;
      }
      return data;
    },
    /** 编辑 */
    edit(row) {
      this.allReset();
      this.query = { id: row.id };
      this.urls.currUrl = "attendance/group/edit";
      this.getData();
      this.pageInfo.type = "edit";
      this.open = true;
    },
    /** 新增 */
    add(row) {
      this.allReset();
      this.urls.currUrl = "attendance/group/add";
      this.getData();
      this.pageInfo.type = "add";
      this.open = true;
    },
    /** 查看*/
    view(row) {
      this.allReset();
      this.query = { id: row.id };
      this.urls.currUrl = "attendance/group/view";
      this.getData();
      this.pageInfo.type = "view";
    },
    /**获取数据后弹框 */
    afterRender(data) {
      console.log(this.form, "返回数据");
      this.dealDic();

      let {
        attendanceGroupStaffList,
        groupName,
        type,
        attendanceType,
        groupFixedworkEntity,
        groupResponsibleEntity,
        attendanceGroupFreeworkEntity,
        id,
      } = this.form;

      if (id) {
        this.setParams.id = id;
      }
      if (attendanceGroupStaffList) {
        this.attendanceGroupStaffList = attendanceGroupStaffList; //参与考勤的人
      }
      //固定班制
      if (groupFixedworkEntity) {
        this.groupFixedworkEntity = groupFixedworkEntity;
        let week = [
          "monday",
          "tuesday",
          "wednesday",
          "thursday",
          "friday",
          "saturday",
          "sunday",
        ];
        for (let value of week) {
          if (this.groupFixedworkEntity[value]) {
            this.classArr.map((item) => {
              if (item.id === this.groupFixedworkEntity[value + "ClassId"]) {
                this.groupFixedworkEntity[value + "ClassTime"] = item;
              }
            });
          } else {
            this.groupFixedworkEntity[value + "ClassTime"] = [];
          }
        }
        this.cancelBanci();
        this.holidays = groupFixedworkEntity.holidays;
      }

      // 特殊日期
      if (
        groupFixedworkEntity &&
        groupFixedworkEntity.attendanceGroupFixedworkSpecialList
      ) {
        // 固定班制
        this.noneedDakaObj = groupFixedworkEntity.attendanceGroupFixedworkSpecialList.find(
          (item) => item.must === 0
        );
        this.mustDakaObj = groupFixedworkEntity.attendanceGroupFixedworkSpecialList.find(
          (item) => item.must === 1
        );
      }

      // 自由工时
      if (attendanceGroupFreeworkEntity) {
        this.attendanceGroupFreeworkEntity = attendanceGroupFreeworkEntity;
        this.holidays = attendanceGroupFreeworkEntity.holidays;
      }
      if (
        attendanceGroupFreeworkEntity &&
        attendanceGroupFreeworkEntity.attendanceGroupFreeworkSpecialList
      ) {
        this.noneedDakaObj = attendanceGroupFreeworkEntity.attendanceGroupFreeworkSpecialList.find(
          (item) => item.must === 0
        );
        this.mustDakaObj = attendanceGroupFreeworkEntity.attendanceGroupFreeworkSpecialList.find(
          (item) => item.must === 1
        );
      }

      //负责人
      if (groupResponsibleEntity) {
        this.groupResponsibleEntity = groupResponsibleEntity;
        this.groupResponsibleEntity.responsibleId = this.groupResponsibleEntity.responsibleId.toString();
      }

      // 处理考勤人回显
      this.attendArrId = this.attendanceGroupStaffList.map(
        (item) => item.staffId
      );
      this.attendArr = this.attendanceGroupStaffList;
      this.setParams.groupName = groupName; //考勤组名称
      this.setParams.type = type; //考勤类型
      this.setParams.attendanceType = attendanceType; //打卡类型
    },
    afterSubmit(data) {
      this.open = false;
      this.allReset();
      this.$emit("ok", true);
    },
    // 处理字典
    dealDic() {
      this.attendanceType = [];
      this.classArr = this.dict.classId;
      this.responsiableList = this.dict.workMan;
      this.areaData = this.dict.deptId;
      for (let key in this.dict.attendanceType) {
        let obj = {
          label: this.dict.attendanceType[key],
          value: key,
        };
        this.attendanceType.push(obj);
      }
      // 类型
      let typearr = [];
      for (let key in this.dict.type) {
        let obj = {
          label: this.dict.type[key],
          value: Number(key),
        };
        typearr.push(obj);
      }

      typearr.forEach((item, index) => {
        let res = this.paibanType.filter(
          (item1) => item1.label.indexOf(item.label) != -1
        );
        if (res.length > 0) {
          res[0].value = typearr[index].value;
        }
      });
    },
    // ---- 班次选择 -------
    // 当前班次选择
    saveRowBanci(val) {
      this.groupFixedworkEntity[this.currentWorkName + "ClassId"] = val.id; //存储班次id
      this.groupFixedworkEntity[this.currentWorkName + "ClassName"] =
        val.className; //存储班次名称

      // this.groupFixedworkEntity[this.currentWorkName+'ClassTime'] = val
      this.$set(
        this.groupFixedworkEntity,
        this.currentWorkName + "ClassTime",
        val
      );
      console.log(
        this.groupFixedworkEntity[this.currentWorkName + "ClassTime"],
        "当前更改"
      );
      this.cancelBanci();
    },
    // 固定班制 ---- 触发班次选择
    changeBanci(row) {
      this.currentWorkName = row;
      this.currentselectBanciRow = JSON.parse(
        JSON.stringify(
          this.groupFixedworkEntity[this.currentWorkName + "ClassTime"]
        )
      );
      this.isshowBanci = true;
    },
    // 置空
    cancelBanci() {
      this.isshowBanci = false;
      this.currentselectBanciRow = null;
    },
    // ----end ----

    // ----- 特殊日期选择 ----
    // 删除必须
    deleteSpecal(from) {
      if (from == "must") {
        this.mustDakaObj = null;
      } else {
        this.noneedDakaObj = null;
      }
    },
    // 新增必须打卡 --- 触发班次
    setMustTimes(from) {
      if (from == "must" && !this.mustDakaObj) {
        this.mustDakaObj = {
          must: 1, //必需打卡
          specialStartTime: "", //时间段
          specialEndTime: "", //
          specialTime: "", //必须打卡日期
          addWay: 0, //日期还是时间段
          classId: "",
          classArr: {},
        };
      } else if (from == "noneed" && !this.noneedDakaObj) {
        this.noneedDakaObj = {
          must: 0, //无需打卡
          specialStartTime: "", //时间段
          specialEndTime: "", //
          specialTime: "", //必须打卡日期
          addWay: 0, //日期还是时间段
          classId: "",
          classArr: {},
        };
      }
      if (from == "must") {
        this.mustDaka = true;
        this.currentParams = this.mustDakaObj;
        this.currentselectBanciRow = this.currentParams.classArr;
      } else {
        this.currentParams = this.noneedDakaObj;
        if (this.currentParams.specialStartTime) {
          this.noneedRange = [
            this.currentParams.specialStartTime,
            this.currentParams.specialEndTime,
          ];
        } else {
          this.noneedRange = [];
        }
        this.noneedDaka = true;
      }
    },
    // 保存必须打卡
    saveCurrentSpecial(val) {
      this.currentParams.classArr = val;
      this.currentParams.classId = val.id;

      if (!this.currentParams.specialTime) {
        this.$message.error("请选择日期");
        return;
      }
      if (!this.currentParams.classId) {
        this.$message.error("请选择班次");
        return;
      }
      if (this.noneedDakaObj) {
        if (this.noneedDakaObj.specialTime === this.currentParams.specialTime) {
          this.$message.error("该日期已设置为无需打卡日，请重新选择");
          return;
        }
        let timeStart = Date.parse(this.noneedDakaObj.specialStartTime); //无需开始时间戳
        let timeEnd = Date.parse(this.noneedDakaObj.specialEndTime); //无需结束时间戳
        let mustTime = Date.parse(this.currentParams.specialTime); //必须时间戳

        if (mustTime >= timeStart && mustTime <= timeEnd) {
          this.$message.error(
            "必须打卡日期不能设置在无需打卡时间段内,请重新选择"
          );
          return false;
        }
      }
      this.mustDakaObj = JSON.parse(JSON.stringify(this.currentParams));
      this.cancelSpecial();
    },
    // 取消当前特殊日期设置
    cancelSpecial() {
      this.currentParams = {};
      this.noneedRange = [];
      this.mustDaka = false;
      this.noneedDaka = false;
      this.currentselectBanciRow = null;
    },
    // 无需时间段
    changeneedRange() {
      if (this.noneedRange) {
        this.currentParams.specialStartTime = this.noneedRange[0];
        this.currentParams.specialEndTime = this.noneedRange[1];
      } else {
        this.currentParams.specialStartTime = "";
        this.currentParams.specialEndTime = "";
      }
    },
    // 保存 无需打卡
    saveNoneed() {
      if (
        this.currentParams.addWay === 0 &&
        this.currentParams.specialTime == ""
      ) {
        this.$message.error("请选择日期");
        return;
      }
      if (
        this.currentParams.addWay === 1 &&
        this.currentParams.specialStartTime == ""
      ) {
        this.$message.error("请选择时间段");
        return;
      }

      if (this.mustDakaObj) {
        if (
          this.mustDakaObj.specialTime === this.currentParams.specialTime &&
          this.mustDakaObj.specialTime != ""
        ) {
          this.$message.error("该日期已设置为必须打卡日，请重新选择");
          return;
        }
        let timeStart = Date.parse(this.currentParams.specialStartTime); //无需开始时间戳
        let timeEnd = Date.parse(this.currentParams.specialEndTime); //无需结束时间戳
        let mustTime = Date.parse(this.mustDakaObj.specialTime); //必须时间戳
        if (mustTime >= timeStart && mustTime <= timeEnd) {
          this.$message.error(
            "无需打卡时间段内不能含有[必须打卡日期],请重新选择"
          );
          return false;
        }
      }
      this.noneedDakaObj = JSON.parse(JSON.stringify(this.currentParams));
      this.cancelSpecial();
    },

    // ---- end -------

    // ---- 部门-人员选择 ------

    // 触发部门选择
    selectGroup(from) {
      this.selectTyep = from;
      if (this.selectTyep) {
        this.allSelect = this.attendArr;
        this.allSelectId = this.attendArrId;
      } else {
        this.allSelect = this.noattendArr;
        this.allSelectId = this.attendArrId;
      }
      this.isshowgroup = true;
    },
    // 取消选择
    cancelChoice() {
      this.isshowgroup = false;
      this.currentSelect = [];
      this.allSelect = [];
      this.allSelectId = [];
      this.CurrentAllchecked = false;
    },
    // 确定当前选择
    saveBtnchoice() {
      this.CurrentAllchecked = false;
      if (this.selectTyep) {
        this.attendArr = this.allSelect;
        this.attendArrId = this.allSelectId;
        // 参与考勤
      } else {
        // 不参与考勤
        this.noattendArr = this.allSelect;
        this.attendArrId = this.allSelectId;
      }
      this.cancelChoice();
    },
    // 单独选择
    changegroupId(val) {
      let value;
      if (val) {
        // id
        value = this.allSelectId.filter(
          (item1) => !this.allSelect.some((item2) => item2.staffId === item1)
        );
        let obj = this.currentSelect.find((item) => item.staffId === value[0]);
        this.allSelect.push(obj);
      } else {
        // 对象
        value = this.allSelect.filter(
          (item1) => !this.allSelectId.some((item2) => item2 === item1.staffId)
        );
        let index = this.allSelect.findIndex(
          (item) => item.staffId == value[0].staffId
        );
        this.allSelect.splice(index, 1);
      }
      this.CurrentAllchecked = this.currentSelect.every((val) =>
        this.allSelectId.includes(val.staffId)
      );
      console.log(value, "当前选择值");
    },
    // 点击触发
    handleNodeClickBumen(val) {
      if (this.selectTyep) {
      } else {
      }
      this.currentSelect = val.personList; //人员信息
      // 判断当前是不是全选
      this.CurrentAllchecked = this.currentSelect.every((val) =>
        this.allSelectId.includes(val.staffId)
      );
    },
    // 全选操作
    currentChangeAll() {
      if (this.CurrentAllchecked) {
        // 当前全选
        let arr1 = this.currentSelect.filter(
          (item) => !this.allSelect.some((item2) => item2 === item)
        );

        this.allSelect = [...this.allSelect, ...arr1]; //渲染列表

        let arr2 = this.currentSelect.filter(
          (item1) => !this.allSelectId.some((item2) => item2 === item1.staffId)
        );

        this.allSelectId = [
          ...this.allSelectId,
          ...arr2.map((item) => item.staffId),
        ]; //id信息
      } else {
        //取消当前全选

        this.allSelect = this.allSelect.filter(
          (item1) => !this.currentSelect.some((item2) => item2 === item1)
        );

        this.allSelectId = this.allSelectId.filter(
          (item1) =>
            !this.currentSelect.some((item2) => item2.staffId === item1)
        );
      }
    },
    // 删除某个选择
    deleteOne(index) {
      this.allSelect.splice(index, 1);
      this.allSelectId.splice(index, 1);
      this.CurrentAllchecked = this.currentSelect.every((val) =>
        this.allSelectId.includes(val.staffId)
      ); //判断全选
    },
    // ---- end -------

    // 考勤方式发生改变 -置空其他类别选项
    changeRadio() {
      // 自由工时置空
      for (let key in this.attendanceGroupFreeworkEntity) {
        this.attendanceGroupFreeworkEntity[key] = 0;
      }
      this.attendanceGroupFreeworkEntity.workTime = "";
      this.attendanceGroupFreeworkEntity.attendanceGroupFreeworkSpecialList = [];

      // 固定班制置空
      for (let key in this.groupFixedworkEntity) {
        this.groupFixedworkEntity[key] = "";
      }
      for (let item of this.typeList) {
        this.groupFixedworkEntity[item.value] = 0;
        this.groupFixedworkEntity[item.value + "ClassTime"] = [];
        this.groupFixedworkEntity[item.value + "ClassName"] = "";
        this.groupFixedworkEntity[item.value + "ClassId"] = "";
      }
      this.attendanceGroupFixedworkSpecialList = [];
    },
    // 触发对应流程设置
    drawershow(from) {
      switch (from) {
        case "drawer1":
          this.drawer = true;
          this.drawer1 = true;
          break;
        case "drawer2":
          this.drawer = true;
          this.drawer2 = true;
          break;
        case "drawer3":
          this.drawer = true;
          this.drawer3 = true;
          break;
        case "drawer4":
          this.drawer = true;
          this.drawer4 = true;
          break;
        default:
          break;
      }
    },
    // 关闭流程设置
    closedrawer() {
      this.drawer = false;
      this.drawer1 = false;
      this.drawer2 = false;
      this.drawer3 = false;
      this.drawer4 = false;
    },
    // 全部置空
    allReset() {
      // 置空无关项
      this.changeRadio();
      console.log(this.setParams);

      // 先大概处理
      for (let key in this.setParams) {
        this.setParams[key] = "";
      }
      for (let key in this.groupResponsibleEntity) {
        this.groupResponsibleEntity[key] = "";
      }
      this.setParams.attendanceGroupStaffList = [];
      this.attendArr = [];
      this.attendArrId = [];
      this.allSelectId = [];
      this.allSelect = [];
      this.currentSelect = [];
      this.cancelBanci();
    },
    // 提交保存
    saveSetform() {
      // 校验 考勤组名称、参与考勤人员、考勤组负责人、
      // 考勤时间 固定班制 -- 校验 排班是否设置 排班id 日期是否参与考勤
      // 自由时间 -- 是否参与考勤 工作时长
      // 排班制 -- 不确定

      //  ---- 基础判断 ---
      if (this.setParams.groupName === "") {
        this.$message.error("请输入考勤组名称");
        return;
      }
      if (this.attendArr.length < 1) {
        this.$message.error("请设置参与考勤人员");
        return;
      }
      if (this.groupResponsibleEntity.responsibleId == "") {
        this.$message.error("请设置考勤负责人");
        return;
      }
      if (this.setParams.type === "") {
        this.$message.error("请设置考勤方式");
        return;
      }

      if (this.setParams.attendanceType === "") {
        this.$message.error("请设置打卡方式");
        return false;
      }
      // -----end ---

      // 处理特殊日期
      if (this.mustDakaObj) {
        this.attendanceGroupFixedworkSpecialList.push(this.mustDakaObj);
      }
      if (this.noneedDakaObj) {
        this.attendanceGroupFixedworkSpecialList.push(this.noneedDakaObj);
      }
      //  ---- 根据类型判断 ---

      // 固定班制校验
      if (this.setParams.type == 1) {
        for (let item of this.typeList) {
          if (
            this.groupFixedworkEntity[item.value] &&
            !this.groupFixedworkEntity[item.value + "ClassId"]
          ) {
            this.$message.error(`${item.name} 考勤班次未设置`);
            return false;
          }
        }
      }
      // 自由工时校验
      if (this.setParams.type == 3) {
        if (this.attendanceGroupFreeworkEntity.workTime == "") {
          this.$message.error("请设置工作时长");
          return false;
        }
      }
      // ---- end  ----

      // ---- 处理数据 ----
      if (this.attendArr.length > 0) {
        this.setParams.attendanceGroupStaffList = this.attendArr.map((item) => {
          return {
            staffId: item.staffId,
            staffName: item.staffName,
          };
        });
      }
      if (this.groupResponsibleEntity.responsibleId) {
        // 给负责人进行赋值
        this.groupResponsibleEntity.responsibleName = this.responsiableList[
          this.groupResponsibleEntity.responsibleId
        ];
      }

      // 固定工时
      if (this.setParams.type == 1) {
        if (
          this.attendanceGroupFixedworkSpecialList &&
          this.attendanceGroupFixedworkSpecialList.length > 0
        ) {
          this.groupFixedworkEntity.attendanceGroupFixedworkSpecialList = this.attendanceGroupFixedworkSpecialList; //特殊日期设置
        }
        this.setParams.groupFixedworkEntity = this.groupFixedworkEntity;

        if (this.setParams.hasOwnProperty("attendanceGroupFreeworkEntity")) {
          delete this.setParams.attendanceGroupFreeworkEntity;
        }
      }
      // 自由工时
      if (this.setParams.type == 3) {
        if (
          this.attendanceGroupFixedworkSpecialList &&
          this.attendanceGroupFixedworkSpecialList.length > 0
        ) {
          this.attendanceGroupFreeworkEntity.attendanceGroupFreeworkSpecialList = this.attendanceGroupFixedworkSpecialList; //特殊日期
        }
        this.setParams.attendanceGroupFreeworkEntity = this.attendanceGroupFreeworkEntity;

        if (this.setParams.hasOwnProperty("groupFixedworkEntity")) {
          delete this.setParams.groupFixedworkEntity;
        }
      }
      // 考勤负责人
      this.setParams.groupResponsibleEntity = this.groupResponsibleEntity;
      // ----- end ----

      this.$post(
        this.urls.saveUrl || this.pageInfo.saveUrl,
        this.setParams
      ).then((res) => {
        if (res.code == 1) {
          this.afterSubmit();
        }
      });
    },
  },
  computed: {
    persons() {
      let arrName = this.attendArr.map((item) => item.staffName);
      return arrName.join(",");
    },
  },
  data() {
    return {
      open: false,
      activeName: "/attendance/group/view",
      thirdList: [
        {
          name: "新增考勤组",
          path: "/attendance/group/view",
        },
      ],
      paibanType: [
        {
          label: "固定班制（固定时间上下班）",
          value: 1,
          des:
            "考勤组中所有人按照相同的时间打卡，适用于办公室坐班，例如朝九晚五",
        },
        {
          label: "排班制（按排班上下班）",
          value: 2,
          des: "自定义设置每人的班次，适用于工厂、门店等，例如三班倒",
        },
        {
          label: "自由工时（不固定时间上下班）",
          value: 3,
          des: "上下班时间不固定，可随时打卡，适用于销售以及装修、家政等计时工",
        },
      ],
      typeList: [
        {
          name: "周一",
          value: "monday",
        },
        {
          name: "周二",
          value: "tuesday",
        },
        {
          name: "周三",
          value: "wednesday",
        },
        {
          name: "周四",
          value: "thursday",
        },
        {
          name: "周五",
          value: "friday",
        },
        {
          name: "周六",
          value: "saturday",
        },
        {
          name: "周日",
          value: "sunday",
        },
      ],
      classArr: [], //公共字典 - 班次选择
      attendanceType: [], //打卡类型 - 公共字典
      areaData: [], //部门信息 - 公共字典
      responsiableList: [], //负责人选择 -公共字典

      // 当前选择员工
      currentSelect: [],
      // 员工总表
      allSelect: [], //选择的列表
      allSelectId: [], //选择的id
      CurrentAllchecked: false,
      // 存储当前参与考勤人员
      attendArr: [],
      attendArrId: [],
      // 存储当前不参与考勤人员
      noattendArr: [],
      noattendArrIc: [],

      selectTyep: "", //选择人员类型 true参与考勤人员//false不参与考勤人员
      drawer1: false,
      drawer2: false,
      drawer3: false,
      drawer4: false,
      drawer: false,
      isshowBanci: false, //班次展示
      isshowgroup: false, //人员选择
      mustDaka: false, //必须打卡设置
      noneedDaka: false, //无需打卡

      setParams: {
        groupName: "", //考勤名称
        attendanceGroupStaffList: [], //参与考勤人员
        type: "", //考勤方式
        attendanceType: "", //打卡类型
      },
      // 考勤赋值
      groupResponsibleEntity: {
        responsibleId: "", //考勤负责人
        responsibleName: "", //考勤负责人姓名
      },

      type: [],
      currentselectBanciRow: "", //当前班次
      // 当前工作日名称
      currentWorkName: "",
      noneedRange: [], //时间段选择
      // 当前特殊日期
      currentParams: {},
      // 自由工时配置
      attendanceGroupFreeworkEntity: {
        monday: 0,
        tuesday: 0,
        wednesday: 0,
        thursday: 0,
        friday: 0,
        saturday: 0,
        sunday: 0,
        workTime: "",
        // attendanceGroupFreeworkSpecialList:[]
      },
      //固定班制
      groupFixedworkEntity: {
        monday: 0, //是否考勤(0.否,1,是)
        mondayClassId: "",
        mondayClassName: "",
        mondayClassTime: [], //便于选择-传参删除

        tuesday: 0, //是否考勤(0.否,1,是)
        tuesdayClassId: "",
        tuesdayClassName: "",
        tuesdayClassTime: [], //便于选择-传参删除

        wednesday: 0, //是否考勤(0.否,1,是)
        wednesdayClassId: "",
        wednesdayClassName: "",
        wednesdayClassTime: [], //便于选择-传参删除

        thursday: 0, //是否考勤(0.否,1,是)
        thursdayClassId: "",
        thursdayClassName: "",
        thursdayClassTime: [],

        friday: 0, //是否考勤(0.否,1,是)
        fridayClassId: "",
        fridayClassName: "",
        fridayClassTime: "", //便于选择-传参删除

        saturday: 0, //是否考勤(0.否,1,是)
        saturdayClassId: "",
        saturdayClassName: "",
        saturdayClassTime: [], //便于选择-传参删除

        sunday: 0, //是否考勤(0.否,1,是)
        sundayClassId: "",
        sundayClassName: "",
        sundayClassTime: [], //便于选择-传参删除
        holidays: "",
        // attendanceGroupFixedworkSpecialList:[],
      },

      holidays: 0, // 假期排休 法定节假日自动排休(0.否,1.是)

      // 公共 - 特殊日期设置
      attendanceGroupFixedworkSpecialList: [],
      // 必须打卡日期
      mustDakaObj: {
        must: 1, //必需打卡
        specialStartTime: "", //时间段
        specialEndTime: "", //
        specialTime: "", //必须打卡日期
        addWay: 0, //日期还是时间段
        classId: "",
        classArr: {},
      },
      // 无需打卡日期
      noneedDakaObj: {
        must: 0, //无需打卡
        specialStartTime: "", //时间段
        specialEndTime: "", //
        specialTime: "", //必须打卡日期
        addWay: 0, //日期还是时间段
        classId: "",
        classArr: {},
      },
    };
  },
};
</script>
<style lang="less" scoped>
.container {
  font-size: 16px;
}
.labelClass {
  width: 200px;
}
.el-descriptions__body {
  margin-left: 5px;
  margin-right: 5px;
  color: #606266;
  background-color: transparent;
}

/deep/.el-card.is-always-shadow {
  box-shadow: unset;
  -webkit-box-shadow: unset;
}
/deep/.el-card {
  border: unset;
}
/deep/.el-card__body {
  padding: 0;
}
.contentClass {
  width: 600px;
}
.titles {
  color: #409eff;
  font-size: 16px;
  display: flex;
  align-items: center;
}
.titles::before {
  content: "";
  width: 6px;
  height: 16px;
  background-color: #409eff;
  display: inline-block;
  margin-right: 10px;
}
.tips {
  color: #999;
  font-size: 12px;
}
.head {
  position: absolute;
  right: 10px;
  z-index: 99;
  top: 6px;
}
/deep/.el-textarea__inner {
  height: 500px !important;
  font-size: 14px;
}
</style>
