sagacloud-sagacare-ipad/src/views/envmonitor/components/workOvertime/index.vue

<template>
  <div class="work-content">
    <div class="work-space">
      <div class="space-title">{{ spaceInfo.spaceName }} 申请延时</div>
      <div class="device-tip">延时期间,空间相关设备会开启</div>
    </div>
    <div class="add-time" id="addTimeId">
      <div class="date_box" v-if="dateArr && dateArr.length">
        <div
          class="date-item"
          :class="item.isActive ? 'date-item-active' : ''"
          @click.stop="checkDate(item, index)"
          :key="'date' + index"
          v-for="(item, index) in dateArr"
        >
          <span>{{ item.week }}</span>
          <span>{{ item.day }}</span>
        </div>
      </div>
      <div class="sliders-list" id="sliderListId">
        <template v-for="(item, index) in nowTimerArr" :key="'slider' + index">
          <div class="sliders-wrapper" id="slidersWrapperId">
            <div class="sliders">
              <div class="label" v-show="index === 0 || index % 2 === 0">
                {{ item.timer }}
              </div>
              <div
                class="slider-box"
                @click="checkSlider(item, index)"
                :data-index="index"
              ></div>
            </div>
          </div>
        </template>

        <div class="slider-btn" id="sliderBtnId" @click="triggerDelTime">
          <div class="start" id="startId"></div>
          <div class="end-box" id="endBoxId">
            <div class="end" id="endId"></div>
            <div class="end-radio" id="endRadioId"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="add-time-btn">
      <div class="cancel-btn" @click="closeWorkTimer">取消</div>
      <div
        class="comfirm-btn"
        :class="formBtn ? 'comfirm-btn-diabled' : ''"
        @click="addWorkTimer"
      >
        提交申请
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { Dialog, Slider } from "vant";
import {
  defineComponent,
  reactive,
  toRefs,
  ref,
  onBeforeMount,
  onMounted,
  onUpdated,
  nextTick,
  watch,
  getCurrentInstance,
} from "vue";
import { swiper } from "@/utils/swiper";
import {
  formatDate,
  formatDateStr,
  getDate,
  getNowTime,
  getRelNowTime,
  getTimers,
  getUserInfo,
  getWeekDate,
  parseImgUrl,
} from "@/utils";
import { myTime } from "@/model/workTimeData";
import { propsToAttrMap } from "@vue/shared";
import { isTemplateElement } from "@babel/types";
import { saveBatchCustomScene } from "@/apis/envmonitor";

export default defineComponent({
  components: {
    VanSlider: Slider,
  },
  props: {
    workkArr: {
      type: Array,
      default: () => [],
    },
    projectId: {
      type: String,
      default: () => "",
    },
    spaceInfo: {
      type: Object,
      default: () => {},
    },
  },
  setup(props, context) {
    const proxyGlobal: any = getCurrentInstance();
    const screenInfo: any = {
      screenWidth: 0,
      screenHeight: 0,
    };
    let dateArr: any = [];
    let myTimeArr: any = [];
    let timerArr: any = getTimers();
    let nowTimerArr: any = [];
    let nowData: any = {};
    let redUrl: any = `${parseImgUrl("ipdImages", "time-check.svg")}`;
    let bgRed: any = `linear-gradient(0deg, rgba(255, 0, 0, 0.2), rgba(255, 0, 0, 0.2)), url(${redUrl})`;
    const userInfo: any = getUserInfo();
    const proxyData = reactive({
      userInfo: userInfo,
      screenInfo: screenInfo,
      projectId: props.projectId,
      workkArr: props.workkArr,
      bgRed: bgRed,
      startIndex: 0,
      endIndex: 0,
      nowData: nowData,
      nowTimerArr: nowTimerArr,
      timerArr: timerArr,
      startLen: 0,
      formBtn: false,
      setScreennWidth() {
        let addTimeEl: any = document.querySelector("#addTimeId");
        proxyData.screenInfo.screenWidth = addTimeEl.offsetWidth;
      },
      // 获取当前位置
      getNowIndex() {
        // let nowIndex: any = 0;
        // if (proxyData.nowData.week === "今天") {
        //   nowIndex = getNowTime()[1];
        // }
        let nowIndex: any = getNowTime()[1];
        return nowIndex;
      },
      // 获取每天真实的下标
      getTomorrowIndex() {
        let nowIndex: any = 0;
        if (proxyData.nowData.week === "今天") {
          nowIndex = getNowTime()[1];
        }
        return nowIndex;
      },
      // 获取当前位置的坐标
      getNowPerstion(timerArr: any) {
        let nowIndex: any = proxyData.getNowIndex();
        let obj: any = {
          nowIndex: nowIndex,
          len: 4,
        };
        let formatTimer: any = timerArr[nowIndex].formatTimer;
        let cusStartTime: any = proxyData.parseCusStartTime(
          proxyData.nowData.cusStartTime
        );
        let cusEndTime: any = proxyData.parseCusEndTime(
          proxyData.nowData.cusEndTime
        );
        if (formatTimer >= cusStartTime && formatTimer <= cusEndTime) {
          //在服务定制时间之间
          timerArr.map((item: any, index: any) => {
            if (item.formatTimer === cusEndTime) {
              obj.nowIndex = index;
            }
          });
        } else if (formatTimer < cusStartTime) {
          timerArr.map((item: any, index: any) => {
            if (item.formatTimer === cusStartTime) {
              obj.len = index - nowIndex;
              if (obj.len > 4) {
                obj.len = 4;
              }
            }
          });
        }
        return obj;
      },
      // 设置可选时间
      setOptionnalTime(timerArr: any) {
        let sliderList: any = document.querySelector("#sliderListId");
        let slidersWrapper: any = document.querySelector("#slidersWrapperId");
        let sliderWidth: any = slidersWrapper.getBoundingClientRect().width;
        sliderList.style.width = sliderWidth * timerArr.length + "px";
        let index: any = proxyData.getNowPerstion(timerArr).nowIndex;
        let len: any = proxyData.getNowPerstion(timerArr).len;
        let sliderLeft: any = sliderWidth * index;
        if (
          sliderLeft >
          proxyData.screenInfo.screenWidth +
            proxyData.screenInfo.screenWidth / 2
        ) {
          sliderLeft = sliderLeft - sliderWidth;
        }
        sliderList.style.left = -sliderLeft + "px";
        proxyData.setOptionnalPerstion(index, len);
      },
      sliderSwiper() {
        // 获取当前时间的下标
        let sliderList: any = document.querySelector("#sliderListId");
        let slidersWrapper: any = document.querySelector("#slidersWrapperId");
        let width: any =
          sliderList.offsetWidth - proxyData.screenInfo.screenWidth;
        swiper(sliderList, {
          swipeLeft: function (e: any) {
            if (!proxyData.checkMoveTarget(e)) {
              let left: any = isNaN(parseInt(sliderList.style.left))
                ? 0
                : parseInt(sliderList.style.left);
              left = Math.abs(left);
              if (left >= width) {
                sliderList.style.left = -width + "px";
              } else {
                sliderList.style.left =
                  -left - Math.abs(e.mation.moveX - e.mation.startX) + "px";
              }
            }
          },
          swipeRight: function (e: any) {
            if (!proxyData.checkMoveTarget(e)) {
              let left: any = isNaN(parseInt(sliderList.style.left))
                ? 0
                : parseInt(sliderList.style.left);
              if (left >= 0) {
                sliderList.style.left = 0 + "px";
              } else {
                sliderList.style.left =
                  left + Math.abs(e.mation.moveX - e.mation.startX) + "px";
              }
            }
          },
        });
      },
      // 判断滑动的是否是滑快
      checkMoveTarget(el: any) {
        let endBox: any = document.querySelector("#endBoxId");
        let endEnd: any = document.querySelector("#endId");
        let endRadio: any = document.querySelector("#endRadioId");
        if (
          el.target === endBox ||
          el.target === endEnd ||
          el.target === endRadio
        ) {
          return true;
        }
        return false;
      },
      // 判断滑动的位置是否包含服务定制的位置(如果当前滑动的位置在服务定制处不让滑动)
      checkPersionService() {
        let flag: any = false;
        for (let i = proxyData.startIndex; i < proxyData.endIndex; i++) {
          if (proxyData.nowTimerArr[i].isServiceTime) {
            flag = true;
            break;
          }
        }
        proxyData.formBtn = flag;
      },
      cancelRemoveListener() {
        let endBox: any = document.querySelector("#endBoxId");
        endBox.removeEventListener("touchstart", function (e: any) {}, false);
        endBox.removeEventListener("touchend", function (e: any) {}, false);
        endBox.removeEventListener("touchmove", function (e: any) {}, false);
        let sliderList: any = document.querySelector("#sliderListId");
        sliderList.removeEventListener(
          "touchstart",
          function (e: any) {},
          false
        );
        sliderList.removeEventListener("touchend", function (e: any) {}, false);
        sliderList.removeEventListener(
          "touchmove",
          function (e: any) {},
          false
        );
      },
      /**
       * 日历滑动
       */
      endBoxSwiper() {
        let sliderList: any = document.querySelector("#sliderListId");
        let endBox: any = document.querySelector("#endBoxId");
        let sliderBtnEl: any = document.querySelector("#sliderBtnId");
        let startEl: any = document.querySelector("#startId");
        let sliderBoxEl: any = document.querySelectorAll(".slider-box")[0];
        let sliderInitLeft: any = 0;
        let sliderBtnLeft: any = 0;
        let screenLeft: any = 0;
        let startElLeft: any = 0;
        let sliderBtnWidth: any = 0;
        let sliderBoxWidth: any = 0;
        let direction: any = 0; // 0是像左  1表示向右边移动
        let isMove: any = false;
        endBox.addEventListener("touchstart", function (e: any) {
          isMove = false;
          startElLeft = isNaN(parseInt(startEl.style.left))
            ? 0
            : parseInt(startEl.style.left);
          sliderInitLeft = isNaN(parseInt(sliderList.style.left))
            ? 0
            : parseInt(sliderList.style.left);
          sliderBtnLeft = isNaN(parseInt(sliderBtnEl.style.left))
            ? 0
            : parseInt(sliderBtnEl.style.left);
          sliderInitLeft = Math.abs(sliderInitLeft);
          sliderBtnWidth = sliderBtnEl.offsetWidth;
          sliderBoxWidth = sliderBoxEl.offsetWidth;
        });
        endBox.addEventListener("touchend", function (e: any) {
          if (isMove) {
            sliderBtnWidth = sliderBtnEl.offsetWidth;
            let index: any = Math.ceil(
              sliderBtnWidth / sliderBoxEl.offsetWidth
            );
            if (proxyData.startIndex + index >= proxyData.timerArr.length - 1) {
              index = proxyData.timerArr.length - 1 - proxyData.startIndex;
            }
            sliderBtnEl.style.width = sliderBoxEl.offsetWidth * index + "px";
            sliderBtnEl.style.background = `rgba(0,0,0,0.2)`;

            proxyData.setOptionnalPerstion(proxyData.startIndex, index);
            isMove = false;
            // 判断按钮是否可以点击(如果选择的时候包含服务定制时间,则不可点击)
            proxyData.checkPersionService();
          }
        });
        swiper(endBox, {
          swipeLeft: function (e: any) {
            if (proxyData.checkMoveTarget(e)) {
              direction = 0;
              isMove = true;
              let moveRealX: any = Math.abs(e.mation.moveX - e.mation.startX);
              let sliderLeft: any = isNaN(parseInt(sliderList.style.left))
                ? 0
                : parseInt(sliderList.style.left);
              sliderLeft = Math.abs(sliderLeft);

              let width: any = sliderBoxEl.offsetWidth;
              if (sliderBtnWidth - moveRealX <= width) {
                sliderBtnEl.style.width = width + "px";
              } else {
                sliderBtnEl.style.width = sliderBtnWidth - moveRealX + "px";
                proxyData.cancelSliderBoxColor();
              }
              let bg: any = parseImgUrl("ipdImages", "time-wait.svg");
              sliderBtnEl.style.background = `linear-gradient(0deg, rgba(0, 255, 163, 0.2), rgba(0, 255, 163, 0.2))`;
              if (
                sliderBtnLeft + (sliderBtnWidth - moveRealX) - sliderBoxWidth <
                sliderLeft
              ) {
                let left: any =
                  -sliderLeft +
                  (sliderLeft +
                    sliderBoxWidth -
                    (sliderBtnLeft + sliderBtnWidth - moveRealX));
                if (left > 0) {
                  sliderList.style.left = 0 + "px";
                } else {
                  sliderList.style.left = left + "px";
                }
              }
            }
          },
          swipeRight: function (e: any) {
            if (proxyData.checkMoveTarget(e)) {
              isMove = true;
              direction = 1;
              let moveRealX: any = Math.abs(e.mation.moveX - e.mation.startX);
              sliderBtnEl.style.background = `linear-gradient(0deg, rgba(0, 255, 163, 0.2), rgba(0, 255, 163, 0.2))`;
              let sliderLeft: any = isNaN(parseInt(sliderList.style.left))
                ? 0
                : parseInt(sliderList.style.left);
              sliderLeft = Math.abs(sliderLeft);
              let width: any =
                sliderList.offsetWidth - proxyData.screenInfo.screenWidth;
              screenLeft = sliderLeft + proxyData.screenInfo.screenWidth;
              if (
                sliderBtnLeft +
                  sliderBtnWidth +
                  moveRealX +
                  sliderBoxEl.offsetWidth * 2 >=
                screenLeft
              ) {
                let left: any =
                  -sliderLeft -
                  (sliderBtnLeft +
                    sliderBtnWidth +
                    moveRealX +
                    sliderBoxEl.offsetWidth * 2 -
                    screenLeft);
                sliderList.style.left = left + "px";
                if (sliderLeft >= width) {
                  sliderList.style.left = -width + "px";
                }
              }
              if (
                sliderBtnLeft +
                  sliderBtnWidth +
                  moveRealX +
                  sliderBoxEl.offsetWidth >=
                sliderList.offsetWidth
              ) {
                sliderBtnEl.style.width =
                  sliderList.offsetWidth -
                  sliderBtnLeft -
                  sliderBoxEl.offsetWidth +
                  "px";
              } else {
                sliderBtnEl.style.width = sliderBtnWidth + moveRealX + "px";
              }
            }
          },
        });
      },
      cancelSliderBoxColor() {
        let sliderBoxArr: any = document.querySelectorAll(".slider-box");
        for (let i = 0; i < sliderBoxArr.length; i++) {
          if (!proxyData.nowTimerArr[i].isCheck) {
            if (
              i >= proxyData.startIndex &&
              i < proxyData.startIndex + proxyData.startLen
            ) {
              sliderBoxArr[i].style.background =
                "linear-gradient(0deg, rgba(0, 255, 163, 0.2), rgba(0, 255, 163, 0.2))";
            }
          }
        }
      },
      /**
       * 设置可选日期的位置
       */
      setOptionnalPerstion(index: any, len: any = 1) {
        let sliderList: any = document.querySelector("#sliderListId");
        proxyData.startIndex = index;
        proxyData.startLen = len;
        proxyData.endIndex = proxyData.startIndex + len;
        let slidersWrapper: any = document.querySelector("#slidersWrapperId");
        let slidersWrapperWidth: any =
          slidersWrapper.getBoundingClientRect().width;
        let sliderBtnEl: any = document.querySelector("#sliderBtnId");
        let endEnd: any = document.querySelector("#endBoxId");
        let sliderBoxArr: any = document.querySelectorAll(".slider-box");
        let parseIndex = proxyData.getTomorrowIndex();
        for (let i = 0; i < sliderBoxArr.length; i++) {
          if (i >= parseIndex) {
            sliderBoxArr[i].style.background = "transparent";
          }
        }
        let bg: any = parseImgUrl("ipdImages", "time-wait.svg");
        for (let i = 0; i < len; i++) {
          sliderBoxArr[
            index + i
          ].style.background = `linear-gradient(0deg, rgba(0, 255, 163, 0.2), rgba(0, 255, 163, 0.2)), url(${bg})`;
        }
        sliderBtnEl.style.width = slidersWrapperWidth * len + "px";
        sliderBtnEl.style.background = `rgba(0,0,0,0.2)`;
        let left: any = slidersWrapperWidth * index;
        sliderBtnEl.style.left = left + "px";
        // // 已被选择的时间
        proxyData.setCheckTimeStyle();
        // // 固定服务时间（空间服务时间）
        proxyData.setServiceTimerStyle();
      },
      /**
       * 设置过去的时间
       */
      setPastTime(index: any) {
        if (proxyData.nowData.week === "今天") {
          let sliderBoxArr: any = document.querySelectorAll(".slider-box");
          for (let i = 0; i < sliderBoxArr.length; i++) {
            if (i < index) {
              sliderBoxArr[i].style.background = `rgba(196, 196, 196, 0.2)`;
            }
          }
        }
      },
      /**
       * 设置已经选中时间
       */
      setCheckTimeStyle() {
        let timerArr: any = proxyData.nowTimerArr;
        let sliderBoxArr: any = document.querySelectorAll(".slider-box");
        for (let i = 0; i < timerArr.length; i++) {
          if (timerArr[i].isCheck) {
            sliderBoxArr[i].style.background = proxyData.bgRed;
          }
        }
      },
      /***
       * 固定服务时间的颜色增加
       */
      setServiceTimerStyle() {
        let timerArr: any = proxyData.nowTimerArr;
        // debugger
        let sliderBoxArr: any = document.querySelectorAll(".slider-box");
        for (let i = 0; i < timerArr.length; i++) {
          if (timerArr[i].isServiceTime) {
            sliderBoxArr[i].style.background = `rgba(196, 196, 196, 0.2)`;
          }
        }
      },
      // 转化日期(分钟处理成可选择)
      parseCusStartTime(time: any) {
        let newTime: any = time;
        if (time) {
          let minute: any = (time / 100) % 100;
          if (minute) {
            let temTimeInt: any = time / 10000;
            temTimeInt = parseInt(temTimeInt);
            if (minute < 30) {
              if (temTimeInt < 10) {
                newTime = "0" + temTimeInt + "30" + "00";
              } else {
                newTime = temTimeInt + "30" + "00";
              }
            } else if (minute > 30) {
              temTimeInt = temTimeInt + 1;
              if (temTimeInt < 10) {
                newTime = "0" + temTimeInt + "00" + "00";
              } else {
                newTime = temTimeInt + "00" + "00";
              }
            }
          }
        }
        return newTime;
      },
      // 转化日期(分钟处理成可选择)
      parseCusEndTime(time: any) {
        let newTime: any = time;
        if (time) {
          let minute: any = (time / 100) % 100;
          if (minute) {
            let temTimeInt: any = time / 10000;
            temTimeInt = parseInt(temTimeInt);
            if (minute < 30) {
              if (temTimeInt < 10) {
                newTime = "0" + temTimeInt + "00" + "00";
              } else {
                newTime = temTimeInt + "00" + "00";
              }
            } else if (minute > 30) {
              if (temTimeInt < 10) {
                newTime = "0" + temTimeInt + "30" + "00";
              } else {
                newTime = temTimeInt + "30" + "00";
              }
            }
          }
        }
        return newTime;
      },
      /**
       * 选中当前模块
       */
      checkSlider(item: any, index: any) {
        if (index === proxyData.nowTimerArr.length - 1) {
          return;
        }
        // 按钮的状态
        proxyData.formBtn = false;
        let nowIndex: any = proxyData.getNowIndex();
        if (proxyData.nowData.week === "今天" && index < nowIndex) {
          // 过去的时间不可选择
          // 过去的时间不可选择
          return;
        }
        if (proxyData.nowData.cusStartTime && proxyData.nowData.cusEndTime) {
          let formatTimer: any = proxyData.nowTimerArr[index].formatTimer; //在服务定制时间之间
          let cusStartTime: any = proxyData.parseCusStartTime(
            proxyData.nowData.cusStartTime
          );
          let cusEndTime: any = proxyData.parseCusEndTime(
            proxyData.nowData.cusEndTime
          );
          if (formatTimer >= cusStartTime && formatTimer < cusEndTime) {
            return;
          }
        }
        proxyData.setOptionnalPerstion(index);
      },
      /**
       * 获取个人加班申请数据
       */
      dateArr: dateArr,
      myTimeArr: myTimeArr,
      // // 服务定制开始时间转化(处理服务定制时间包含几分钟的问题)
      // parseCusStatTime() {},
      // // 服务定制结束时间转化(处理服务定制时间包含几分钟的问题)
      // parseCusEndTime(time: any) {
      //   let newTime: any = "";
      //   if (time) {
      //     let minute: any = (time / 100) % 100;
      //     if (minute < 30) {

      //     } else if (minute > 30) {
      //     } else {
      //       newTime = time;
      //     }
      //   }
      // },
      setWorkTimeList() {
        proxyData.isUpdate = false;
        proxyGlobal.proxy.$loadinngEnd();
        let data: any = proxyData.workkArr;
        proxyData.dateArr = [];
        let nowDate: any = formatDate("YYYY-MM-DD");
        for (let i = 0; i < data.length; i++) {
          let date: any = formatDateStr(data[i].date);
          let cusStartTime: any = proxyData.parseCusStartTime(
            data[i].cusStartTime
          );
          let cusEndTime: any = proxyData.parseCusEndTime(data[i].cusEndTime);
          // let isActive: Boolean = false;
          let week: any = getWeekDate(new Date(date).getDay());
          if (date === nowDate) {
            // isActive = true;
            week = "今天";
          }
          let timerArr: any = [];
          for (let i = 0; i < proxyData.timerArr.length; i++) {
            let obj: any = {
              timer: proxyData.timerArr[i],
              isCheck: false,
              formatTimer: proxyData.timerArr[i].replace(/[:]/g, "") + "00",
            };
            timerArr.push(obj);
          }
          let customSceneList: any = data[i]?.customSceneList ?? [];
          customSceneList.map((custom: any) => {
            for (let j = 0; j < timerArr.length; j++) {
              // debugger
              if (timerArr[j].formatTimer < cusStartTime) {
                let tempStartTime: any = proxyData.parseCusStartTime(
                  custom.startTime
                );
                let tempEndTime: any = proxyData.parseCusStartTime(
                  custom.endTime
                );
                // 加班时间在服务定制时间之前
                if (
                  timerArr[j].formatTimer >= tempStartTime &&
                  timerArr[j].formatTimer < tempEndTime
                ) {
                  timerArr[j].isCheck = true;
                }
              } else {
                // 加班时间在服务外定制时间之后
                let tempStartTime: any = proxyData.parseCusEndTime(
                  custom.startTime
                );
                let tempEndTime: any = proxyData.parseCusEndTime(
                  custom.endTime
                );
                if (
                  timerArr[j].formatTimer >= tempStartTime &&
                  timerArr[j].formatTimer < tempEndTime
                ) {
                  timerArr[j].isCheck = true;
                }
              }
            }
          });
          // 是否在固定区域时间
          if (cusStartTime && cusEndTime) {
            timerArr.map((item: any) => {
              if (
                item.formatTimer >= cusStartTime &&
                item.formatTimer < cusEndTime
              ) {
                item.isServiceTime = true;
              } else {
                item.isServiceTime = false;
              }
            });
          }

          proxyData.dateArr.push({
            date: date,
            isActive: false,
            oldDate: data[i].date,
            objectId: data[i].objectId,
            cusStartTime: data[i].cusStartTime,
            customSceneList: customSceneList,
            cusEndTime: data[i].cusEndTime,
            day: getDate(new Date(date)),
            week: week,
            timerArr: timerArr,
          });
        }
        // debugger
        proxyData.dateArr.map((item: any, index: any) => {
          if (index === proxyData.activeIndex) {
            proxyData.checkDate(item, index);
            return;
          }
        });
      },
      clearTimerBoxStyle() {
        proxyData.dateArr.map((elItem: any) => {
          elItem.isActive = false;
        });
        let timerArr: any = proxyData.nowTimerArr;
        let sliderBoxArr: any = document.querySelectorAll(".slider-box");
        for (let i = 0; i < timerArr.length; i++) {
          sliderBoxArr[i].style.background = `transparent`;
        }
        // 切换日期的时候取消绑定
        // proxyData.cancelRemoveListener();
      },
      /**
       * 切换日期
       */
      activeIndex: 0,
      checkDate(item: any, index: any) {
        proxyData.clearTimerBoxStyle();
        item.isActive = true;
        proxyData.activeIndex = index;
        proxyData.nowTimerArr = proxyData.dateArr[index].timerArr;
        proxyData.nowData = proxyData.dateArr[index];
        nextTick(() => {
          proxyData.setOptionnalTime(proxyData.nowTimerArr);
          let nowIndex: any = proxyData.getNowIndex();
          if (proxyData.nowData.week === "今天") {
            proxyData.setPastTime(nowIndex);
          }
          // // 已经被选择的时间
          proxyData.setCheckTimeStyle();
          // // 固定服务时间
          proxyData.setServiceTimerStyle();
          // dom元素宽高调整
          proxyData.changeEl();
        });
      },
      /**
       * dom的滚动功能设置
       */
      flag: false,
      changeEl() {
        proxyData.setScreennWidth();
        proxyData.sliderSwiper();
        proxyData.endBoxSwiper();
        // if (!proxyData.flag) {
        //   proxyData.setScreennWidth();
        //   proxyData.sliderSwiper();
        //   proxyData.endBoxSwiper();
        //   proxyData.flag = true;
        // }
      },
      // 加班数据格式化=》后台需要的数据结构(添加加班逻辑)
      formateAddTimer() {
        let customSceneList: any = proxyData.nowData.customSceneList;
        let timerArr: any = proxyData.nowData.timerArr;
        let startTime: any = timerArr[proxyData.startIndex].formatTimer;
        let endTime: any = timerArr[proxyData.endIndex].formatTimer;
        // debugger;
        let delTimerArr: any = [];
        // 加班时间拼接
        customSceneList.map((item: any, index: any) => {
          // let itemStartTime:any=proxyData.parseCusStartTime(item.startTime)
          // let itemEndTime:any=proxyData.parseCusStartTime(item.endTime)
          // item时间段保护当前时间端
          if (startTime < item.startTime) {
            if (endTime < item.startTime) {
            } else if (endTime >= item.startTime) {
              // 时间段连续拼接上
              let delObj: any = proxyData.formaTimeObj(
                item,
                "1",
                item.startTime,
                item.endTime
              );
              delTimerArr.push(delObj);
              startTime = startTime;
              endTime = endTime;
            }
          } else if (startTime >= item.startTime && startTime < item.endTime) {
            if (endTime <= item.endTime) {
              let delObj: any = proxyData.formaTimeObj(
                item,
                "1",
                item.startTime,
                item.endTime
              );
              delTimerArr.push(delObj);
              startTime = startTime;
              endTime = endTime;
            } else if (endTime > item.endTime) {
              let delObj: any = proxyData.formaTimeObj(
                item,
                "1",
                item.startTime,
                item.endTime
              );
              delTimerArr.push(delObj);
              startTime = item.startTime;
              endTime = endTime;
            }
          } else if (startTime > item.endTime) {
            if (startTime === item.endTime) {
              let delObj: any = proxyData.formaTimeObj(
                item,
                "1",
                item.startTime,
                item.endTime
              );
              startTime = item.startTime;
              endTime = endTime;
            }
          } else if (startTime === item.startTime && endTime === item.endTime) {
            // 两个时间段一致
          }
        });

        // 加班时间处理好后和服务定制时间做对比(处理时分秒的情况)
        let cusStartTime: any = proxyData.parseCusStartTime(
          proxyData.nowData.cusStartTime
        );
        let cusEndTime: any = proxyData.parseCusEndTime(
          proxyData.nowData.cusEndTime
        );
        if (startTime < cusStartTime && endTime <= cusStartTime) {
          if (endTime === cusStartTime) {
            endTime = proxyData.nowData.cusStartTime;
          }
        } else if (startTime >= cusEndTime) {
          if (startTime === cusEndTime) {
            startTime = proxyData.nowData.cusEndTime;
          }
        }
        let relNowTime: any = getRelNowTime();
        let type = "0";
        if (
          proxyData.nowData.week === "今天" &&
          relNowTime >= startTime &&
          relNowTime <= endTime
        ) {
          type = "2";
        }

        let addObj: any = proxyData.formaTimeObj(
          customSceneList[0],
          type,
          startTime,
          endTime
        );
        delTimerArr.push(addObj);
        let formTimeArr: any = delTimerArr;
        return formTimeArr;
      },
      // 格式化加班单个数据
      formaTimeObj(item: any, type: any, startTime: any, endTime: any) {
        let obj: any = {
          projectId: proxyData.projectId, //类型：String  必有字段  备注：项目id
          objectId: proxyData.nowData.objectId, //类型：String  必有字段  备注：空间id
          sourceType: "sagacareAndtenantslink", //类型：String  必有字段  备注：sagacareAndtenantslink 来源
          startDate: proxyData.nowData.oldDate, //类型：String  必有字段  备注：//开始日期
          endDate: proxyData.nowData.oldDate, //类型：String  必有字段  备注：//结束日期
          startTime: startTime, //类型：String  必有字段  备注：//开始时间
          endTime: endTime, //类型：String  必有字段  备注：//结束时间
          type: type, //类型：String  必有字段  备注：//0 预约加班，1 取消，2 加班(我来了)， 3 最后一个走
          userId: proxyData.userInfo.userId, //类型：String  必有字段  备注：//用户id
          userPhone: proxyData.userInfo.userPhone, //类型：String  必有字段  备注：//手机号
          customSceneEqType: "ALL", //类型：String  必有字段  备注：//来源 AC 空调入口, SE 灯入口 ALL 加班入口
          userName: proxyData.userInfo.userName, //类型：String  必有字段  备注：//名字
        };
        if (type === "1") {
          obj.id = item.id; //类型：String  必有字段  备注：取消加班时必传
        }
        return obj;
      },
      //  加班数据格式化=》后台需要的数据结构(删除加班逻辑)
      formateDelTimer() {
        let timerArr: any = proxyData.nowData.timerArr;
        let endIndex: any = proxyData.endIndex > 0 ? proxyData.endIndex - 1 : 0;
        // debugger
        // 如果当前选择的日期只在已经选中的范围内
        if (
          timerArr[proxyData.startIndex].isCheck &&
          timerArr[endIndex].isCheck
        ) {
          let customSceneList: any = proxyData.nowData.customSceneList;
          let startTime: any = timerArr[proxyData.startIndex].formatTimer;
          let endTime: any = timerArr[proxyData.endIndex].formatTimer;
          let delTimerArr: any = [];
          let addTimeArr: any = [];
          // 删除时间的数据拼接
          customSceneList.map((item: any, index: any) => {
            if (item.startTime < startTime) {
              if (item.endTime <= endTime) {
                let delObj: any = proxyData.formaTimeObj(
                  item,
                  "1",
                  item.startTime,
                  item.endTime
                );
                delTimerArr.push(delObj);
                let addObj: any = proxyData.formaTimeObj(
                  customSceneList[0],
                  "0",
                  item.startTime,
                  startTime
                );
                addTimeArr.push(addObj);
              } else if (item.endTime > endTime) {
                let delObj: any = proxyData.formaTimeObj(
                  item,
                  "1",
                  item.startTime,
                  item.endTime
                );
                delTimerArr.push(delObj);
                let addObj1: any = proxyData.formaTimeObj(
                  customSceneList[0],
                  "0",
                  item.startTime,
                  startTime
                );
                addTimeArr.push(addObj1);
                let addObj2: any = proxyData.formaTimeObj(
                  customSceneList[0],
                  "0",
                  endTime,
                  item.endTime
                );
                addTimeArr.push(addObj2);
              }
            } else if (item.startTime === item.startTime) {
              if (item.endTime <= endTime) {
                // 整段删除
                let delObj: any = proxyData.formaTimeObj(
                  item,
                  "1",
                  item.startTime,
                  item.endTime
                );
                delTimerArr.push(delObj);
              } else if (item.endTime > endTime) {
                let delObj: any = proxyData.formaTimeObj(
                  item,
                  "1",
                  item.startTime,
                  item.endTime
                );
                delTimerArr.push(delObj);
                let addObj1: any = proxyData.formaTimeObj(
                  customSceneList[0],
                  "0",
                  endTime,
                  item.endTime
                );
                addTimeArr.push(addObj1);
              }
            } else if (item.startTime > startTime) {
              if (item.endTime <= endTime) {
                // 整段删除
                let delObj: any = proxyData.formaTimeObj(
                  item,
                  "1",
                  item.startTime,
                  item.endTime
                );
                delTimerArr.push(delObj);
              } else if (item.endTime > endTime) {
                let delObj: any = proxyData.formaTimeObj(
                  item,
                  "1",
                  item.startTime,
                  item.endTime
                );
                delTimerArr.push(delObj);
                let addObj1: any = proxyData.formaTimeObj(
                  customSceneList[0],
                  "0",
                  endTime,
                  item.endTime
                );
                addTimeArr.push(addObj1);
              }
            }
          });
          addTimeArr.map((item: any) => {
            let realTime: any = getRelNowTime();
            if (realTime >= item.startTime && realTime <= item.endTime) {
              item.type === "2";
            }
          });
          let formTimeArr: any = addTimeArr.concat(delTimerArr);
          return formTimeArr;
        } else {
          return [];
        }
      },
      // 关闭加班弹窗
      closeWorkTimer() {
        proxyData.formBtn = false;
      },
      // 提交申请
      addWorkTimer() {
        let formTimerArr: any = proxyData.formateAddTimer();
        proxyData.saveBatchCustomScene(formTimerArr);
        // console.log("提交申请-----");
        // console.log(formTimerArr);
      },
      // 提交加班记录
      saveBatchCustomScene(formTimerArr: any, type: any = 1) {
        proxyGlobal.proxy.$loadingStart(0);
        proxyData.formBtn = true;
        saveBatchCustomScene(formTimerArr)
          .then((res) => {
            let timer: any = setTimeout(() => {
              if (type === 1) {
                context.emit("closeWork");
                proxyGlobal.proxy.$loadinngEnd();
              } else if (type === 2) {
                // 删除
                proxyData.isUpdate = true;
                // proxyData.setWorkTimeList();
              }
              timer = null;
              clearTimeout(timer);
              proxyData.formBtn = false;
            }, 1000);
          })
          .catch(() => {
            proxyGlobal.proxy.$loadinngEnd();
            proxyData.formBtn = false;
          });
      },
      // 删除
      isUpdate: false, // 删除更新弹窗数据
      triggerDelTime() {
        let formTimeArr: any = proxyData.formateDelTimer();
        if (formTimeArr && formTimeArr.length) {
          console.log(formTimeArr);
          // alert("确定删除当前时间吗?");
          Dialog.confirm({
            title: "确认",
            message: "确定删除当前时间吗?",
          })
            .then(() => {
              proxyData.saveBatchCustomScene(formTimeArr, 2);
            })
            .catch(() => {
              // on cancel
            });
        }
      },
    });
    nextTick(() => {
      // proxyData.setScreennWidth()
    });
    watch(props, (newProps: any) => {
      proxyData.workkArr = newProps.workkArr;
      proxyData.projectId = newProps.projectId;
      if (proxyData.isUpdate) {
        console.log("数据更新了");
        proxyData.setWorkTimeList();
      }
      // proxyData.getWorkTimeList();
    });
    onMounted(() => {
      // 设置dom最外层的宽
      proxyData.setWorkTimeList();
    });
    return {
      ...toRefs(proxyData),
    };
  },
});
</script>

<style lang="scss" scoped>
.work-content {
  position: relative;
  height: 100%;
  width: 100%;
  background: #fff;
}
.work-space {
  width: 100%;
  padding-left: 10px;
  .space-title {
    padding-bottom: 10px;
    font-family: "Noto Sans SC";
    font-style: normal;
    font-weight: 500;
    font-size: 22px;
    line-height: 31px;
    color: #000000;
  }
  .device-tip {
    padding-bottom: 36px;
    font-family: "Noto Sans SC";
    font-style: normal;
    font-weight: 400;
    font-size: 12px;
    line-height: 17px;
    color: #8d9399;
  }
}
.add-time {
  width: 100%;
  // height: 80%;
  background: #fff;
  box-sizing: border-box;
  // padding: 10px;
  overflow: hidden;

  .date_box {
    display: flex;
    justify-content: space-between;
    width: 100%;
    padding-bottom: 35px;

    .date-item {
      padding-top: 20px;
      width: 50px;
      height: 74px;
      box-sizing: border-box;
      border: 1px solid #eff0f1;
      border-radius: 16px;

      span {
        display: block;
        width: 100%;
        text-align: center;

        &:nth-child(1) {
          font-family: "Noto Sans SC";
          padding-bottom: 10px;
          font-style: normal;
          font-weight: 400;
          font-size: 10px;
          line-height: 12px;
          text-align: center;
          color: #8d9399;
        }

        &:nth-child(2) {
          font-family: "Persagy";
          font-style: normal;
          font-weight: 700;
          font-size: 14px;
          line-height: 19px;
          text-align: center;
          color: #000000;
        }
      }
    }

    .date-item-active {
      background: rgba(206, 159, 39, 0.4);
      border: 1px solid rgba(206, 159, 39, 0.4);
    }
  }

  .sliders-list {
    position: relative;
    // padding-top: 20px;
    margin-top: 20px;
    height: 135px;
    white-space: nowrap;
    overflow-x: auto;
    overflow-y: hidden;

    &::-webkit-scrollbar {
      display: none;
    }

    .sliders-wrapper {
      display: inline-block;
      box-sizing: border-box;
      width: 72px;
      height: 135px;
      //border-bottom: 1px solid #ECEFF4;
      &:nth-child(2n + 1) {
        border-left: 1px solid #eceff4;
      }

      .sliders {
        position: relative;
        // width: 36px;
        width: 100%;
        height: 100%;

        .label {
          position: absolute;
          height: 34px;
          left: 0px;
          top: 0px;
          font-family: "PingFang SC";
          font-style: normal;
          font-weight: 400;
          font-size: 10px;
          line-height: 14px;
          padding-left: 5px;
          color: #8d9399;
        }

        .slider-box {
          position: absolute;
          //width: 100%;
          width: 72px;
          height: 100px;
          left: -1px;
          // top:25px;
          bottom: 0px;
          //background: linear-gradient(0deg, rgba(255, 0, 0, 0.2), rgba(255, 0, 0, 0.2));
        }
      }
    }

    .slider-btn {
      position: absolute;
      height: 100px;
      //left: 40px;
      top: 35px;

      .start {
        position: absolute;
        width: 2px;
        top: 0;
        height: 100px;
        left: 0px;
        //left: 176px;
        background: #04b49c;
      }

      .end-box {
        position: absolute;
        top: 0;
        width: 20px;
        height: 100px;
        right: -5px;
        z-index: 999;
        //left: 286px;

        .end {
          position: absolute;
          top: 0;
          left: 10px;
          width: 2px;
          height: 100px;
          background: #04b49c;
        }

        .end-radio {
          width: 22px;
          position: absolute;
          top: 37px;
          left: -1px;
          height: 22px;
          background: #ffffff;
          border-radius: 50%;
          box-shadow: 0px 1px 2px rgba(4, 38, 0, 0.2);
        }
      }
    }
  }
}
.add-time-btn {
  position: absolute;
  // display: flex;
  // justify-content: space-between;
  // width: 100%;
  bottom: 5vh;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  padding-top: 24px;
  text-align: center;

  .cancel-btn {
    // width: 32%;
    width: 170px;
    height: 50px;
    line-height: 50px;
    background: #ffffff;
    border: 1px solid #c3c7cb;
    border-radius: 25px;
    font-size: 16px;
    margin-right: 20px;
    font-weight: 400;
    color: #1f2529;
  }

  .comfirm-btn {
    // width: 52%;
    width: 265px;
    height: 50px;
    line-height: 50px;
    font-weight: 400;
    font-size: 16px;
    text-align: center;
    background: #ce9f27;
    border-radius: 25px;
    color: #fff;
  }
  .comfirm-btn-diabled {
    background: rgba(196, 196, 196, 0.2);
    color: #1f2529;
  }
}
</style>